/* ===== Original style.css ===== */

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

body {
    font-family: Inter;
    background: #fff;
    color: #222;
}

a {
    text-decoration: none !important;
    color: #000;
    /* color: #fa990c !important;*/
}
header {
    padding: 5px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 999;
}

.top-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    font-size: 34px;
    font-family: Cormorant Garamond;
    font-weight: 700;
}


.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 70%;
        padding: 10px 30px;
        border-radius: 50px;
        border: 1px solid #ddd;
        font-size: 15px;
    }


.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

    .menu-btn span {
        width: 30px;
        height: 3px;
        background: #000;
        border-radius: 5px;
        display: block;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100%;
    background: white;
    padding: 10px;
    box-shadow: -10px 0 30px rgba(0,0,0,.1);
    transition: .5s;
    z-index: 9999;
    overflow: auto;
}

.close {
    font-size: 24px;
    margin-bottom: 20px;
    cursor: pointer;
}

.side-menu ul {
    list-style: none;
}

.side-menu li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

.dropdown {
    margin-top: 10px;
    padding-left: 10px;
}

    .dropdown a {
        display: block;
        padding: 8px 0;
        text-decoration: none;
        color: #666;
    }



.hero {
    padding: 60px 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

    .hero img {
        width: 100%;
        height: 450px;
        object-fit: cover;
        border-radius: 20px;
    }

    .hero h1 {
        font-size: 60px;
        font-family: Cormorant Garamond;
        margin: 20px 0;
    }

    .hero button {
        padding: 16px 35px;
        background: black;
        color: white;
        border: none;
        margin-top: 20px;
    }



.section-title {
    font-size: 36px;
    margin-bottom: 40px;
}


.grid4,
.product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}

.card,
.product,
.blog,
.testimonial {
    border: 1px solid #eee;
    padding: 20px;
    background: white;
    transition: .4s;
}

    .card:hover,
    .product:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,.08);
    }

    .card img,
    .product img,
    .blog img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        margin-bottom: 15px;
    }

.cta {
    background: black;
    color: white;
    text-align: center;
    padding: 80px;
}

    .cta.light {
        background: #f8f8f8;
        color: black;
    }

    .cta button {
        margin-top: 20px;
        padding: 15px 35px;
        border: none;
    }

.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.testimonial-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

footer {
    padding: 80px 5%;
    display: grid;
    gap: 30px;
    background: #fafafa;
}



@media(max-width:768px) {

    .hero,
    .grid4,
    .product-grid,
    .blog-grid,
    .testimonial-wrap,
    footer {
        grid-template-columns: 1fr;
    }

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

    .side-menu {
        width: 100%;
    }

    .search-wrap input {
        padding: 15px;
    }
}

@media(max-width:768px) {

    .top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        position: relative;
    }

    /* HIDE SEARCH BY DEFAULT */

    .search-wrap {
        width: 100%;
        order: 2;
        display: none;
        margin-top: 12px;
    }

        /* SHOW SEARCH */

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            height: 52px;
            border-radius: 14px;
            border: 1px solid #ddd;
            padding: 0 18px;
            font-size: 15px;
            outline: none;
        }

    /* HEADER ICONS */

    .header-icons {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* SEARCH ICON */

    .search-toggle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;
    }
}

.header-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 20px;
}

    .icon span {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #d10000;
        color: white;
        font-size: 11px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }



.top-categories {
    margin: 10px 5%;
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border: 1px solid #E6A032;
    border-radius: 20px;
    overflow: hidden;
    background: white;
}

.cat-item {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #E6A032;
    font-size: 28px;
}

    .cat-item p {
        margin-top: 10px;
        font-size: 16px;
    }

    /* LIGHT HOVER EFFECT */

    .cat-item:hover {
        background: #fff7f0;
        cursor: pointer;
    }


        /* TEXT COLOR CHANGE */

        .cat-item:hover p {
            color: #ff7a00;
        }

.hero {
    padding-top: 20px;
}



.product {
    position: relative;
    padding: 0;
    border: none;
    box-shadow: none;
}

.label-wrap {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.hot {
    background: #ff4d4d;
    color: white;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 30px;
}

.sale {
    background: black;
    color: white;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 30px;
}

.price {
    margin-top: 10px;
    font-weight: 700;
    font-size: 16px;
}



.cta-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eef3f2;
    border-radius: 25px;
    overflow: hidden;
    margin: 100px 5%;
}

.cta-content {
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .cta-content h2 {
        font-size: 55px;
        font-family: Cormorant Garamond;
        margin-bottom: 25px;
    }

    .cta-content button {
        width: 180px;
        padding: 18px;
        border: none;
        background: #044e55;
        color: white;
        margin-top: 25px;
        border-radius: 50px;
    }

.cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.left-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .left-side h2 {
        font-size: 65px;
        font-weight: 700;
    }

.arrows {
    margin-top: 30px;
    display: flex;
    gap: 20px;
}

    .arrows button {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
    }

.testimonial-card {
    background: white;
    padding: 60px;
    border-radius: 12px;
}

.profile {
    display: flex;
    gap: 20px;
    margin-top: 35px;
    align-items: center;
}

    .profile img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }



@media(max-width:768px) {

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 3px;
        font-size: 24px;
    }

        .cat-item p {
            font-size: 12px;
        }

    .cta-banner,
    .testimonial-section {
        grid-template-columns: 1fr;
    }

    .left-side h2 {
        font-size: 42px;
    }

    .header-icons {
        gap: 8px;
    }

    .icon {
        width: 42px;
        height: 42px;
    }
}


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

body {
    font-family: 'Poppins',sans-serif;
    background: #f2f2f2;
    overflow-x: hidden;
}

/* SECTION */

.premium-slider {
    height: 50vh;
    padding: 40px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* SCROLL AREA */

.slider-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollLeft 30s linear infinite;
    padding-left: 50px;
}

.premium-slider:hover .slider-track {
    animation-play-state: paused;
}

/* CARD */

.slide-card {
    position: relative;
    width: 760px;
    height: 400px;
    border-radius: 28px;
    overflow: hidden;
    flex-shrink: 0;
    background: #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

    .slide-card:hover {
        transform: translateY(-8px);
    }

    /* IMAGE */

    .slide-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* OVERLAY */

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to right, rgba(0,0,0,0.55), rgba(0,0,0,0.10) );
}

/* CONTENT */

.slide-content {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
    color: #fff;
    max-width: 360px;
}

    .slide-content h2 {
        font-size: 52px;
        line-height: 1;
        font-weight: 500;
        margin-bottom: 20px;
        letter-spacing: -1px;
    }

    .slide-content p {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 28px;
        opacity: 0.95;
    }

.slide-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 50px;
    background: #fa990c;
    color: #111;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

    .slide-btn:hover {
        background: #fff;
    }

/* SECOND STYLE */

.light-card .slide-overlay {
    background: linear-gradient( to right, rgba(255,255,255,0.88), rgba(255,255,255,0.15) );
}

.light-card .slide-content {
    color: #111;
}

.light-card .slide-btn {
    background: #8d9c3f;
    color: #fff;
}

/* ANIMATION */

@keyframes scrollLeft {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* RESPONSIVE */

@media(max-width:768px) {

    .premium-slider {
        height: auto;
        padding: 30px 0;
    }

    .slide-card {
        width: 90vw;
        height: 320px;
    }

    .slide-content {
        left: 30px;
        max-width: 260px;
    }

        .slide-content h2 {
            font-size: 34px;
        }

        .slide-content p {
            font-size: 16px;
        }
}

body {
    background: #f5f5f5;
    font-family: 'Outfit',sans-serif;
}

/* SECTION */

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

/* LEFT BANNER */

.main-banner {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    background: #f8eddc;
    height: 100%;
    min-height: 520px;
    padding: 30px;
    transition: 0.4s ease;
    border: 1px solid #eee;
}

    .main-banner:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.08);
    }

    .main-banner img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.banner-content {
    position: absolute;
    left: 40px;
    bottom: 35px;
}

    .banner-content h2 {
        font-size: 30px;
        font-weight: 700;
        color: #fa990c;
        line-height: 1;
        margin-bottom: 12px;
    }

    .banner-content p {
        font-size: 16px;
        color: #111;
        font-weight: 500;
        margin: 0;
    }

.arrow-btn {
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 82px;
    height: 82px;
    background: linear-gradient(135deg,#fa990c,#fa990c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 38px;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 15px 30px rgba(217,59,88,0.25);
}

    .arrow-btn:hover {
        transform: scale(1.08);
        color: #fff;
    }

/* CATEGORY CARD */

.category-card {
    border-radius: 17px;
    text-align: center;
    transition: 0.35s ease;
    height: 100%;
    cursor: pointer;
    border: 1px solid #efefef;
}

    .category-card:hover {
        transform: translateY(-6px);
        background: #fff;
        box-shadow: 0 18px 45px rgba(0,0,0,0.07);
    }

.category-image {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-bottom: 14px;*/
}

    .category-image img {
        width: 100%;
        max-width: 170px;
        object-fit: contain;
        transition: 0.4s ease;
    }

.category-card:hover img {
    transform: scale(1.06);
}

.category-title {
    font-size: 16px;
    font-weight: 500;
    color: #111;
    margin-bottom: 5px;
}

/* RESPONSIVE */

@media(max-width:992px) {

    .main-banner {
        margin-bottom: 30px;
        min-height:auto;
        padding:20px;
    }
}

@media(max-width:768px) {

    .banner-content h2 {
        font-size: 36px;
    }

    .banner-content p {
        font-size: 18px;
    }

    .arrow-btn {
        width: 65px;
        height: 65px;
        font-size: 28px;
    }

    .category-title {
        font-size: 22px;
    }
}


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

body {
    background: #f7f7f7;
    font-family: 'Outfit',sans-serif;
}

/* SECTION */

.product-section {
    padding: 70px 40px;
}

/* TITLE */

.section-title {
    margin-bottom: 40px;
}

    .section-title h2 {
        font-size: 30px;
        font-weight: 800;
        color: #202030;
        line-height: 1;
    }

    .section-title p {
        font-size: 16px;
        color: #8b8b97;
        margin-top: 10px;
    }

/* GRID */

.product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}

/* CARD */

.product-card {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #e3e6eb;
    transition: 0.35s ease;
    position: relative;
}

    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    }

/* IMAGE */

.product-image {
    position: relative;
    height: 330px;
    overflow: hidden;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.4s ease;
    }

.product-card:hover img {
    transform: scale(1.05);
}

/* WISHLIST */

.wishlist-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 23px;
    height: 23px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #b5b5b5;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: 0.3s;
    z-index: 2;
}

    .wishlist-btn:hover {
        color: #ff4f70;
    }

/* ORANGE OVERLAY */

.product-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 136, 0, 0.38);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 28px;
    opacity: 0;
    transition: 0.35s ease;
    z-index: 2;
}

/* SHOW OVERLAY ON HOVER */

.product-card:hover .product-overlay {
    opacity: 1;
}

/* ADD TO CART BUTTON */

.add-cart-btn {
    background: #fff;
    color: #ff7a00;
    border: none;
    outline: none;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(90px);
    transition: 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* BUTTON SLIDE UP */

.product-card:hover .add-cart-btn {
    transform: translateY(0);
}

.add-cart-btn:hover {
    background: #111;
    color: #fff;
}
/* CONTENT */

.product-content {
    padding: 22px;
}

/* TITLE */

.product-title {
    font-size: 21px;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
}

/* PRICE */

.price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.price {
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

.old-price {
    font-size: 20px;
    color: #b9b9b9;
    text-decoration: line-through;
}

.discount {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #18a34a;
    padding: 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* BOTTOM */

.bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* RATING */

.rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6f6f7d;
}

    .rating i {
        color: #ffb400;
    }

/* TAG */

.delivery-tag {
    background: #f3e8ff;
    color: #7c3aed;
    padding: 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.fast-delivery {
    background: #ffe7ff;
    color: #c026d3;
}

/* RESPONSIVE */

@media(max-width:1200px) {

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

@media(max-width:900px) {

    .product-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .product-section {
        padding: 40px 18px;
    }

    .product-grid {
        grid-template-columns: repeat (2,1fr);
    }

    .section-title h2 {
        font-size: 26px;
    }

    .section-title p {
        font-size: 18px;
    }

    .product-image {
        height: 145px;
    }

    .product-content {
        padding: 10px;
    }

    .product-title {
        font-size: 16px;
    }
}

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

body {
    font-family: 'Outfit',sans-serif;
    background: #fff;
}

/* SECTION */

.bakery-features {
    padding: 80px 20px;
}

/* TITLE */

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

    .section-title h2 {
        font-size: 56px;
        font-weight: 800;
        color: #22223b;
        margin-bottom: 15px;
        line-height: 1.1;
    }

    .section-title p {
        font-size: 16px;
        color: #8d8d99;
        max-width: 760px;
        margin: auto;
        line-height: 1.6;
    }

/* GRID */

.features-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 30px;
    align-items: start;
}

/* CARD */

.feature-card {
    text-align: center;
    transition: 0.35s ease;
}

    .feature-card:hover {
        transform: translateY(-6px);
    }

/* ICON BOX */

.icon-box {
    width: 180px;
    height: 180px;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

    /* SOFT BACKGROUND SHAPE */

    .icon-box::before {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        background: #f5efe6;
        border-radius: 40% 60% 60% 40%;
        z-index: 0;
    }

    .icon-box i {
        position: relative;
        z-index: 2;
        font-size: 62px;
        color: #6f9d58;
    }

/* TITLE */

.feature-card h3 {
    margin-top: 28px;
    font-size: 22px;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
}

/* DESCRIPTION */

.feature-card p {
    margin-top: 10px;
    font-size: 14px;
    color: #7f7f88;
    line-height: 1.6;
    padding: 0 10px;
}

/* RESPONSIVE */

@media(max-width:1200px) {

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

@media(max-width:768px) {

    .bakery-features {
        padding: 60px 18px;
        display: none;
    }

    .section-title {
        margin-bottom: 40px;
    }

        .section-title h2 {
            font-size: 36px;
        }

        .section-title p {
            font-size: 18px;
        }

    /* MOBILE SINGLE ROW */

    .features-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .icon-box {
        width: 150px;
        height: 150px;
    }

        .icon-box i {
            font-size: 52px;
        }

    .feature-card h3 {
        font-size: 24px;
    }

    .feature-card p {
        font-size: 16px;
    }
}

/* SECTION */
.testimonial-section {
    padding: 70px 20px;
    position: relative;
}

    /* BACKGROUND PATTERN */

    .testimonial-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
        background-size: 28px 28px;
        opacity: 0.5;
        z-index: 0;
    }

/* CONTAINER */

.testimonial-container {
    max-width: 1400px;
    margin: auto;
    position: relative;
    z-index: 2;
}

/* TITLE */

.section-title {
    text-align: center;
    margin-bottom: 70px;
}

    .section-title span {
        font-size: 16px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: #fa990c;
        font-weight: 700;
    }

    .section-title h2 {
        font-size: 30px;
        color: #1e1e2f;
        margin-top: 15px;
        line-height: 1.1;
    }

/* GRID */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}

/* CARD */

.testimonial-card {
    position: relative;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 34px;
    padding: 40px;
    overflow: hidden;
    transition: 0.4s ease;
    box-shadow: 0 15px 45px rgba(0,0,0,0.05);
}

    .testimonial-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 70px rgba(0,0,0,0.10);
    }

    /* GOLD CORNER */

    .testimonial-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 120px;
        background: linear-gradient( 135deg, rgba(176,138,87,0.18), transparent);
        border-radius: 0 34px 0 100%;
    }

/* QUOTE ICON */

.quote-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #fff7ec;
    color: #fa990c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 28px;
}

/* TEXT */

.testimonial-text {
    font-size: 19px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 35px;
}

/* USER */

.user-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.user-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #f2e4cf;
}

    .user-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* USER TEXT */

.user-details h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1f1f2f;
    margin-bottom: 6px;
}

.user-details p {
    font-size: 16px;
    color: #9a9aa5;
}

/* STARS */

.stars {
    margin-top: 18px;
    color: #f4b400;
    display: flex;
    gap: 4px;
    font-size: 16px;
}

/* RESPONSIVE */

@media(max-width:1100px) {

    .testimonial-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .testimonial-section {
        padding: 70px 18px;
    }

    .section-title {
        margin-bottom: 45px;
    }

        .section-title h2 {
            font-size: 42px;
        }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .testimonial-card {
        padding: 30px;
        border-radius: 28px;
    }

    .testimonial-text {
        font-size: 17px;
        line-height: 1.8;
    }

    .user-details h4 {
        font-size: 20px;
    }
}

/* SECTION */
.blog-section {
    padding: 60px 18px;
}

/* TITLE */

.section-heading {
    text-align: center;
    margin-bottom: 40px;
}

    .section-heading span {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #fa990c;
        margin-bottom: 12px;
    }

    .section-heading h2 {
        font-size: 26px;
        line-height: 1.2;
        font-weight: 800;
        color: #fa990c;
        margin-bottom: 14px;
    }

    .section-heading p {
        font-size: 16px;
        line-height: 1.7;
        color: #888896;
    }

/* BLOG GRID */

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* CARD */

.blog-card {
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid #ececec;
    transition: 0.35s ease;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

    .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    }

/* IMAGE */

.blog-image {
    position: relative;
    overflow: hidden;
    height: 240px;
}

    .blog-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.4s ease;
    }

.blog-card:hover img {
    transform: scale(1.05);
}

/* TAG */

.blog-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(255,255,255,0.95);
    padding: 9px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #222;
    letter-spacing: 1px;
}

/* CONTENT */

.blog-content {
    padding: 24px;
}

/* DATE */

.blog-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #9a9aa6;
    margin-bottom: 14px;
}

/* TITLE */

.blog-title {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 800;
    color: #fa990c;
    margin-bottom: 14px;
}

/* DESCRIPTION */

.blog-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #7d7d89;
    margin-bottom: 14px;
}

/* BUTTON */

.read-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fa990c;
    font-weight: 700;
    font-size: 15px;
    transition: 0.3s;
}

    .read-btn:hover {
        gap: 16px;
    }

/* VIEW ALL */

.view-all-wrap {
    text-align: center;
    margin-top: 45px;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;
    background: #fa990c;
    color: #fff;
    text-decoration: none;
    border-radius: 60px;
    font-size: 15px;
    font-weight: 700;
    transition: 0.3s;
}

    .view-all-btn:hover {
        background: #fa990c;
    }

/* DESKTOP */

@media(min-width:768px) {

    .blog-section {
        padding: 90px 40px;
    }

    .section-heading {
        margin-bottom: 60px;
    }

        .section-heading h2 {
            font-size: 30px;
        }

        .section-heading p {
            font-size: 16px;
            max-width: 760px;
            margin: auto;
        }

    .blog-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 30px;
    }

    .blog-image {
        height: 280px;
    }

    .blog-title {
        font-size: 16px;
    }
}



.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 18px 0;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

    .menu-link b {
        font-size: 30px;
        transition: 0.3s;
    }

/* ROTATE ICON */

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

/* DROPDOWN */

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 20px;
}

    .dropdown a {
        text-decoration: none;
        color: #6d6d6d;
        font-size: 18px;
        padding-top: 6px;
        transition: 0.3s;
    }

        .dropdown a:hover {
            color: #000;
            transform: translateX(5px);
        }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 70px 20px 25px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1400px;
    margin: auto;
}

/* TOP */

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* COLUMN */

.footer-column h3 {
    font-size: 18px;
    margin-bottom: 25px;
    font-weight: 700;
    color: #fff;
}

.footer-column ul {
    list-style: none;
}

    .footer-column ul li {
        margin-bottom: 6px;
    }

        .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: 0.3s;
            font-size: 14px;
        }

            .footer-column ul li a:hover {
                color: #fff;
                padding-left: 4px;
            }

/* LOGO */

.footer-logo {
    width: 150px;
    margin-bottom: 25px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 25px;
}

/* CONTACT */

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }

/* ADDRESS */

.footer-address {
    color: #bdbdbd;
    line-height: 1.9;
    font-size: 16px;
}

/* SOCIAL */

.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

    .social-icons a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: 0.3s;
        font-size: 14px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

/* MIDDLE */

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

/* BOTTOM */

.footer-bottom {
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 14px;
    }

/* MOBILE */

@media(max-width:992px) {

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {

    .main-footer {
        padding: 50px 18px 20px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-column h3 {
        margin-bottom: 18px;
    }

    .footer-middle {
        justify-content: flex-start;
        gap: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

.interlink-footer {
    background: #091426;
    padding: 20px 5%;
    position: relative;
}


.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 50px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}


    .footer-wrap.active {
        max-height: 3000px;
    }


.footer-column h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 30px;
    position: relative;
}




.footer-column ul {
    list-style: none;
}


.footer-column li {
    margin-bottom: 14px;
}


.footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 16px;
    transition: .3s;
}


    .footer-column a:hover {
        color: #fff;
        padding-left: 8px;
    }


.footer-btn-wrap {
    position: absolute;
    top: 20px;
    right: 5%;
    font-size: 12px;
}


    .footer-btn-wrap button {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 13px;
    }



@media(max-width:768px) {

    .footer-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
        /* partial content visible */

        max-height: 420px;
    }


    .footer-column h3 {
        font-size: 24px;
    }


    .footer-btn-wrap {
        display: block;
        text-align: center;
        margin-top: 35px;
    }
}




/* ===== From search-bar.html ===== */
/* ── RESET & BASE ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

/* ─────────────────────────────────────
   HEADER — exact project pattern
───────────────────────────────────── */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ─── SEARCH WRAP — original project style ─── */
.search-wrap {
    flex: 1;
    position: relative;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ═══════════════════════════════════════════════════════
   ★★★ SEARCH DROPDOWN — NEW CODE STARTS HERE ★★★
   All rules below marked [SEARCH-UI] are newly added
═══════════════════════════════════════════════════════ */

/* [SEARCH-UI] Overlay — dims the page when dropdown is open */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.32);
    z-index: 998;
    display: none;
    /* backdrop-filter gives the frosted glass look */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

    .search-overlay.show {
        display: block;
    }

/* [SEARCH-UI] Outer wrapper that holds the real <input>
   and the dropdown panel together */
.sk-search-outer {
    position: relative;
    width: 66%;
    /* Ensures the dropdown floats above the overlay */
    z-index: 999;
}

/* [SEARCH-UI] The input itself — fuller width + search icon button */
.sk-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #ebebeb;
    border-radius: 50px;
    overflow: hidden;
    transition: .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

    .sk-search-box.focused {
        border-color: #fa990c;
        box-shadow: 0 0 0 3px rgba(250,153,12,.12);
    }

    .sk-search-box input {
        flex: 1;
        padding: 10px 18px;
        border: none;
        outline: none;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        background: transparent;
        color: #111;
    }

        .sk-search-box input::placeholder {
            color: #bbb;
        }

    .sk-search-box .sk-clear-btn {
        /* [SEARCH-UI] × button appears when user types */
        display: none;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: #f5f5f5;
        color: #888;
        font-size: 13px;
        cursor: pointer;
        margin-right: 4px;
        transition: .2s;
        flex-shrink: 0;
    }

        .sk-search-box .sk-clear-btn:hover {
            background: #ffe4e4;
            color: #e02020;
        }

        .sk-search-box .sk-clear-btn.show {
            display: flex;
        }

.sk-search-btn {
    /* [SEARCH-UI] Orange search button on the right */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    background: #fa990c;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit',sans-serif;
    cursor: pointer;
    transition: .2s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .sk-search-btn:hover {
        background: #e8880a;
    }

    .sk-search-btn i {
        font-size: 13px;
    }

/* ─────────────────────────────────────
   [SEARCH-UI] DROPDOWN PANEL
───────────────────────────────────── */
.sk-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    box-shadow: 0 16px 48px rgba(0,0,0,.14);
    overflow: hidden;
    display: none;
    z-index: 1000;
    /* Entrance animation */
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .22s ease,opacity .22s ease;
}

    .sk-search-dropdown.show {
        display: block;
        transform: translateY(0);
        opacity: 1;
    }

/* [SEARCH-UI] Each labelled section inside the dropdown */
.sk-drop-section {
    padding: 18px 18px 10px;
}

    .sk-drop-section + .sk-drop-section {
        border-top: 1px solid #f5f5f5;
        padding-top: 14px;
    }

.sk-drop-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}

    .sk-drop-label i {
        font-size: 12px;
        color: #fa990c;
    }

    .sk-drop-label span.sk-see-all {
        margin-left: auto;
        font-size: 11px;
        font-weight: 700;
        color: #fa990c;
        text-transform: none;
        letter-spacing: 0;
        cursor: pointer;
        text-decoration: none;
    }

        .sk-drop-label span.sk-see-all:hover {
            text-decoration: underline;
        }

/* [SEARCH-UI] Trending tag pills — matches IGP screenshot style */
.sk-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
}

.sk-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    background: #f5f5f5;
    color: #333;
    border: 1.5px solid #eaeaea;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .18s;
    white-space: nowrap;
}

    .sk-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

    .sk-tag i {
        font-size: 11px;
        color: #fa990c;
    }

/* [SEARCH-UI] Auto-suggestion result rows */
.sk-suggest-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.sk-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 11px;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    color: inherit;
}

    .sk-suggest-item:hover {
        background: #f8f8f8;
    }

    .sk-suggest-item.active {
        background: #fff7ec;
    }

/* Left icon box */
.sk-si-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: .15s;
}

.sk-suggest-item:hover .sk-si-icon {
    background: #fff0db;
}

/* Text part */
.sk-si-text {
    flex: 1;
    min-width: 0;
}

.sk-si-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    /* [SEARCH-UI] Bold highlight on matched characters */
    .sk-si-name mark {
        background: transparent;
        color: #fa990c;
        font-weight: 800;
        padding: 0;
    }

.sk-si-meta {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sk-si-meta span {
        display: flex;
        align-items: center;
        gap: 3px;
    }

/* Right arrow */
.sk-si-arrow {
    font-size: 11px;
    color: #ccc;
    flex-shrink: 0;
    transition: .2s;
}

.sk-suggest-item:hover .sk-si-arrow {
    color: #fa990c;
    transform: translateX(3px);
}

/* [SEARCH-UI] Category quick-jump row */
.sk-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 4px;
}

.sk-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: #fff;
    border: 1.5px solid #eaeaea;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: .18s;
    text-decoration: none;
}

    .sk-cat-chip:hover {
        border-color: #fa990c;
        color: #fa990c;
        background: #fff7ec;
    }

/* [SEARCH-UI] Recent searches row */
.sk-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    cursor: pointer;
    transition: .15s;
}

    .sk-recent-item:hover {
        background: #f8f8f8;
    }

.sk-recent-icon {
    font-size: 13px;
    color: #ccc;
    flex-shrink: 0;
}

.sk-recent-text {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    flex: 1;
}

.sk-recent-del {
    font-size: 12px;
    color: #ddd;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 6px;
    transition: .15s;
    border: none;
    background: none;
}

    .sk-recent-del:hover {
        color: #e02020;
        background: #fff5f5;
    }

/* [SEARCH-UI] No-results state */
.sk-no-results {
    text-align: center;
    padding: 24px 16px 20px;
}

    .sk-no-results .sk-nr-emoji {
        font-size: 36px;
        display: block;
        margin-bottom: 10px;
    }

    .sk-no-results p {
        font-size: 13px;
        color: #888;
        line-height: 1.7;
    }

    .sk-no-results strong {
        color: #111;
    }

/* [SEARCH-UI] Footer inside dropdown — quick links */
.sk-drop-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    gap: 10px;
    flex-wrap: wrap;
}

    .sk-drop-footer a {
        font-size: 12px;
        font-weight: 700;
        color: #888;
        text-decoration: none;
        transition: .15s;
    }

        .sk-drop-footer a:hover {
            color: #fa990c;
        }

        .sk-drop-footer a i {
            margin-right: 4px;
        }

/* ═══════════════════════════════════════════════════════
   ★★★ SEARCH DROPDOWN — NEW CODE ENDS HERE ★★★
═══════════════════════════════════════════════════════ */

/* ── PAGE DEMO CONTENT (not new — just to show the page has a body) ── */
.page-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    text-align: center;
}

.demo-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

    .demo-title em {
        color: #fa990c;
        font-style: normal;
    }

.demo-sub {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
}

/* ── FOOTER ── */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }
    /* [SEARCH-UI] On mobile, search wrap becomes full-width row */
    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }
    /* [SEARCH-UI] Mobile: outer wrapper also full-width */
    .sk-search-outer {
        width: 100% !important;
    }

    .sk-search-dropdown {
        left: 0;
        right: 0;
        border-radius: 14px;
    }

    .sk-search-btn span {
        display: none;
    }
    /* hide "Search" text on mobile, keep icon */
    .sk-search-btn {
        padding: 10px 14px;
    }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }
}



/* ===== From checkout__1_ (2).html ===== */
/* ─────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f4f6;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

/* ─────────────────────────────────────────────────
   HEADER
───────────────────────────────────────────────── */
header {
    padding: 6px 14px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo img {
    height: 44px;
    display: block;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 68%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #e8e8e8;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: 0.2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: 0.2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #d10000;
        color: #fff;
        font-size: 10px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 24px;
        height: 2.5px;
        background: #111;
        border-radius: 4px;
        display: block;
        transition: 0.3s;
    }

/* SIDE MENU */
.side-menu {
    position: fixed;
    top: 0;
    right: -380px;
    width: 320px;
    height: 100%;
    background: #fff;
    padding: 20px 16px;
    box-shadow: -10px 0 40px rgba(0,0,0,.12);
    transition: .4s cubic-bezier(0.4,0,0.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.close-btn {
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
    color: #555;
}

    .close-btn:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f0f0f0;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #222;
    padding: 14px 0;
}

    .menu-link b {
        font-size: 22px;
        transition: 0.3s;
        line-height: 1;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 14px;
        padding: 8px 12px;
        display: block;
        transition: 0.2s;
        border-radius: 8px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 16px;
        }

/* CATEGORIES BAR */
.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-top: 1px solid #f0e8d8;
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
    overflow: hidden;
}

.cat-item {
    padding: 8px 6px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 22px;
    cursor: pointer;
    transition: 0.2s;
}

    .cat-item p {
        margin-top: 4px;
        font-size: 11px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

/* BREADCRUMB */
.breadcrumb-bar {
    background: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #888;
}

    .breadcrumb-bar a {
        color: #888;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* SECURE BAR */
.secure-bar {
    background: #111;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.sb-itm {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
}

    .sb-itm i {
        color: #fa990c;
        font-size: 12px;
    }

/* ─────────────────────────────────────────────────
   CHECKOUT LAYOUT
───────────────────────────────────────────────── */
.checkout-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 20px 100px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

/* ─────────────────────────────────────────────────
   SECTION CARDS
───────────────────────────────────────────────── */
.sc {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    padding: 20px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

    .sc:last-child {
        margin-bottom: 0;
    }

.sc-t {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sc-t i {
        color: #fa990c;
        font-size: 14px;
    }

.sn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────
   SAVED ADDRESSES SECTION
───────────────────────────────────────────────── */
.addr-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.addr-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    cursor: pointer;
    transition: 0.22s;
    background: #fff;
    position: relative;
}

    .addr-card:hover {
        border-color: #fa990c;
        background: #fffdf9;
    }

    .addr-card.selected {
        border-color: #fa990c;
        background: #fff9f0;
    }

    .addr-card.default-addr {
        border-color: #18a34a;
        background: #f0fff4;
    }

/* Custom radio dot */
.addr-radio-wrap {
    padding-top: 2px;
    flex-shrink: 0;
}

.addr-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
}

.addr-card.selected .addr-radio, .addr-card.default-addr .addr-radio {
    border-color: #fa990c;
}

.addr-radio-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fa990c;
    transform: scale(0);
    transition: 0.2s;
}

.addr-card.selected .addr-radio-dot, .addr-card.default-addr .addr-radio-dot {
    transform: scale(1);
}

.addr-info {
    flex: 1;
    min-width: 0;
}

.addr-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.addr-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.addr-type-chip {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.chip-home {
    background: #e8f4ff;
    color: #1d6fa0;
}

.chip-work {
    background: #f0e8ff;
    color: #7c3aed;
}

.chip-other {
    background: #f5f5f5;
    color: #666;
}

.default-chip {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    display: flex;
    align-items: center;
    gap: 4px;
}

.addr-phone {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.addr-text {
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}

.addr-pin-row {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.addr-del-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.del-free {
    background: #ecfff0;
    color: #18a34a;
}

.del-paid {
    background: #fff7ec;
    color: #fa990c;
}

.del-exp {
    background: #ffe4e4;
    color: #d10000;
}

/* Address action buttons */
.addr-actions {
    display: flex;
    /*flex-direction: column;*/
    gap: 6px;
    flex-shrink: 0;
    margin-left: 4px;
}

.addr-act-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border: 1.5px solid #e8e8e8;
    background: #fafafa;
    cursor: pointer;
    transition: 0.2s;
}

    .addr-act-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
        background: #fff7ec;
    }

    .addr-act-btn.del-btn:hover {
        border-color: #ff4d4d;
        color: #ff4d4d;
        background: #fff5f5;
    }

/* Default checkbox row inside address card */
.addr-default-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
}

    .addr-default-row label {
        font-size: 12px;
        font-weight: 600;
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .addr-default-row input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: #fa990c;
        cursor: pointer;
    }

/* ADD NEW ADDRESS button */
.add-addr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1.5px dashed #e3e6eb;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fa990c;
    cursor: pointer;
    transition: 0.2s;
    background: transparent;
    width: 100%;
    font-family: 'Outfit',sans-serif;
}

    .add-addr-btn:hover {
        border-color: #fa990c;
        background: #fff7ec;
    }

/* ── View More Addresses ── */
.addr-extra {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

    .addr-extra.open {
        display: flex;
    }

.addr-viewmore-btn {
    width: 100%;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
    margin-bottom: 10px;
}

    .addr-viewmore-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
        background: #fffdf9;
    }

    .addr-viewmore-btn .vm-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: transform .3s;
    }

    .addr-viewmore-btn.is-open .vm-icon {
        transform: rotate(180deg);
    }

    .addr-viewmore-btn .vm-badge {
        margin-left: 4px;
        background: #f0f0f0;
        color: #888;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
    }

    .addr-viewmore-btn.is-open .vm-badge {
        display: none;
    }

/* NEW ADDRESS FORM (collapsible) */
.new-addr-form {
    display: none;
    margin-top: 14px;
    padding: 16px;
    background: #fafafa;
    border-radius: 14px;
    border: 1.5px solid #e3e6eb;
}

    .new-addr-form.open {
        display: block;
    }

/* EDIT ADDRESS MODAL */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

    .modal-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

.modal-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(30px) scale(0.96);
    transition: 0.35s;
}

.modal-overlay.open .modal-box {
    transform: translateY(0) scale(1);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-radius: 20px 20px 0 0;
}

    .modal-head h3 {
        font-size: 16px;
        font-weight: 800;
        color: #111;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .modal-head h3 i {
            color: #fa990c;
        }

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
}

    .modal-close:hover {
        background: #fff5f5;
        border-color: #ff4d4d;
        color: #ff4d4d;
    }

.modal-body {
    padding: 20px;
}

.modal-foot {
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 10px;
}

.modal-save {
    flex: 1;
    padding: 13px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.2s;
}

    .modal-save:hover {
        background: #fa990c;
    }

.modal-cancel {
    flex: 1;
    padding: 13px;
    background: #fff;
    color: #111;
    border: 1.5px solid #e3e6eb;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.2s;
}

    .modal-cancel:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* ─────────────────────────────────────────────────
   FORM ELEMENTS
───────────────────────────────────────────────── */
.fg {
    position: relative;
}

.gr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

    .gr.g1 {
        grid-template-columns: 1fr;
    }

.fg.full {
    grid-column: 1/-1;
}

.fg label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

    .fg label .req {
        color: #fa990c;
        margin-left: 2px;
    }

.fi {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e3e6eb;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: 0.2s;
    background: #fafafa;
    color: #111;
}

    .fi:focus {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,0.08);
    }

    .fi.err {
        border-color: #ff4d4d;
        background: #fff5f5;
    }

    .fi.ok {
        border-color: #18a34a;
        background: #f0fff4;
    }

    .fi::placeholder {
        color: #c5c5c5;
    }

select.fi {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
    appearance: none;
}

.fh {
    font-size: 11px;
    margin-top: 3px;
    min-height: 14px;
}

    .fh.e {
        color: #ff4d4d;
    }

    .fh.s {
        color: #18a34a;
    }

.ph-row {
    display: flex;
}

.ph-pre {
    padding: 11px 10px;
    border: 1.5px solid #e3e6eb;
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: #f0f0f0;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.ph-row .fi {
    border-radius: 0 10px 10px 0;
}

.pin-row {
    display: flex;
    gap: 7px;
}

    .pin-row .fi {
        flex: 1;
    }

.det-btn {
    padding: 0 12px;
    border: 1.5px solid #e3e6eb;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

    .det-btn:hover {
        background: #fff7ec;
        border-color: #fa990c;
    }

.pin-res {
    display: none;
    margin-top: 5px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    align-items: center;
    gap: 5px;
}

    .pin-res.ok {
        display: flex;
        background: #ecfff0;
        color: #18a34a;
        border: 1px solid #b8f0cc;
    }

    .pin-res.slow {
        display: flex;
        background: #fff7ec;
        color: #fa990c;
        border: 1px solid #fde4b2;
    }

    .pin-res.err {
        display: flex;
        background: #fff5f5;
        color: #ff4d4d;
        border: 1px solid #ffc0c0;
    }

/* SAME ADDRESS TOGGLE */
.same-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f0fff4;
    border: 1.5px solid #b8f0cc;
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: 0.2s;
}

    .same-bar:hover {
        background: #e2ffe9;
    }

    .same-bar input {
        width: 16px;
        height: 16px;
        accent-color: #18a34a;
        cursor: pointer;
        flex-shrink: 0;
    }

    .same-bar span {
        font-size: 13px;
        font-weight: 600;
        color: #18a34a;
    }

/* ─────────────────────────────────────────────────
   DELIVERY SLOTS
───────────────────────────────────────────────── */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

.slot-c {
    border: 1.5px solid #e3e6eb;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: 0.22s;
}

    .slot-c:hover {
        border-color: #fa990c;
        background: #fffdf9;
    }

    .slot-c.sel {
        border-color: #fa990c;
        background: #fff7ec;
    }

    .slot-c input {
        display: none;
    }

.s-time {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.s-hrs {
    font-size: 10px;
    color: #888;
    margin-bottom: 5px;
}

.s-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}

.s-free {
    background: #ecfff0;
    color: #18a34a;
}

.s-paid {
    background: #fff7ec;
    color: #fa990c;
}

.s-exp {
    background: #ffe4e4;
    color: #d10000;
}

/* ─────────────────────────────────────────────────
   PAYMENT OPTIONS
───────────────────────────────────────────────── */
.pay-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pay-opt {
    border: 1.5px solid #e3e6eb;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.2s;
    cursor: pointer;
}

    .pay-opt:hover {
        border-color: #fa990c;
    }

    .pay-opt.sel {
        border-color: #fa990c;
        background: #fffdf9;
    }

.pay-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
}

.p-radio {
    width: 16px;
    height: 16px;
    accent-color: #fa990c;
    cursor: pointer;
    flex-shrink: 0;
}

.p-ico {
    width: 36px;
    height: 28px;
    border: 1px solid #eee;
    border-radius: 7px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.p-lbl {
    flex: 1;
}

    .p-lbl strong {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: #111;
    }

    .p-lbl span {
        font-size: 11px;
        color: #888;
    }

.p-tag {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.pay-body {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid #f5f5f5;
}

    .pay-body.open {
        display: block;
    }

.upi-row {
    display: flex;
    gap: 7px;
    margin-top: 12px;
}

    .upi-row .fi {
        flex: 1;
    }

.v-btn {
    padding: 0 13px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.2s;
    white-space: nowrap;
}

    .v-btn:hover {
        background: #fa990c;
    }

.card-form {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-logos {
    display: flex;
    gap: 5px;
    margin-bottom: 2px;
}

.cl {
    padding: 2px 7px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
    color: #555;
}

.card-row {
    display: flex;
    gap: 10px;
}

    .card-row .fg {
        flex: 1;
    }

.wallet-opts {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.wo {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 1.5px solid #e3e6eb;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: 0.2s;
}

    .wo:hover {
        border-color: #fa990c;
    }

    .wo input {
        accent-color: #fa990c;
        width: 14px;
        height: 14px;
    }

.cod-note {
    margin-top: 12px;
    background: #fff7ec;
    border-radius: 9px;
    padding: 11px 13px;
    font-size: 12px;
    color: #7a4f00;
    display: flex;
    gap: 7px;
    align-items: flex-start;
    border: 1px solid #fde4b2;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────
   TERMS & PLACE ORDER
───────────────────────────────────────────────── */
.t-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    background: #fafafa;
    border-radius: 10px;
    border: 1.5px solid #e3e6eb;
    cursor: pointer;
    transition: 0.2s;
    margin-bottom: 10px;
}

    .t-row:hover {
        border-color: #fa990c;
    }

    .t-row input {
        width: 15px;
        height: 15px;
        accent-color: #fa990c;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .t-row span {
        font-size: 12px;
        color: #555;
        line-height: 1.6;
    }

        .t-row span a {
            color: #fa990c;
            text-decoration: none;
            font-weight: 700;
        }

            .t-row span a:hover {
                text-decoration: underline;
            }

.place-btn {
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
}

    .place-btn:hover:not(:disabled) {
        background: #fa990c;
    }

    .place-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .place-btn.loading {
        background: #fa990c;
        pointer-events: none;
    }

/* ─────────────────────────────────────────────────
   ORDER SUMMARY (right col)
───────────────────────────────────────────────── */
.smry {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    padding: 18px;
    position: sticky;
    top: 76px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.sm-t {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sm-t i {
        color: #fa990c;
    }

.sm-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f5f5f5;
}

.sm-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sm-img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
    position: relative;
}

    .sm-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sm-qty {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-info {
    flex: 1;
}

.sm-name {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 2px;
}

.sm-meta {
    font-size: 11px;
    color: #888;
}

.sm-price {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    flex-shrink: 0;
}

.sm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #f8f8f8;
}

    .sm-row:last-of-type {
        border-bottom: none;
    }

    .sm-row span:last-child {
        font-weight: 700;
        color: #111;
    }

    .sm-row.grn span:last-child {
        color: #18a34a;
    }

.sm-strike {
    text-decoration: line-through;
    color: #bbb;
    font-weight: 400 !important;
}

.sm-coupon {
    display: none;
    background: #fff7ec;
    border: 1px solid #fde4b2;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fa990c;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

    .sm-coupon.show {
        display: flex;
    }

.rm-c {
    margin-left: auto;
    font-size: 11px;
    color: #ff4d4d;
    cursor: pointer;
    font-weight: 700;
    background: none;
    border: none;
    font-family: 'Outfit',sans-serif;
}

.sm-saving {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}

.sm-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0;
    margin-top: 6px;
    border-top: 2px solid #f0f0f0;
}

    .sm-total span:first-child {
        font-size: 14px;
        font-weight: 800;
        color: #111;
    }

    .sm-total span:last-child {
        font-size: 20px;
        font-weight: 800;
        color: #111;
    }

.sm-secs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.sm-sec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #888;
    font-weight: 600;
}

    .sm-sec i {
        color: #18a34a;
    }

/* ─────────────────────────────────────────────────
   MOBILE STICKY BAR
───────────────────────────────────────────────── */
.mob-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e3e6eb;
    padding: 10px 14px;
    z-index: 800;
    gap: 10px;
    align-items: center;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

.mob-amt {
    flex: 1;
}

    .mob-amt em {
        font-size: 10px;
        color: #888;
        font-style: normal;
        display: block;
    }

    .mob-amt strong {
        font-size: 18px;
        font-weight: 800;
        color: #111;
    }

.mob-place {
    flex: 1;
    padding: 12px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .mob-place:hover {
        background: #fa990c;
    }

/* ─────────────────────────────────────────────────
   TOAST
───────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 80px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: 0.35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 24px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 12px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 14px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 6px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 50px 20px 20px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1280px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.main-footer .footer-column h3 {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 6px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: 0.3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 130px;
    margin-bottom: 20px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 14px;
    margin-bottom: 20px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 14px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 14px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

    .social-icons a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: 0.3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 13px;
        transition: 0.3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 13px;
    }

/* ─────────────────────────────────────────────────
   RESPONSIVE — Tablet
───────────────────────────────────────────────── */
@media(max-width:1100px) {
    .checkout-page {
        grid-template-columns: 1fr;
    }

    .smry {
        position: static;
    }
    /* Summary moves to top on tablet/mobile */
    .checkout-right {
        order: -1;
    }
}

/* ─────────────────────────────────────────────────
   RESPONSIVE — Mobile
───────────────────────────────────────────────── */
@media(max-width:768px) {
    /* HEADER mobile */
    .search-wrap {
        display: none;
        width: 100%;
    }

        .search-wrap.active {
            display: block;
            order: 3;
            flex-basis: 100%;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .top-header {
        flex-wrap: wrap;
    }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    /* Categories */
    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 4px;
        font-size: 18px;
    }

        .cat-item p {
            font-size: 10px;
        }
    /* Breadcrumb & secure */
    .breadcrumb-bar {
        padding: 8px 14px;
        font-size: 11px;
    }

    .secure-bar {
        display: none;
    }
    /* hide on mobile — space-saving */
    /* Checkout page */
    .checkout-page {
        padding: 12px 12px 90px;
        gap: 12px;
    }

    .sc {
        padding: 16px 14px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .sc-t {
        font-size: 13px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }
    /* Address cards compact on mobile */
    .addr-card {
        padding: 12px;
    }

    .addr-text {
        font-size: 12px;
    }

    .addr-actions {
        flex-direction: row;
    }

    .addr-act-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    /* Forms */
    .gr {
        grid-template-columns: 1fr;
    }

    .slot-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Order summary on mobile */
    .smry {
        padding: 14px;
    }

    .checkout-right {
        order: -1;
    }
    /* summary first on mobile */
    .sm-t {
        font-size: 13px;
    }

    .sm-img {
        width: 44px;
        height: 44px;
    }
    /* Mobile bar shown */
    .mob-bar {
        display: flex;
    }
    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
        max-height: 380px;
    }
    /* Toast */
    .toast {
        bottom: 80px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
    /* Modal full-width on mobile */
    .modal-box {
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
    }

    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .card-row {
        flex-direction: column;
    }
}

@media(max-width:480px) {
    .slot-grid {
        grid-template-columns: 1fr 1fr;
    }

    .addr-name-row {
        gap: 5px;
    }
}



/* ===== From dashboard__4_.html ===== */
/* ════════════════════════════════════════
   RESET + BASE
════════════════════════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }
/* Customer name chip instead of login icon */
.customer-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff7ec;
    border: 1.5px solid #fde4b2;
    border-radius: 50px;
    padding: 5px 13px 5px 5px;
    cursor: pointer;
    transition: .2s;
    position: relative;
    text-decoration: none;
}

    .customer-chip:hover {
        background: #fff0d0;
        border-color: #fa990c;
    }

.customer-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.customer-chip-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}

.customer-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    min-width: 190px;
    overflow: hidden;
    display: none;
    z-index: 999;
}

.customer-chip:hover .customer-dropdown,
.customer-chip.open .customer-dropdown {
    display: block;
}

.cd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: .2s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    font-family: 'Outfit',sans-serif;
}

    .cd-item:hover {
        background: #fff7ec;
        color: #fa990c;
    }

    .cd-item i {
        font-size: 13px;
        color: #fa990c;
        width: 16px;
    }

.cd-sep {
    height: 1px;
    background: #f5f5f5;
    margin: 3px 0;
}

.cd-item.logout {
    color: #e02020;
}

    .cd-item.logout i {
        color: #e02020;
    }

    .cd-item.logout:hover {
        background: #fff5f5;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ════════════════════════════════════════
   DASHBOARD LAYOUT
════════════════════════════════════════ */
.dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* ════════════════════════════════════════
   SIDEBAR NAV
════════════════════════════════════════ */
.dash-sidebar {
    position: sticky;
    top: 84px;
}
/* Profile mini card */
.profile-mini {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 22px;
    text-align: center;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.pm-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
}

.pm-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg,#fa990c,#e8880a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(250,153,12,.3);
    font-family: 'Outfit',sans-serif;
}

.pm-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    color: #fff;
}

.pm-name {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
}

.pm-mobile {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

.pm-loyalty {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff7ec;
    border: 1px solid #fde4b2;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
}

    .pm-loyalty i {
        font-size: 11px;
    }

/* Nav list */
.dash-nav {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    transition: .2s;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #f5f5f5;
    border-left: 3px solid transparent;
}

    .dash-nav-item:last-child {
        border-bottom: none;
    }

    .dash-nav-item:hover {
        background: #fff7ec;
        color: #fa990c;
        border-left-color: #fa990c;
    }

    .dash-nav-item.active {
        background: #fff7ec;
        color: #fa990c;
        border-left-color: #fa990c;
        font-weight: 700;
    }

    .dash-nav-item i {
        font-size: 16px;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
    }

    .dash-nav-item.active i {
        color: #fa990c;
    }

.nav-badge {
    margin-left: auto;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}

/* ════════════════════════════════════════
   MAIN CONTENT PANEL — show/hide sections
════════════════════════════════════════ */
.dash-main {
}

.dash-section {
    display: none;
}

    .dash-section.active {
        display: block;
    }

/* Section header */
.sec-header {
    margin-bottom: 22px;
}

.sec-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 28px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: 4px;
}

    .sec-title em {
        color: #fa990c;
        font-style: normal;
    }

.sec-subtitle {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
}

/* ════════════════════════════════════════
   SUMMARY CARDS (Dashboard overview)
════════════════════════════════════════ */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.sum-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 18px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

    .sum-card:hover {
        border-color: #fa990c;
        transform: translateY(-3px);
        box-shadow: 0 8px 22px rgba(250,153,12,.1);
    }

.sum-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 10px;
}

.si-orange {
    background: #fff7ec;
    color: #fa990c;
}

.si-green {
    background: #ecfff0;
    color: #18a34a;
}

.si-blue {
    background: #eff6ff;
    color: #2563eb;
}

.si-purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.sum-num {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.sum-lbl {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-top: 4px;
}

/* Recent activity strip on dashboard */
.activity-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .activity-title i {
        color: #fa990c;
    }

/* ════════════════════════════════════════
   ORDER LIST
════════════════════════════════════════ */
/* Filter pills */
.order-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ofilter {
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
}

    .ofilter:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .ofilter.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

.order-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    margin-bottom: 14px;
    overflow: hidden;
    transition: .3s;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

    .order-card:hover {
        border-color: #e8d5b5;
        box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }

/* Order header */
.order-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #f5f5f5;
    flex-wrap: wrap;
}

.order-id {
    font-size: 14px;
    font-weight: 800;
    color: #111;
}

.order-date {
    font-size: 12px;
    color: #888;
}

.order-status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    margin-left: auto;
    flex-shrink: 0;
}

.os-delivered {
    background: #ecfff0;
    color: #18a34a;
}

.os-processing {
    background: #eff6ff;
    color: #2563eb;
}

.os-cancelled {
    background: #fff5f5;
    color: #e02020;
}

.os-pending {
    background: #fff7ec;
    color: #fa990c;
}

/* Order body */
.order-body {
    padding: 14px 18px;
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oi-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}

    .oi-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.oi-info {
    flex: 1;
}

.oi-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.oi-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.oi-price {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    flex-shrink: 0;
}

/* Order footer */
.order-footer {
    padding: 12px 18px;
    background: #fafafa;
    border-top: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.order-total {
    font-size: 14px;
    font-weight: 800;
    color: #111;
}

    .order-total span {
        color: #888;
        font-weight: 600;
    }

.order-footer-btns {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.obtn {
    padding: 7px 15px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .obtn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .obtn.primary {
        background: #111;
        color: #fff;
        border-color: #111;
    }

        .obtn.primary:hover {
            background: #fa990c;
            border-color: #fa990c;
        }

    .obtn.green {
        background: #ecfff0;
        color: #18a34a;
        border-color: #b8f0cc;
    }

/* ── ORDER TRACKING TIMELINE ── */
.order-tracking {
    margin: 16px 0 4px;
    padding: 18px 16px 16px;
    background: #fafafa;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
}

/* ── MAIN STEP ROW (horizontal dots + connector) ── */
.ot-main-row {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 10px;
}

    /* Connector line runs through the dot centers */
    .ot-main-row::before {
        content: '';
        position: absolute;
        top: 14px;
        left: 14px;
        right: 14px;
        height: 2px;
        background: #e8e8e8;
        z-index: 0;
    }

    /* Filled portion of connector (done steps) */
    .ot-main-row::after {
        content: '';
        position: absolute;
        top: 14px;
        left: 14px;
        height: 2px;
        background: linear-gradient(90deg,#18a34a,#18a34a);
        z-index: 0;
        transition: width .5s ease;
    }
    /* Width set via data attribute — JS reads step index */  
    .ot-main-row[data-done="1"]::after {
        width: 0%;
    }

    .ot-main-row[data-done="2"]::after {
        width: 25%;
    }

    .ot-main-row[data-done="3"]::after {
        width: 50%;
    }

    .ot-main-row[data-done="4"]::after {
        width: 75%;
    }

    .ot-main-row[data-done="5"]::after {
        width: calc(100% - 28px);
    }

.cancel-main-row[data-done="0"]::after {
    width: 0px !important;
}

.cancel-main-row[data-done="1"]::after {
    width: calc(2/4 * (100% - 56px)) !important;
}


.cancel-main-row[data-done="2"]::after {
    width: calc(4/4 * (100%)) !important;
}

.ot-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.ot-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid #e8e8e8;
    background: #fff;
    transition: .3s;
    margin-bottom: 5px;
}

    .ot-dot.done {
        background: #18a34a;
        border-color: #18a34a;
        color: #fff;
    }

    .ot-dot.active {
        background: #fa990c;
        border-color: #fa990c;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(250,153,12,.15);
    }

    .ot-dot.pending {
        background: #fff;
        border-color: #e8e8e8;
        color: #ccc;
    }

.ot-label {
    font-size: 9px;
    font-weight: 700;
    color: #aaa;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

.ot-step .ot-label.done {
    color: #18a34a;
}

.ot-step .ot-label.active {
    color: #fa990c;
}

/* ── SUB-STATUS ROW (below main steps) ── */
.ot-sub-row {
    display: flex;
    align-items: flex-start;
    margin-top: 4px;
}

.ot-sub-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 2px;
}

.ot-sub-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border-radius: 7px;
    border: 1px solid #eee;
    padding: 4px 7px;
    min-height: 24px;
}

    .ot-sub-item.sub-done {
        border-color: #d1fae5;
        background: #f0fff8;
    }

    .ot-sub-item.sub-active {
        border-color: #fde4b2;
        background: #fff7ec;
    }

    .ot-sub-item.sub-pending {
        opacity: .45;
    }

.ot-sub-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sub-done .ot-sub-dot {
    background: #18a34a;
}

.sub-active .ot-sub-dot {
    background: #fa990c;
}

.sub-pending .ot-sub-dot {
    background: #d1d5db;
}

.ot-sub-text {
    font-size: 9px;
    font-weight: 600;
    color: #555;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sub-done .ot-sub-text {
    color: #18a34a;
}

.sub-active .ot-sub-text {
    color: #fa990c;
}

.sub-pending .ot-sub-text {
    color: #9ca3af;
}

.ot-sub-time {
    font-size: 8px;
    color: #bbb;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

.sub-done .ot-sub-time {
    color: #86efac;
}

.sub-active .ot-sub-time {
    color: #fcd34d;
}

/* ── MOBILE: stack vertically below 600px ── */
@media(max-width:600px) {
    .order-tracking {
        padding: 14px 12px 12px;
    }

    /* Hide horizontal row entirely */
    .ot-main-row {
        display: none;
    }

    /* Vertical timeline for mobile */
    .ot-sub-row {
        flex-direction: column;
        gap: 0;
    }

    .ot-sub-col {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    /* Left gutter: dot + vertical line */
    .ot-mobile-gutter {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 28px;
        flex-shrink: 0;
    }

    .ot-mobile-main-dot {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border: 2px solid #e8e8e8;
        background: #fff;
        flex-shrink: 0;
    }

        .ot-mobile-main-dot.done {
            background: #18a34a;
            border-color: #18a34a;
            color: #fff;
        }

        .ot-mobile-main-dot.active {
            background: #fa990c;
            border-color: #fa990c;
            color: #fff;
            box-shadow: 0 0 0 4px rgba(250,153,12,.15);
        }

        .ot-mobile-main-dot.pending {
            background: #fff;
            border-color: #e8e8e8;
            color: #ccc;
        }

    .ot-mobile-line {
        width: 2px;
        flex: 1;
        min-height: 8px;
        background: #e8e8e8;
        margin: 0 auto;
    }

        .ot-mobile-line.done-line {
            background: #18a34a;
        }

    /* Right content: step title + sub-items */
    .ot-mobile-content {
        flex: 1;
        padding: 0 0 12px 10px;
    }

    .ot-mobile-title {
        font-size: 11px;
        font-weight: 700;
        line-height: 28px; /* vertically align with gutter dot */
        margin-bottom: 4px;
    }

        .ot-mobile-title.done {
            color: #18a34a;
        }

        .ot-mobile-title.active {
            color: #fa990c;
        }

        .ot-mobile-title.pending {
            color: #aaa;
        }

    /* Sub-items on mobile become a stacked list */
    .ot-sub-col .ot-sub-item {
        margin-bottom: 3px;
    }

    /* Hide desktop-only elements on mobile */
    .ot-desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .ot-mobile-only {
        display: flex !important;
    }
}

/* On desktop hide mobile-only */
.ot-mobile-only {
    display: none;
}

/* ════════════════════════════════════════
   PROFILE UPDATE
════════════════════════════════════════ */
.profile-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin-bottom: 18px;
}
/* Avatar upload */
.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f5f5f5;
}

.avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg,#fa990c,#e8880a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 16px rgba(250,153,12,.25);
    cursor: pointer;
    transition: .3s;
}
    /* Uploaded photo fills the circle */
    .avatar-large img.dp-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        z-index: 1;
    }
    /* Hide initials text once photo is loaded */
    .avatar-large.has-photo {
        font-size: 0;
        background: transparent;
    }
    /* Camera hover overlay */
    .avatar-large .av-hover {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(0,0,0,0);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        transition: .25s;
        z-index: 2;
        color: transparent;
        font-size: 0;
        font-weight: 700;
    }

    .avatar-large:hover .av-hover {
        background: rgba(0,0,0,.45);
        color: #fff;
        font-size: 10px;
    }

    .avatar-large .av-hover i {
        font-size: 17px;
        transition: .25s;
    }
/* Spinner ring while FileReader is processing */
.avatar-progress-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #fa990c;
    border-right-color: #fa990c;
    animation: dpSpin .8s linear infinite;
    display: none;
    z-index: 3;
}

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

.avatar-large.uploading .avatar-progress-ring {
    display: block;
}
/* Button row */
.avatar-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.avatar-upload-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    background: #f5f5f5;
    color: #333;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid #e8e8e8;
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .avatar-upload-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
        background: #fff9f0;
    }
/* Remove button — hidden until photo set */
.avatar-remove-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #fff5f5;
    color: #e02020;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid #fecaca;
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .avatar-remove-btn:hover {
        background: #fee2e2;
        border-color: #e02020;
    }

    .avatar-remove-btn.visible {
        display: flex;
    }

.avatar-info {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
    line-height: 1.55;
}
/* "Saved" confirmation badge */
.dp-saved-badge {
    display: none;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #18a34a;
    background: #ecfff0;
    border: 1px solid #b8f0cc;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 6px;
}

    .dp-saved-badge.show {
        display: inline-flex;
    }
/* Sidebar pm-avatar — support photo */
.pm-avatar {
    overflow: hidden;
    position: relative;
}

    .pm-avatar img.dp-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }

    .pm-avatar.has-photo {
        font-size: 0;
        background: transparent;
    }
/* Header chip avatar — support photo */
.customer-chip-avatar {
    overflow: hidden;
    position: relative;
}

    .customer-chip-avatar img.dp-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
    }

    .customer-chip-avatar.has-photo {
        font-size: 0;
    }

/* Form fields */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

    .form-grid.full {
        grid-template-columns: 1fr;
    }

.f-group {
    display: flex;
    flex-direction: column;
}

.f-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .f-label .req {
        color: #fa990c;
    }

.f-input {
    padding: 12px 14px;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    color: #111;
}

    .f-input:focus {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .f-input::placeholder {
        color: #c0c0c0;
    }

    .f-input:disabled {
        background: #f5f5f5;
        color: #999;
        cursor: not-allowed;
    }

select.f-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    padding-right: 30px;
}

/* Mobile field with prefix */
.mobile-field {
    display: flex;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    overflow: hidden;
    background: #fafafa;
    transition: .2s;
}

    .mobile-field:focus-within {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

.mob-prefix {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    font-size: 14px;
    font-weight: 700;
    color: #444;
    border-right: 1.5px solid #e3e3e3;
    flex-shrink: 0;
    background: #f5f5f5;
}

.mob-inp {
    flex: 1;
    padding: 12px 14px;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    background: transparent;
    color: #111;
}

    .mob-inp::placeholder {
        color: #c0c0c0;
    }

/* Verified badge inline */
.verified-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #18a34a;
    margin-top: 5px;
}

    .verified-inline i {
        font-size: 10px;
    }

/* Save button */
.save-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
}

    .save-btn:hover {
        background: #fa990c;
    }

    .save-btn.saving {
        background: #fa990c;
        pointer-events: none;
    }

/* Password change section */
.change-password-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #f8f8f8;
    border-radius: 12px;
    border: 1px solid #eaeaea;
}

.cpw-info {
}

.cpw-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.cpw-sub {
    font-size: 12px;
    color: #888;
}

.cpw-btn {
    padding: 8px 16px;
    border-radius: 9px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .cpw-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* Preferences / notification toggles */
.pref-section {
    margin-top: 18px;
}

.pref-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
}

.pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

    .pref-row:last-child {
        border-bottom: none;
    }

.pref-info-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.pref-info-sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
/* Toggle switch */
.toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #e0e0e0;
    border-radius: 24px;
    transition: .3s;
    cursor: pointer;
}

    .toggle-slider:before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: .3s;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }

.toggle input:checked + .toggle-slider {
    background: #18a34a;
}

    .toggle input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

/* ════════════════════════════════════════
   ADDRESSES
════════════════════════════════════════ */
.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.address-card {
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #eaeaea;
    padding: 18px;
    transition: .3s;
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

    .address-card:hover {
        border-color: #e8d5b5;
    }

    .address-card.default-addr {
        border-color: #fa990c;
        box-shadow: 0 4px 16px rgba(250,153,12,.1);
    }

.addr-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.atb-home {
    background: #ecfff0;
    color: #18a34a;
}

.atb-office {
    background: #eff6ff;
    color: #2563eb;
}

.atb-other {
    background: #f5f3ff;
    color: #7c3aed;
}

.default-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}

.addr-name {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 3px;
}

.addr-phone {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

.addr-text {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 12px;
}

.addr-actions {
    display: flex;
    gap: 7px;
}

.addr-btn {
    padding: 6px 13px;
    border-radius: 8px;
    border: 1.5px solid #e8e8e8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .addr-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .addr-btn.delete:hover {
        border-color: #e02020;
        color: #e02020;
    }

    .addr-btn.set-default {
        border-color: #18a34a;
        color: #18a34a;
        background: #ecfff0;
    }

/* Add new address card */
.add-addr-card {
    background: #fff;
    border-radius: 16px;
    border: 1.5px dashed #e8e8e8;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

    .add-addr-card:hover {
        border-color: #fa990c;
        background: #fffdf9;
    }

.add-addr-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ccc;
    margin-bottom: 10px;
    transition: .3s;
}

.add-addr-card:hover .add-addr-icon {
    background: #fff7ec;
    color: #fa990c;
}

.add-addr-text {
    font-size: 13px;
    font-weight: 700;
    color: #888;
}

.add-addr-card:hover .add-addr-text {
    color: #fa990c;
}

/* Address form panel (shows when adding/editing) */
.addr-form-panel {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 26px;
    margin-top: 4px;
    display: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

    .addr-form-panel.show {
        display: block;
    }

.afp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f5f5f5;
}

.afp-title {
    font-size: 16px;
    font-weight: 800;
    color: #111;
}

.afp-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    transition: .2s;
}

    .afp-close:hover {
        background: #fff5f5;
        border-color: #e02020;
        color: #e02020;
    }
/* Address type tabs */
.addr-type-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.att-item {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
}

    .att-item.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* ════════════════════════════════════════
   REVIEWS — write review on orders
════════════════════════════════════════ */
.review-order-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.roc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f5f5f5;
}

.roc-order-info {
    flex: 1;
}

.roc-order-id {
    font-size: 12px;
    font-weight: 700;
    color: #888;
}

.roc-date {
    font-size: 12px;
    color: #aaa;
}

.roc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    background: #ecfff0;
    color: #18a34a;
    padding: 3px 9px;
    border-radius: 20px;
}

/* Product to review */
.roc-products {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.roc-product {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f8f8f8;
}

    .roc-product:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.roc-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

    .roc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.roc-product-info {
    flex: 1;
}

.roc-product-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 3px;
}

.roc-product-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

/* Inline star picker */
.star-picker-inline {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.spi {
    font-size: 22px;
    cursor: pointer;
    color: #e0e0e0;
    transition: .15s;
    line-height: 1;
}

    .spi:hover, .spi.hov, .spi.sel {
        color: #ffb400;
        transform: scale(1.15);
    }

/* Already reviewed badge */
.reviewed-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}
/* Review expand form */
.roc-review-form {
    background: #f8f8f8;
    border-radius: 11px;
    padding: 12px;
    margin-top: 8px;
    display: none;
}

    .roc-review-form.show {
        display: block;
    }

.roc-review-inp {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #e3e3e3;
    border-radius: 9px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    resize: vertical;
    min-height: 76px;
    transition: .2s;
    background: #fff;
}

    .roc-review-inp:focus {
        border-color: #fa990c;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .roc-review-inp::placeholder {
        color: #bbb;
    }

.roc-submit-btn {
    margin-top: 9px;
    padding: 9px 18px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .roc-submit-btn:hover {
        background: #fa990c;
    }

.write-review-btn {
    padding: 7px 15px;
    background: #fff;
    color: #111;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .write-review-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* My reviews tab */
.my-reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-review-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.mrc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mrc-img {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
}

    .mrc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mrc-product {
    font-size: 13px;
    font-weight: 800;
    color: #111;
}

.mrc-date {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

.mrc-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 2px;
}

    .mrc-stars i {
        color: #ffb400;
        font-size: 13px;
    }

.mrc-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
}

.mrc-body {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

.mrc-actions {
    display: flex;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
}

.mrc-act-btn {
    padding: 5px 12px;
    border-radius: 7px;
    border: 1.5px solid #e8e8e8;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .mrc-act-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .mrc-act-btn.del:hover {
        border-color: #e02020;
        color: #e02020;
    }

/* Review tabs */
.review-tabs {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #e8e8e8;
    overflow: hidden;
    margin-bottom: 18px;
}

.rtab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    color: #555;
    border-right: 1.5px solid #e8e8e8;
}

    .rtab:last-child {
        border-right: none;
    }

    .rtab:hover {
        background: #fff7ec;
        color: #fa990c;
    }

    .rtab.active {
        background: #fa990c;
        color: #fff;
    }

/* ════════════════════════════════════════
   LOYALTY / WALLET
════════════════════════════════════════ */
.loyalty-banner {
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2a1400 100%);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

    .loyalty-banner::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -40px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.2),transparent 65%);
        pointer-events: none;
    }

.lb-icon {
    font-size: 40px;
    position: relative;
    z-index: 1;
}

.lb-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.lb-pts {
    font-family: 'Cormorant Garamond',serif;
    font-size: 36px;
    font-weight: 700;
    color: #fa990c;
    line-height: 1;
}

.lb-lbl {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
}

.lb-sub {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    margin-top: 4px;
}

.lb-redeem-btn {
    padding: 11px 22px;
    background: #fa990c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    position: relative;
    z-index: 1;
}

    .lb-redeem-btn:hover {
        background: #e8880a;
    }

/* ════════════════════════════════════════
   MODALS (shared)
════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 8000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(3px);
}

    .modal-overlay.open {
        display: flex;
    }

        .modal-overlay.open .modal-box {
            animation: mIn .3s cubic-bezier(.22,1,.36,1) both;
        }

@keyframes mIn {
    from {
        transform: translateY(28px) scale(.96);
        opacity: 0;
    }

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

.modal-box {
    background: #fff;
    border-radius: 22px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    position: relative;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 22px 22px 0 0;
    z-index: 1;
}

    .modal-head h3 {
        font-size: 16px;
        font-weight: 800;
        color: #111;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .modal-head h3 i {
            color: #fa990c;
        }

.modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    transition: .2s;
}

    .modal-close:hover {
        background: #fff5f5;
        border-color: #e02020;
        color: #e02020;
    }

.modal-body {
    padding: 20px;
}

/* Success modal */
.modal-success {
    text-align: center;
    padding: 28px 20px;
}

.ms-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg,#18a34a,#22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 26px;
    color: #fff;
    animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ms-title {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.ms-body {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* ════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
}

.empty-emoji {
    font-size: 48px;
    display: block;
    margin-bottom: 14px;
}

.empty-title {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    margin-bottom: 7px;
}

.empty-sub {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:1024px) {
    .dashboard {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dash-sidebar {
        position: static;
    }

    .profile-mini {
        display: none;
    }

    .dash-nav {
        display: none;
        overflow-x: auto;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin-bottom: 0;
    }

    .dash-nav-item {
        border-bottom: none;
        flex: 0 0 auto;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 11px 14px;
        white-space: nowrap;
        font-size: 13px;
    }

        .dash-nav-item.active {
            border-bottom-color: #fa990c;
            border-left: none;
        }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .customer-chip-name {
        display: none;
    }

    .dashboard {
        padding: 14px 14px 40px;
    }

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

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

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

    .order-footer-btns {
        width: 100%;
        justify-content: flex-end;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }

    .toast {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

@media(max-width:480px) {
    .summary-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* tracking switches to vertical layout at 600px via tracking CSS */
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-box {
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 88vh;
    }
}



/* ===== From contact-us.html ===== */
/* ── RESET ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

/* ─────────────────────────────────────
   HEADER — exact match project pattern
───────────────────────────────────── */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ─────────────────────────────────────
   HERO
───────────────────────────────────── */
.contact-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#111 55%,#1a0800 100%);
    padding: 56px 20px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .contact-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .contact-hero::after {
        content: '';
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.ch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.ch-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(28px,4vw,50px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

    .ch-title em {
        color: #fa990c;
        font-style: normal;
    }

.ch-sub {
    font-size: 15px;
    color: rgba(255,255,255,.6);
    max-width: 500px;
    margin: 0 auto 28px;
    line-height: 1.75;
    position: relative;
    z-index: 1;
}
/* Quick contact pills */
.ch-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.ch-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s;
}

    .ch-pill:hover {
        background: rgba(250,153,12,.2);
        border-color: rgba(250,153,12,.5);
        color: #fa990c;
    }

    .ch-pill.primary {
        background: #fa990c;
        border-color: #fa990c;
        color: #fff;
    }

        .ch-pill.primary:hover {
            background: #e8880a;
        }

    .ch-pill i {
        font-size: 14px;
    }

/* ─────────────────────────────────────
   MAIN PAGE LAYOUT
───────────────────────────────────── */
.contact-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 20px 60px;
}

/* ─────────────────────────────────────
   CONTACT CHANNELS (4 cards top row)
───────────────────────────────────── */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-bottom: 44px;
}

.channel-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 26px 20px;
    text-align: center;
    transition: .3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .channel-card::before {
        content: '';
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: radial-gradient(circle,var(--c-glow),transparent 65%);
        pointer-events: none;
    }

    .channel-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 36px rgba(0,0,0,.09);
    }

    .channel-card:hover {
        border-color: var(--c-accent);
    }

.cc-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 14px;
    background: var(--c-bg);
    color: var(--c-accent);
}

.cc-label {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.cc-value {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
    line-height: 1.3;
}

.cc-sub {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 16px;
}

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    background: var(--c-bg);
    color: var(--c-accent);
    border: 1.5px solid var(--c-border);
}

    .cc-btn:hover {
        background: var(--c-accent);
        color: #fff;
        border-color: var(--c-accent);
    }

/* Channel variants */
.cc-phone {
    --c-accent: #fa990c;
    --c-bg: #fff7ec;
    --c-border: #fde4b2;
    --c-glow: rgba(250,153,12,.12);
}

.cc-whatsapp {
    --c-accent: #25d366;
    --c-bg: #ecfff0;
    --c-border: #b8f0cc;
    --c-glow: rgba(37,211,102,.12);
}

.cc-email {
    --c-accent: #2563eb;
    --c-bg: #eff6ff;
    --c-border: #bfdbfe;
    --c-glow: rgba(37,99,235,.12);
}

.cc-corp {
    --c-accent: #7c3aed;
    --c-bg: #f5f3ff;
    --c-border: #ddd6fe;
    --c-glow: rgba(124,58,237,.12);
}

/* ─────────────────────────────────────
   TWO-COLUMN: FORM + INFO
───────────────────────────────────── */
.contact-main {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    margin-bottom: 44px;
    align-items: start;
}

/* ── LEFT: Contact form ── */
.contact-form-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #eaeaea;
    padding: 36px 38px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.cfc-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
}

    .cfc-title em {
        color: #fa990c;
        font-style: normal;
    }

.cfc-sub {
    font-size: 13px;
    color: #888;
    margin-bottom: 28px;
    line-height: 1.6;
}

/* Subject tabs */
.subject-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.stab {
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #666;
}

    .stab:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .stab.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* Form fields */
.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

    .cf-row.full {
        grid-template-columns: 1fr;
    }

.cf-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cf-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .4px;
}

    .cf-label span {
        color: #fa990c;
    }

.cf-input {
    padding: 12px 15px;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    color: #111;
}

    .cf-input:focus {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .cf-input::placeholder {
        color: #c0c0c0;
    }

select.cf-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath fill='%23888' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 32px;
}

textarea.cf-input {
    resize: vertical;
    min-height: 120px;
}

/* Mobile prefix */
.mob-field {
    display: flex;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    overflow: hidden;
    background: #fafafa;
    transition: .2s;
}

    .mob-field:focus-within {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

.mob-prefix {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #444;
    border-right: 1.5px solid #e3e3e3;
    flex-shrink: 0;
    background: #f5f5f5;
}

.mob-inp {
    flex: 1;
    padding: 12px 14px;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    background: transparent;
    color: #111;
}

    .mob-inp::placeholder {
        color: #c0c0c0;
    }

/* File attachment */
.cf-attach {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px dashed #e3e3e3;
    border-radius: 11px;
    background: #fafafa;
    cursor: pointer;
    transition: .2s;
    margin-bottom: 18px;
}

    .cf-attach:hover {
        border-color: #fa990c;
        background: #fff9f0;
    }

    .cf-attach input {
        display: none;
    }

.cf-attach-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #888;
    flex-shrink: 0;
}

.cf-attach-text {
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

    .cf-attach-text strong {
        color: #111;
        display: block;
        font-size: 12px;
        margin-bottom: 2px;
    }

/* Terms checkbox */
.cf-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 22px;
}

    .cf-terms input[type=checkbox] {
        accent-color: #fa990c;
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        margin-top: 2px;
        cursor: pointer;
    }

    .cf-terms label {
        font-size: 12px;
        color: #666;
        line-height: 1.65;
        cursor: pointer;
    }

    .cf-terms a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

/* Submit button */
.cf-submit {
    width: 100%;
    padding: 14px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .cf-submit:hover {
        background: #fa990c;
    }

    .cf-submit:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

/* Form success state */
.form-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

    .form-success.show {
        display: block;
    }

.fs-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(135deg,#18a34a,#22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: #fff;
    animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.fs-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

.fs-body {
    font-size: 14px;
    color: #888;
    line-height: 1.75;
    margin-bottom: 20px;
}

.fs-ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
}

/* ── RIGHT: Info sidebar ── */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Business hours card */
.hours-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 22px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.info-card-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f5;
}

    .info-card-title i {
        color: #fa990c;
    }

.hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #f8f8f8;
    font-size: 13px;
}

    .hours-row:last-child {
        border-bottom: none;
    }

.hours-day {
    font-weight: 700;
    color: #333;
}

.hours-time {
    font-weight: 600;
    color: #888;
}

.hours-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Location card */
.location-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 22px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.location-row {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.loc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff7ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fa990c;
    flex-shrink: 0;
}

.loc-label {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}

.loc-value {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    line-height: 1.6;
}

    .loc-value a {
        color: #fa990c;
        text-decoration: none;
        font-weight: 700;
    }

        .loc-value a:hover {
            text-decoration: underline;
        }

.map-embed {
    border-radius: 12px;
    overflow: hidden;
    height: 160px;
    border: 1px solid #eaeaea;
    margin-top: 4px;
}

    .map-embed iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

/* Social card */
.social-card {
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2a1400 100%);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
}

    .social-card::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

.sc-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.sc-sub {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.sc-icons {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.sc-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    transition: .25s;
    border: 1.5px solid rgba(255,255,255,.1);
}

    .sc-icon:hover {
        transform: translateY(-3px);
    }

    .sc-icon.fb {
        background: #1877f2;
        color: #fff;
    }

    .sc-icon.ig {
        background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
        color: #fff;
    }

    .sc-icon.yt {
        background: #e02020;
        color: #fff;
    }

    .sc-icon.wa {
        background: #25d366;
        color: #fff;
    }

/* Quick-replies CTA card */
.cta-order-card {
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #fde4b2;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(250,153,12,.06);
}

.coa-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 3px;
}

.coa-sub {
    font-size: 12px;
    color: #888;
    margin-bottom: 14px;
    line-height: 1.6;
}

.coa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    background: #fa990c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
}

    .coa-btn:hover {
        background: #e8880a;
        color: #fff;
    }

/* ─────────────────────────────────────
   FAQ STRIP
───────────────────────────────────── */
.contact-faq {
    margin-bottom: 44px;
}

.section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fa990c;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

    .section-eyebrow::before {
        content: '';
        width: 24px;
        height: 2px;
        background: #fa990c;
        border-radius: 2px;
        flex-shrink: 0;
    }

.section-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 30px;
    font-weight: 700;
    color: #111;
    margin-bottom: 24px;
    line-height: 1.2;
}

    .section-title em {
        color: #fa990c;
        font-style: normal;
    }

.faq-grid {
    /*display: grid;*/
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border-radius: 15px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0,0,0,.04);
    transition: .2s;
}

    .faq-item:hover {
        border-color: #e8d5b5;
    }

    .faq-item.open {
        border-color: #fa990c;
        box-shadow: 0 4px 16px rgba(250,153,12,.08);
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
    gap: 12px;
}

.faq-q-text {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    flex: 1;
    line-height: 1.4;
}

.faq-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    transition: .3s;
}

.faq-item.open .faq-arrow {
    background: #fa990c;
    color: #fff;
    border-color: #fa990c;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-item.open .faq-a {
    max-height: 300px;
}

.faq-a-inner {
    padding: 0 18px 16px;
    padding-top: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    border-top: 1px solid #f5f5f5;
}

    .faq-a-inner a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .faq-a-inner a:hover {
            text-decoration: underline;
        }

/* ─────────────────────────────────────
   RELATED SEARCHES
───────────────────────────────────── */
.rs-box {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    padding: 18px 22px;
    margin-bottom: 20px;
}

.rs-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rs-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ─────────────────────────────────────
   TOAST
───────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ─────────────────────────────────────
   FOOTER — exact match project pattern
───────────────────────────────────── */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media(max-width:1024px) {
    .channels-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-main {
        grid-template-columns: 1fr;
    }

    .contact-info-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .contact-hero {
        padding: 40px 16px 36px;
    }

    .ch-pills {
        gap: 7px;
    }

    .ch-pill {
        font-size: 12px;
        padding: 8px 13px;
    }

    .contact-page {
        padding: 24px 14px 40px;
    }

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

    .contact-form-card {
        padding: 22px 18px;
    }

    .cf-row {
        grid-template-columns: 1fr;
    }

    .contact-info-col {
        display: flex;
        flex-direction: column;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }

    .toast {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

@media(max-width:480px) {
    .channels-grid {
        grid-template-columns: 1fr 1fr;
    }

    .subject-tabs {
        gap: 6px;
    }

    .stab {
        font-size: 11px;
        padding: 6px 11px;
    }
}



/* ===== From product-detail.html ===== */
/* ============================================================
   BASE — same as home & listing
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f5f5f5;
    color: #222;
    overflow-x: hidden;
}

/* ============================================================
   HEADER — identical to home/listing
   ============================================================ */
header {
    padding: 5px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 999;
}

.top-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    font-size: 34px;
    font-family: 'Cormorant Garamond',serif;
    font-weight: 700;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 70%;
        padding: 10px 30px;
        border-radius: 50px;
        border: 1px solid #ddd;
        font-size: 15px;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

    .menu-btn span {
        width: 30px;
        height: 3px;
        background: #000;
        border-radius: 5px;
        display: block;
    }

.header-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 20px;
    text-decoration: none;
}

    .icon span {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #d10000;
        color: white;
        font-size: 11px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.search-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

/* SIDE MENU */
.side-menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100%;
    background: white;
    padding: 10px;
    box-shadow: -10px 0 30px rgba(0,0,0,.1);
    transition: .5s;
    z-index: 9999;
    overflow: auto;
}

.close-btn {
    font-size: 24px;
    margin-bottom: 20px;
    cursor: pointer;
}

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 18px 0;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

    .menu-link b {
        font-size: 30px;
        transition: 0.3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 20px;
}

    .dropdown a {
        text-decoration: none;
        color: #6d6d6d;
        font-size: 18px;
        padding-top: 6px;
        transition: 0.3s;
    }

        .dropdown a:hover {
            color: #000;
            transform: translateX(5px);
        }

/* TOP CATEGORY BAR */
.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border: 1px solid #E6A032;
    overflow: hidden;
    background: white;
}

.cat-item {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #E6A032;
    font-size: 28px;
    cursor: pointer;
    transition: 0.2s;
}

    .cat-item p {
        margin-top: 10px;
        font-size: 16px;
    }

    .cat-item:hover {
        background: #fff7f0;
    }

        .cat-item:hover p {
            color: #ff7a00;
        }

/* BREADCRUMB */
.breadcrumb-bar {
    background: #fff;
    padding: 12px 40px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #888;
}

    .breadcrumb-bar a {
        color: #888;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 600;
    }

/* ============================================================
   PRODUCT DETAIL — MAIN LAYOUT
   ============================================================ */
.detail-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* ============================================================
   LEFT — GALLERY
   ============================================================ */
.gallery-col {
    position: sticky;
    top: 90px;
}

.main-image-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e6eb;
    aspect-ratio: 1/1;
    cursor: zoom-in;
}

    .main-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        display: block;
    }

    .main-image-wrap:hover img {
        transform: scale(1.06);
    }

/* Badge on main image */
.main-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: #ff4d4d;
    color: #fff;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 30px;
    z-index: 2;
    letter-spacing: 0.5px;
}

/* Wishlist on main image */
.main-wish {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #b5b5b5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: 0.3s;
    z-index: 2;
}

    .main-wish:hover, .main-wish.active {
        color: #ff4f70;
    }

/* Zoom icon hint */
.zoom-hint {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
}

.main-image-wrap:hover .zoom-hint {
    opacity: 1;
}

/* Thumbnail strip */
.thumb-strip {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;
}

    .thumb-strip::-webkit-scrollbar {
        height: 4px;
    }

    .thumb-strip::-webkit-scrollbar-thumb {
        background: #e0e0e0;
        border-radius: 4px;
    }

.thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.25s;
    background: #fff;
}

    .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .thumb:hover {
        border-color: #fa990c;
    }

    .thumb.active {
        border-color: #fa990c;
        box-shadow: 0 0 0 3px rgba(250,153,12,0.2);
    }

/* Share bar */
.share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

    .share-bar span {
        font-size: 13px;
        color: #888;
        font-weight: 600;
    }

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e3e6eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    color: #444;
}

    .share-btn:hover {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* ============================================================
   RIGHT — PRODUCT INFO
   ============================================================ */
.info-col {
}

/* Badges row */
.badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.badge-pill {
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.badge-eggless {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
}

.badge-fresh {
    background: #fff7ec;
    color: #fa990c;
    border: 1px solid #fde4b2;
}

.badge-gf {
    background: #f3e8ff;
    color: #7c3aed;
    border: 1px solid #d8b8fc;
}

.badge-hot {
    background: #ffe4e4;
    color: #d10000;
    border: 1px solid #ffc0c0;
}

/* Product title */
.product-name {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    line-height: 1.25;
    margin-bottom: 12px;
}

/* Rating row */
.rating-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.stars-display {
    display: flex;
    gap: 3px;
}

    .stars-display i {
        color: #ffb400;
        font-size: 16px;
    }

.rating-num {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.review-count {
    font-size: 14px;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
}

    .review-count:hover {
        color: #fa990c;
    }

.delivery-badge {
    background: #e8fff1;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* PRICE BLOCK */
.price-block {
    background: #fafafa;
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
}

.price-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.price-now {
    font-size: 36px;
    font-weight: 800;
    color: #111;
}

.price-was {
    font-size: 22px;
    color: #b9b9b9;
    text-decoration: line-through;
}

.price-off {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #18a34a;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
}

.price-saving {
    font-size: 13px;
    color: #18a34a;
    font-weight: 600;
}

.price-tax {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

/* INGREDIENTS */
.ingredients-block {
    margin-bottom: 20px;
}

    .ingredients-block h3 {
        font-size: 15px;
        font-weight: 700;
        color: #111;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .ingredients-block h3 i {
            color: #fa990c;
        }

.ingredients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ing-tag {
    padding: 6px 13px;
    background: #fff;
    border: 1px solid #e3e6eb;
    border-radius: 30px;
    font-size: 12px;
    color: #444;
    transition: 0.2s;
}

    .ing-tag:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* WEIGHT SELECT */
.option-block {
    margin-bottom: 20px;
}

    .option-block h3 {
        font-size: 15px;
        font-weight: 700;
        color: #111;
        margin-bottom: 10px;
    }

.weight-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.weight-btn {
    padding: 10px 20px;
    border-radius: 12px;
    border: 2px solid #e3e6eb;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Outfit',sans-serif;
}

    .weight-btn:hover, .weight-btn.active {
        border-color: #fa990c;
        color: #fa990c;
        background: #fff7ec;
    }

/* FEATURES LIST */
.features-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

    .feature-item i {
        color: #fa990c;
        font-size: 16px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .feature-item p {
        font-size: 13px;
        color: #444;
        line-height: 1.5;
    }

        .feature-item p strong {
            color: #111;
            display: block;
            font-size: 13px;
        }

/* QTY + CTA */
.cta-block {
    margin-bottom: 24px;
}

    .cta-block h3 {
        font-size: 15px;
        font-weight: 700;
        color: #111;
        margin-bottom: 12px;
    }

.qty-cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.qty-picker {
    display: flex;
    align-items: center;
    border: 2px solid #e3e6eb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

    .qty-picker button {
        width: 44px;
        height: 48px;
        border: none;
        background: #fff;
        font-size: 22px;
        cursor: pointer;
        color: #111;
        transition: 0.2s;
        font-family: 'Outfit',sans-serif;
    }

        .qty-picker button:hover {
            background: #fa990c;
            color: #fff;
        }

    .qty-picker .qty-num {
        min-width: 44px;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #111;
    }

.btn-cart {
    flex: 1;
    padding: 15px 24px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Outfit',sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 160px;
}

    .btn-cart:hover {
        background: #fa990c;
    }

    .btn-cart.added {
        background: #18a34a;
    }

.btn-enquiry {
    padding: 15px 22px;
    background: #fff;
    color: #111;
    border: 2px solid #111;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Outfit',sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .btn-enquiry:hover {
        background: #111;
        color: #fff;
    }

/* DELIVERY INFO */
.delivery-info {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e3e6eb;
    padding: 16px 18px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.del-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .del-item i {
        font-size: 20px;
        color: #fa990c;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .del-item h4 {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 2px;
    }

    .del-item p {
        font-size: 12px;
        color: #888;
    }

/* TRUST STRIP */
.trust-strip {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
   /* border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;*/
    margin-bottom: 22px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    font-weight: 600;
}

    .trust-item i {
        color: #fa990c;
    }

/* ============================================================
   TABS — Description / Ingredients / Reviews / Nutrition
   ============================================================ */
.tabs-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px 50px;
}

.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e3e6eb;
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .tab-nav::-webkit-scrollbar {
        display: none;
    }

.tab-btn {
    padding: 14px 24px;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
    font-family: 'Outfit',sans-serif;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

    .tab-btn:hover {
        color: #111;
    }

    .tab-btn.active {
        color: #fa990c;
        border-bottom-color: #fa990c;
    }

.tab-panel {
    display: none;
}

    .tab-panel.active {
        display: block;
    }

/* Description tab */
.desc-content {
    background: #fff;
    border-radius: 20px;
    padding: 36px;
    border: 1px solid #e3e6eb;
}

    .desc-content h2 {
        font-size: 22px;
        font-weight: 800;
        color: #111;
        margin-bottom: 16px;
    }

    .desc-content p {
        font-size: 15px;
        color: #555;
        line-height: 1.9;
        margin-bottom: 16px;
    }

    .desc-content h3 {
        font-size: 17px;
        font-weight: 700;
        color: #111;
        margin: 24px 0 10px;
    }

    .desc-content ul {
        padding-left: 20px;
        margin-bottom: 16px;
    }

        .desc-content ul li {
            font-size: 15px;
            color: #555;
            line-height: 1.9;
            margin-bottom: 4px;
        }

/* Nutrition tab */
.nutrition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.nutrition-table {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e3e6eb;
    overflow: hidden;
}

    .nutrition-table table {
        width: 100%;
        border-collapse: collapse;
    }

        .nutrition-table table th {
            background: #fafafa;
            padding: 12px 18px;
            text-align: left;
            font-size: 13px;
            font-weight: 700;
            color: #444;
            border-bottom: 1px solid #e3e6eb;
        }

        .nutrition-table table td {
            padding: 11px 18px;
            font-size: 14px;
            color: #555;
            border-bottom: 1px solid #f5f5f5;
        }

            .nutrition-table table td:last-child {
                font-weight: 700;
                color: #111;
            }

        .nutrition-table table tr:last-child td {
            border-bottom: none;
        }

.allergen-box {
    background: #fff7ec;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid #fde4b2;
}

    .allergen-box h3 {
        font-size: 16px;
        font-weight: 800;
        color: #111;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .allergen-box h3 i {
            color: #fa990c;
        }

    .allergen-box p {
        font-size: 14px;
        color: #666;
        line-height: 1.8;
    }

/* Reviews tab */
.reviews-summary {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 30px;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid #e3e6eb;
}

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

    .rating-big .num {
        font-size: 64px;
        font-weight: 800;
        color: #111;
        line-height: 1;
    }

    .rating-big .stars-big {
        display: flex;
        justify-content: center;
        gap: 4px;
        margin: 8px 0;
    }

        .rating-big .stars-big i {
            color: #ffb400;
            font-size: 20px;
        }

    .rating-big p {
        font-size: 13px;
        color: #888;
    }

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .rating-bar-row span:first-child {
        font-size: 13px;
        color: #888;
        width: 30px;
        text-align: right;
        flex-shrink: 0;
    }

.bar-track {
    flex: 1;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: #ffb400;
    border-radius: 4px;
}

.rating-bar-row span:last-child {
    font-size: 13px;
    color: #888;
    width: 28px;
    flex-shrink: 0;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid #e3e6eb;
}

.review-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.reviewer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.reviewer-name {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.reviewer-date {
    font-size: 12px;
    color: #aaa;
}

.review-stars {
    display: flex;
    gap: 2px;
}

    .review-stars i {
        color: #ffb400;
        font-size: 13px;
    }

.verified-badge {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.review-text {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
}

.review-helpful {
    margin-top: 14px;
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .review-helpful button {
        background: none;
        border: 1px solid #ddd;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        cursor: pointer;
        font-family: 'Outfit',sans-serif;
        transition: 0.2s;
    }

        .review-helpful button:hover {
            border-color: #fa990c;
            color: #fa990c;
        }

/* Ingredients tab */
.ing-full {
    background: #fff;
    border-radius: 20px;
    padding: 36px;
    border: 1px solid #e3e6eb;
}

    .ing-full h2 {
        font-size: 22px;
        font-weight: 800;
        color: #111;
        margin-bottom: 8px;
    }

    .ing-full .sub {
        font-size: 14px;
        color: #888;
        margin-bottom: 24px;
    }

.ing-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.ing-card {
    background: #fafafa;
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}

    .ing-card:hover {
        background: #fff7ec;
        border-color: #fa990c;
    }

    .ing-card .ing-emoji {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .ing-card h4 {
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 4px;
    }

    .ing-card p {
        font-size: 11px;
        color: #888;
    }

.full-ingredients-text {
    background: #f9f9f9;
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid #eee;
}

    .full-ingredients-text h3 {
        font-size: 14px;
        font-weight: 700;
        color: #111;
        margin-bottom: 8px;
    }

    .full-ingredients-text p {
        font-size: 13px;
        color: #666;
        line-height: 1.8;
    }

/* ============================================================
   RELATED PRODUCTS — same card design as listing/home
   ============================================================ */
.related-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

    .section-heading-row h2 {
        font-size: 26px;
        font-weight: 800;
        color: #111;
    }

    .section-heading-row span {
        font-size: 13px;
        color: #fa990c;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        display: block;
        margin-bottom: 4px;
    }

.view-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fa990c;
    font-size: 14px;
    font-weight: 700;
    transition: 0.2s;
}

    .view-all-link:hover {
        gap: 12px;
    }

/* Same product-grid as listing page */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
}

.product-card {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #e3e6eb;
    transition: 0.35s ease;
    position: relative;
}

    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    }

.product-image {
    position: relative;
    height: 230px;
    overflow: hidden;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.4s ease;
    }

.product-card:hover img {
    transform: scale(1.05);
}

.wishlist-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #b5b5b5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: 0.3s;
    z-index: 2;
    border: none;
}

    .wishlist-btn:hover {
        color: #ff4f70;
    }

    .wishlist-btn.active {
        color: #ff4f70;
    }

.label-wrap {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.hot {
    background: #ff4d4d;
    color: white;
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 30px;
    font-weight: 700;
}

.sale {
    background: black;
    color: white;
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 30px;
    font-weight: 700;
}

.product-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,136,0,0.38);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: 0.35s ease;
    z-index: 2;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.add-cart-btn {
    background: #fff;
    color: #ff7a00;
    border: none;
    outline: none;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(70px);
    transition: 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    font-family: 'Outfit',sans-serif;
    white-space: nowrap;
}

.product-card:hover .add-cart-btn {
    transform: translateY(0);
}

.add-cart-btn:hover {
    background: #111;
    color: #fff;
}

.qty-control {
    display: none;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

    .qty-control.visible {
        display: flex;
    }

.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #111;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-family: 'Outfit',sans-serif;
}

    .qty-btn:hover {
        background: #fa990c;
    }

.qty-count {
    min-width: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    padding: 0 4px;
}

.product-content {
    padding: 16px 18px 18px;
}

.product-title {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
    margin-bottom: 8px;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.price {
    font-size: 17px;
    font-weight: 700;
    color: #111;
}

.old-price {
    font-size: 14px;
    color: #b9b9b9;
    text-decoration: line-through;
}

.discount {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #18a34a;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}

.bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6f6f7d;
}

    .rating i {
        color: #ffb400;
    }

.delivery-tag {
    background: #f3e8ff;
    color: #7c3aed;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}

.fast-delivery {
    background: #ffe7ff;
    color: #c026d3;
}

.cart-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: #fff7ec;
    border-top: 1px solid #ffe0b2;
}

    .cart-bar.show {
        display: flex;
    }

    .cart-bar .qty-control {
        display: flex;
        box-shadow: none;
        background: transparent;
    }

    .cart-bar .qty-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
    }

.cart-bar-price {
    font-size: 14px;
    font-weight: 700;
    color: #fa990c;
}

/* ============================================================
   SEO SECTIONS
   ============================================================ */
.seo-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.faq-section {
    background: #fff;
    border-radius: 24px;
    padding: 50px 40px;
    border: 1px solid #e3e6eb;
    margin-bottom: 40px;
}

    .faq-section h2 {
        font-size: 26px;
        font-weight: 800;
        color: #111;
        margin-bottom: 8px;
    }

    .faq-section .sub {
        color: #888;
        font-size: 14px;
        margin-bottom: 36px;
    }

.faq-item {
    border-bottom: 1px solid #f0f0f0;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

    .faq-q i {
        font-size: 12px;
        color: #888;
        transition: 0.3s;
    }

.faq-item.open .faq-q i {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    padding-bottom: 16px;
}

.faq-item.open .faq-a {
    display: block;
}

.related-searches {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e3e6eb;
    margin-bottom: 40px;
}

    .related-searches h2 {
        font-size: 22px;
        font-weight: 800;
        color: #111;
        margin-bottom: 20px;
    }

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-tag {
    padding: 9px 18px;
    border: 1px solid #e3e6eb;
    border-radius: 50px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    transition: 0.2s;
    background: #fafafa;
}

    .search-tag:hover {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* ============================================================
   INTERLINK + MAIN FOOTER — same as home/listing
   ============================================================ */
.interlink-footer {
    background: #091426;
    padding: 20px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 50px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 30px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 14px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 16px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 8px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 20px;
    right: 5%;
    font-size: 12px;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 13px;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 70px 20px 25px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1400px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.main-footer .footer-column h3 {
    font-size: 18px;
    margin-bottom: 25px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 6px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: 0.3s;
            font-size: 14px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
                padding-left: 4px;
            }

.footer-logo {
    width: 150px;
    margin-bottom: 25px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 25px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.9;
    font-size: 16px;
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

    .social-icons a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: 0.3s;
        font-size: 14px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 14px;
    }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

    .lightbox.open {
        opacity: 1;
        pointer-events: all;
    }

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 16px;
    transform: scale(0.9);
    transition: 0.3s;
    object-fit: contain;
}

.lightbox.open .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: 0.2s;
    border: none;
    background: none;
}

    .lightbox-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    background: rgba(255,255,255,0.15);
    border: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    z-index:9;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

    .lightbox-prev:hover, .lightbox-next:hover {
        background: rgba(255,255,255,0.3);
    }

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    opacity: 0.7;
}

/* ============================================================
   BULK ENQUIRY MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    padding: 20px;
}

    .modal-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

.modal-box {
    background: #fff;
    border-radius: 24px;
    padding: 36px;
    width: 100%;
    max-width: 500px;
    transform: translateY(30px);
    transition: 0.3s;
}

.modal-overlay.open .modal-box {
    transform: translateY(0);
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

    .modal-head h3 {
        font-size: 22px;
        font-weight: 800;
        color: #111;
    }

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
}

    .modal-close:hover {
        color: #111;
    }

.form-group {
    margin-bottom: 16px;
}

    .form-group label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: #111;
        margin-bottom: 6px;
    }

    .form-group input, .form-group textarea, .form-group select {
        width: 100%;
        padding: 12px 14px;
        border: 1.5px solid #e3e6eb;
        border-radius: 12px;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: 0.2s;
        background: #fafafa;
    }

        .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
            border-color: #fa990c;
            background: #fff;
        }

    .form-group textarea {
        resize: vertical;
        min-height: 80px;
    }

.btn-submit {
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
}

    .btn-submit:hover {
        background: #fa990c;
    }

/* CART TOAST */
.cart-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #111;
    color: #fff;
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 9999;
    transform: translateY(80px);
    opacity: 0;
    transition: 0.4s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cart-toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* STICKY MOBILE BUY BAR */
.mobile-buy-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e3e6eb;
    padding: 12px 16px;
    z-index: 800;
    gap: 10px;
    align-items: center;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}

.mobile-buy-price {
    font-size: 20px;
    font-weight: 800;
    color: #111;
}

    .mobile-buy-price del {
        font-size: 14px;
        color: #aaa;
        font-weight: 400;
        margin-left: 6px;
    }

.mobile-buy-btn {
    flex: 1;
    padding: 14px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
}

    .mobile-buy-btn:hover {
        background: #fa990c;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px) {
    .detail-page {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .gallery-col {
        position: static;
    }

    .features-block {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: repeat(2,1fr);
    }

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

@media(max-width:992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }

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

    .reviews-summary {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .rating-big {
        margin-bottom: 20px;
    }
}

@media(max-width:768px) {
    .top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        position: relative;
    }

    .search-wrap {
        width: 100%;
        order: 2;
        display: none;
        margin-top: 12px;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            height: 52px;
            border-radius: 14px;
            border: 1px solid #ddd;
            padding: 0 18px;
            font-size: 15px;
            outline: none;
        }

    .header-icons {
        gap: 8px;
    }

    .icon {
        width: 42px;
        height: 42px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px;
        font-size: 22px;
    }

        .cat-item p {
            font-size: 11px;
        }

    .breadcrumb-bar {
        padding: 10px 16px;
    }

    .detail-page {
        padding: 20px 16px;
        gap: 20px;
    }

    .tabs-section {
        padding: 0 16px 40px;
    }

    .related-section {
        padding: 0 16px 40px;
    }

    .seo-section {
        padding: 0 16px 40px;
    }

    .product-name {
        font-size: 24px;
    }

    .price-now {
        font-size: 28px;
    }

    .delivery-info {
        grid-template-columns: 1fr;
    }

    .features-block {
        grid-template-columns: 1fr 1fr;
    }

    .tab-btn {
        font-size: 13px;
        padding: 12px 14px;
    }

    .desc-content, .ing-full, .faq-section, .related-searches {
        padding: 24px 18px;
    }

    .product-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 14px;
    }

    .product-image {
        height: 170px;
    }

    .ing-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
        max-height: 420px;
    }

    .mobile-buy-bar {
        display: flex;
    }

    body {
        /*padding-bottom: 80px;*/
    }

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

    .qty-cta-row {
        gap: 8px;
    }

    .btn-cart, .btn-enquiry {
        font-size: 14px;
        padding: 13px 16px;
    }

    .cart-toast {
        bottom: 90px;
        right: 16px;
        left: 16px;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }
}

@media(max-width:480px) {
    .features-block {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .ing-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .nutrition-table {
        overflow-x: auto;
    }
}



/* ===== From blog-detail.html ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
}
/* ── HEADER ── */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ── ARTICLE HERO ── */
.article-hero {
    background: #111;
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
}

.ah-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .ah-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(.45);
    }

.ah-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 60%,transparent 100%);
    z-index: 1;
}

.ah-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 44px;
    width: 100%;
}

.ah-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.ah-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(24px,3.5vw,40px);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 16px;
}

.ah-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(255,255,255,.7);
}

    .ah-meta i {
        color: #fa990c;
    }

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

.ah-author-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(250,153,12,.5);
}

    .ah-author-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* ── SHARE BAR (top) ── */
.share-bar {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
    display: flex;
    align-items: center;  
    gap: 14px;
    flex-wrap: wrap;
}

.share-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #888;
}

    .share-bar-left i {
        color: #fa990c;
    }

.share-btns {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.sh-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
    text-decoration: none;
}

    .sh-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .sh-btn.fb:hover {
        border-color: #1877f2;
        color: #1877f2;
    }

    .sh-btn.tw:hover {
        border-color: #000;
        color: #000;
    }

    .sh-btn.wa:hover {
        border-color: #25d366;
        color: #25d366;
    }

    .sh-btn.copy:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #fa990c;
    width: 0%;
    z-index: 10000;
    transition: width .1s linear;
    box-shadow: 0 0 6px rgba(250,153,12,.5);
}

/* ── ARTICLE LAYOUT ── */
.article-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}

/* ── ARTICLE BODY ── */
.article-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 44px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* TOC */
.toc {
    background: #fff9f0;
    border: 1.5px solid #fde4b2;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 32px;
}

.toc-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .toc-title i {
        color: #fa990c;
    }

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .toc-list li a {
        font-size: 13px;
        color: #555;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: .2s;
        padding: 4px 0;
    }

        .toc-list li a:hover {
            color: #fa990c;
        }

        .toc-list li a::before {
            content: '';
            width: 14px;
            height: 2px;
            background: #fa990c;
            border-radius: 2px;
            flex-shrink: 0;
        }

.toc-num {
    font-weight: 700;
    color: #fa990c;
    font-size: 12px;
    min-width: 18px;
}

/* Article typography */
.article-body {
    font-size: 16px;
    color: #333;
    line-height: 1.85;
}

    .article-body h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 26px;
        font-weight: 700;
        color: #111;
        margin: 36px 0 14px;
        padding-top: 8px;
        border-bottom: 2px solid #f5f5f5;
        padding-bottom: 10px;
    }

    .article-body h3 {
        font-size: 18px;
        font-weight: 800;
        color: #222;
        margin: 24px 0 10px;
    }

    .article-body p {
        margin-bottom: 18px;
    }

    .article-body ul, .article-body ol {
        margin: 0 0 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .article-body li {
        line-height: 1.75;
        color: #444;
    }

    .article-body strong {
        color: #111;
    }

    .article-body a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .article-body a:hover {
            text-decoration: underline;
        }

    .article-body blockquote {
        border-left: 4px solid #fa990c;
        background: #fff9f0;
        border-radius: 0 12px 12px 0;
        padding: 18px 20px;
        margin: 22px 0;
        font-family: 'Cormorant Garamond',serif;
        font-size: 19px;
        font-style: italic;
        color: #333;
    }

/* Callout boxes */
.callout {
    border-radius: 14px;
    padding: 18px 20px;
    margin: 22px 0;
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.callout-tip {
    background: #ecfff0;
    border: 1px solid #b8f0cc;
}

.callout-warn {
    background: #fff7ec;
    border: 1px solid #fde4b2;
}

.callout-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.callout-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.callout-body {
    flex: 1;
}

    .callout-body strong {
        display: block;
        font-size: 14px;
        font-weight: 800;
        color: #111;
        margin-bottom: 5px;
    }

    .callout-body p {
        font-size: 13px;
        color: #444;
        line-height: 1.7;
        margin: 0;
    }

/* Ingredient card */
.ingredient-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 18px 0;
}

.ing-card {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .ing-card:hover {
        border-color: #fa990c;
        background: #fff9f0;
    }

.ing-emoji {
    font-size: 24px;
    display: block;
    margin-bottom: 7px;
}

.ing-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.ing-amount {
    font-size: 12px;
    color: #888;
}

/* Step counter */
.step-block {
    border: 1px solid #eaeaea;
    border-radius: 14px;
    padding: 20px 22px;
    margin: 12px 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    transition: .2s;
}

    .step-block:hover {
        border-color: #fa990c;
        background: #fffdf9;
    }

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.step-content p {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* Recipe summary card */
.recipe-summary {
    background: linear-gradient(135deg,#111,#1e1e1e);
    border-radius: 16px;
    padding: 24px;
    margin: 28px 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    text-align: center;
}

.rs-item {
    padding: 8px;
    border-right: 1px solid rgba(255,255,255,.1);
}

    .rs-item:last-child {
        border-right: none;
    }

.rs-icon {
    font-size: 22px;
    margin-bottom: 7px;
}

.rs-val {
    font-size: 16px;
    font-weight: 800;
    color: #fa990c;
}

.rs-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

/* Article image */
.article-img {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    margin: 24px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
}

    .article-img img {
        width: 100%;
        display: block;
        transition: .3s;
    }

    .article-img:hover img {
        transform: scale(1.01);
    }

.img-caption {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* Author card */
.author-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fafafa;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #eaeaea;
    margin-top: 36px;
}

.author-card-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #fa990c;
}

    .author-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.author-card-info {
}

.acn {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
}

.acr {
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    margin-bottom: 7px;
}

.acb {
    font-size: 13px;
    color: #666;
    line-height: 1.65;
}

/* Tags */
.article-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

    .article-tags span {
        font-size: 12px;
        font-weight: 700;
        color: #888;
        align-self: center;
    }

.a-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .a-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* Share bottom */
.article-share {
    margin-top: 28px;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border: 1px solid #eaeaea;
}

    .article-share span {
        font-size: 14px;
        font-weight: 700;
        color: #111;
    }

/* FAQ section inside article */
.faq-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    overflow: hidden;
}

    .faq-item.open {
        border-color: #fa990c;
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    cursor: pointer;
    gap: 10px;
}

.faq-q-text {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    flex: 1;
    line-height: 1.4;
}

.faq-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #888;
    flex-shrink: 0;
    transition: .3s;
}

.faq-item.open .faq-arrow {
    background: #fa990c;
    color: #fff;
    border-color: #fa990c;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-item.open .faq-a {
    max-height: 300px;
}

.faq-a-inner {
    padding: 0 18px 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    border-top: 1px solid #f5f5f5;
    padding-top: 12px;
}

/* ── SIDEBAR ── */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sb-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 18px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.sb-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sb-title i {
        color: #fa990c;
    }

/* sticky TOC sidebar (desktop) */
.toc-sidebar {
    position: sticky;
    top: 90px;
}

    .toc-sidebar .toc-list li a {
        font-size: 12px;
    }

.reading-progress-text {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-bottom: 12px;
}

/* Related posts in sidebar */
.rel-post {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
}

    .rel-post:last-child {
        border-bottom: none;
    }

.rp-img {
    width: 52px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

    .rp-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.rp-info {
}

.rp-title {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 3px;
}

.rp-meta {
    font-size: 11px;
    color: #aaa;
}

.rp-title a {
    text-decoration: none;
    color: #111;
}

    .rp-title a:hover {
        color: #fa990c;
    }

/* Newsletter */
.newsletter-card {
    background: linear-gradient(135deg,#111,#1e1e1e);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid #333;
}

.nl-emoji {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

.nl-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}

.nl-sub {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    margin-bottom: 14px;
    line-height: 1.6;
}

.nl-input {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    background: rgba(255,255,255,.08);
    color: #fff;
    outline: none;
    margin-bottom: 9px;
}

    .nl-input::placeholder {
        color: rgba(255,255,255,.35);
    }

    .nl-input:focus {
        border-color: #fa990c;
    }

.nl-btn {
    width: 100%;
    padding: 10px;
    background: #fa990c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .nl-btn:hover {
        background: #e8880a;
    }

/* Tags sidebar */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.s-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .s-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* Product CTA in sidebar */
.product-cta {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eaeaea;
}

.product-cta-img {
    height: 120px;
    overflow: hidden;
}

    .product-cta-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .3s;
    }

.product-cta:hover .product-cta-img img {
    transform: scale(1.04);
}

.product-cta-body {
    padding: 14px;
}

.product-cta-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.product-cta-sub {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
    line-height: 1.5;
}

.product-cta-btn {
    display: block;
    text-align: center;
    padding: 10px;
    background: #fa990c;
    color: #fff;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

    .product-cta-btn:hover {
        background: #e8880a;
        color: #fff;
    }

/* ── RELATED POSTS section (bottom) ── */
.related-posts-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

.rps-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rps-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

/* ── RELATED SEARCHES ── */
.rs-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.rs-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 20px 24px;
}

.rs-box-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rs-box-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ── TOAST ── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ── FOOTER ── */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
    .article-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .article-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .toc-sidebar {
        position: static;
    }

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

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .article-hero {
        min-height: 300px;
    }

    .ah-content {
        padding: 0 16px 32px;
    }

    .article-wrap {
        padding: 16px 14px 40px;
    }

    .article-card {
        padding: 24px 18px;
    }

    .article-body h2 {
        font-size: 22px;
    }

    .article-body h3 {
        font-size: 16px;
    }

    .article-body {
        font-size: 15px;
    }

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

    .recipe-summary {
        grid-template-columns: 1fr 1fr;
    }

    .rs-item:nth-child(2) {
        border-right: none;
    }

    .rs-item:nth-child(3) {
        border-top: 1px solid rgba(255,255,255,.1);
    }

    .share-bar {
        padding: 8px 14px;
    }

    .article-sidebar {
        grid-template-columns: 1fr;
    }

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

    .related-posts-section {
        padding: 0 14px 40px;
    }

    .rs-section {
        padding: 0 14px 30px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }
}

@media(max-width:480px) {
    .ingredient-grid {
        grid-template-columns: 1fr 1fr;
    }

    .share-btns {
        gap: 5px;
    }

    .sh-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
}



/* ===== From blog.html ===== */
/* ── RESET ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
}
/* ── HEADER ── */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ── BLOG HERO ── */
.blog-hero {
    background: linear-gradient(135deg,#111 0%,#1e1e1e 55%,#2c1800 100%);
    padding: 52px 20px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .blog-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .blog-hero::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -50px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.bh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.bh-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(28px,4vw,48px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

    .bh-title em {
        color: #fa990c;
        font-style: normal;
    }

.bh-sub {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    max-width: 560px;
    margin: 0 auto 24px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* Blog search bar in hero */
.blog-search-bar {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
}

    .blog-search-bar input {
        flex: 1;
        padding: 14px 20px;
        border: none;
        outline: none;
        font-size: 15px;
        font-family: 'Outfit',sans-serif;
        color: #111;
        background: transparent;
    }

        .blog-search-bar input::placeholder {
            color: #bbb;
        }

.blog-search-btn {
    padding: 14px 22px;
    background: #fa990c;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .blog-search-btn:hover {
        background: #e8880a;
    }

/* ── MAIN LAYOUT ── */
.blog-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 20px 60px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}

/* ── CATEGORIES FILTER PILLS ── */
.cat-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.cat-pill {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
}

    .cat-pill:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .cat-pill.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* ── FEATURED POST ── */
.featured-post {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: .3s;
}

    .featured-post:hover {
        box-shadow: 0 8px 28px rgba(250,153,12,.1);
        border-color: #fa990c;
    }

.fp-img {
    position: relative;
    overflow: hidden;
}

    .fp-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .4s;
        min-height: 280px;
    }

.featured-post:hover .fp-img img {
    transform: scale(1.04);
}

.fp-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #fa990c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.fp-body {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fp-category {
    font-size: 11px;
    font-weight: 700;
    color: #fa990c;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.fp-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 26px;
    font-weight: 700;
    color: #111;
    line-height: 1.35;
    margin-bottom: 12px;
}

.fp-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin-bottom: 18px;
}

.fp-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #999;
    flex-wrap: wrap;
}

    .fp-meta i {
        color: #fa990c;
    }

.fp-read {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #111;
    color: #fff;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    margin-top: 16px;
    align-self: flex-start;
}

    .fp-read:hover {
        background: #fa990c;
        color: #fff;
    }

    .fp-read i {
        font-size: 11px;
        transition: .2s;
    }

    .fp-read:hover i {
        transform: translateX(3px);
    }

/* ── BLOG GRID ── */
.posts-count {
    font-size: 13px;
    color: #888;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

    .posts-count strong {
        color: #111;
    }

.sort-select {
    padding: 7px 13px;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    background: #fff;
    cursor: pointer;
}

    .sort-select:focus {
        border-color: #fa990c;
    }

.posts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 28px;
}

.post-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .3s;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
}

    .post-card:hover {
        border-color: #fa990c;
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(250,153,12,.1);
    }

.pc-img {
    position: relative;
    overflow: hidden;
    height: 180px;
}

    .pc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .4s;
        display: block;
    }

.post-card:hover .pc-img img {
    transform: scale(1.05);
}

.pc-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(250,153,12,.92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.pc-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pc-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
    margin-bottom: 8px;
}

.pc-excerpt {
    font-size: 13px;
    color: #777;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 12px;
}

.pc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #aaa;
    flex-wrap: wrap;
}

    .pc-meta i {
        color: #fa990c;
        font-size: 10px;
    }

.pc-link {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fa990c;
    text-decoration: none;
    transition: .2s;
}

    .pc-link:hover {
        gap: 9px;
    }

    .pc-link i {
        font-size: 10px;
    }

/* ── PAGINATION ── */
.pagination-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.pg-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .pg-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .pg-btn.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

    .pg-btn:disabled {
        color: #ccc;
        cursor: not-allowed;
    }

/* ── SIDEBAR ── */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sb-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.sb-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sb-title i {
        color: #fa990c;
    }

/* Newsletter widget */
.newsletter-card {
    background: linear-gradient(135deg,#111,#1e1e1e);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    border: 1px solid #333;
}

.nl-emoji {
    font-size: 32px;
    display: block;
    margin-bottom: 12px;
}

.nl-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.nl-sub {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    margin-bottom: 16px;
    line-height: 1.6;
}

.nl-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    background: rgba(255,255,255,.08);
    color: #fff;
    outline: none;
    margin-bottom: 10px;
}

    .nl-input::placeholder {
        color: rgba(255,255,255,.35);
    }

    .nl-input:focus {
        border-color: #fa990c;
    }

.nl-btn {
    width: 100%;
    padding: 11px;
    background: #fa990c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .nl-btn:hover {
        background: #e8880a;
    }

/* Popular posts */
.popular-post {
    display: flex;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
}

    .popular-post:last-child {
        border-bottom: none;
    }

.pp-img {
    width: 58px;
    height: 54px;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
}

    .pp-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pp-info {
}

.pp-title {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 4px;
}

.pp-meta {
    font-size: 11px;
    color: #aaa;
}

/* Category list */
.cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .cat-list li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 11px;
        border-radius: 9px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        color: #444;
        transition: .2s;
    }

        .cat-list li a:hover {
            background: #fff7ec;
            color: #fa990c;
        }

.cat-count {
    background: #f5f5f5;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Tags cloud */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag {
    display: inline-block;
    background: #f5f5f5;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ── RELATED SEARCHES ── */
.related-searches {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 20px 24px;
    margin-top: 4px;
}

.rs-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rs-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ── TOAST ── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ── FOOTER ── */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
    .blog-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .blog-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .blog-hero {
        padding: 36px 16px 32px;
    }

    .blog-wrap {
        padding: 20px 14px 40px;
    }

    .featured-post {
        grid-template-columns: 1fr;
    }

    .fp-img img {
        min-height: 220px;
    }

    .fp-body {
        padding: 20px;
    }

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

    .blog-sidebar {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }
}

@media(max-width:480px) {
    .cat-pills {
        gap: 6px;
    }

    .cat-pill {
        font-size: 12px;
        padding: 6px 13px;
    }
}



/* ===== From reviews.html ===== */
/* ─── RESET ─── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

/* ─── HEADER ─── */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ─── HERO ─── */
.reviews-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 55%,#2a1400 100%);
    padding: 56px 20px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .reviews-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .reviews-hero::after {
        content: '';
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.rh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.rh-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(28px,4vw,48px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

    .rh-title em {
        color: #fa990c;
        font-style: normal;
    }

.rh-sub {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    max-width: 480px;
    margin: 0 auto 28px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
/* Big rating display in hero */
.hero-rating {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 20px 36px;
    position: relative;
    z-index: 1;
}

.hero-rating-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 56px;
    font-weight: 700;
    color: #fa990c;
    line-height: 1;
}

.hero-stars {
    display: flex;
    gap: 4px;
    margin: 6px 0;
}

    .hero-stars i {
        color: #ffb400;
        font-size: 20px;
    }

.hero-rating-count {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    font-weight: 600;
}

.hero-badges {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.hb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,.65);
    font-weight: 600;
}

    .hb-item i {
        color: #fa990c;
        font-size: 13px;
    }

/* ─── RATING SUMMARY CARD ─── */
.rating-summary-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 0;
}

.rating-summary-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    margin-bottom: 24px;
}

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

.rs-big-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 64px;
    font-weight: 700;
    color: #fa990c;
    line-height: 1;
}

.rs-stars {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin: 8px 0;
}

    .rs-stars i {
        color: #ffb400;
        font-size: 22px;
    }

.rs-total {
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

.rs-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    margin-top: 10px;
}

.rs-right {
}

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rb-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rb-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

    .rb-label i {
        color: #ffb400;
        font-size: 11px;
    }

.rb-bar-wrap {
    flex: 1;
    height: 9px;
    background: #f0f0f0;
    border-radius: 20px;
    overflow: hidden;
}

.rb-bar {
    height: 100%;
    border-radius: 20px;
    transition: width 1.2s ease;
}

.rb-5 {
    background: linear-gradient(90deg,#18a34a,#22c55e);
}

.rb-4 {
    background: linear-gradient(90deg,#84cc16,#a3e635);
}

.rb-3 {
    background: linear-gradient(90deg,#eab308,#facc15);
}

.rb-2 {
    background: linear-gradient(90deg,#f97316,#fb923c);
}

.rb-1 {
    background: linear-gradient(90deg,#e02020,#f87171);
}

.rb-count {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    width: 40px;
    flex-shrink: 0;
}
/* Category ratings */
.cat-ratings {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f5;
}

.cat-rat-item {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 9px 14px;
    text-align: center;
}

.crn {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .crn i {
        color: #ffb400;
        font-size: 13px;
    }

.crl {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    margin-top: 2px;
}

/* ─── FILTERS + SORT BAR ─── */
.filter-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .filter-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .filter-btn.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

.filter-sep {
    width: 1px;
    height: 24px;
    background: #e8e8e8;
}

.sort-select {
    padding: 8px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 50px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    color: #555;
}

    .sort-select:focus {
        border-color: #fa990c;
    }

.filter-count {
    margin-left: auto;
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

/* Write review button */
.write-review-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .write-review-btn:hover {
        background: #fa990c;
    }

/* ─── REVIEWS GRID ─── */
.reviews-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Review card */
.review-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 22px;
    transition: .3s;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    position: relative;
}

    .review-card:hover {
        border-color: #e8d5b5;
        box-shadow: 0 6px 20px rgba(0,0,0,.07);
    }

    .review-card.featured-review {
        border-color: #fa990c;
        box-shadow: 0 4px 16px rgba(250,153,12,.1);
    }

/* Featured badge */
.feat-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}

/* Review header */
.review-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 13px;
}

.reviewer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    background: #fff7ec;
    color: #fa990c;
}

    .reviewer-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.reviewer-info {
    flex: 1;
}

.reviewer-name {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}

    .verified-badge i {
        font-size: 9px;
    }

.reviewer-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #aaa;
    flex-wrap: wrap;
}

    .reviewer-meta i {
        font-size: 10px;
        color: #fa990c;
    }

.review-stars {
    display: flex;
    gap: 3px;
}

    .review-stars i {
        color: #ffb400;
        font-size: 14px;
    }

        .review-stars i.half {
            color: #e0e0e0;
        }

/* Product tag */
.review-product-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f5;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    margin-bottom: 11px;
}

    .review-product-tag i {
        color: #fa990c;
        font-size: 10px;
    }

/* Review body */
.review-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 7px;
}

.review-body {
    font-size: 14px;
    color: #444;
    line-height: 1.75;
}

    .review-body.truncated {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.read-more-btn {
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 0 0;
    font-family: 'Outfit',sans-serif;
}

    .read-more-btn:hover {
        text-decoration: underline;
    }

/* Review images */
.review-images {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.review-img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid #f0f0f0;
    transition: .2s;
}

    .review-img:hover {
        border-color: #fa990c;
    }

    .review-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Review footer */
.review-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f8f8f8;
}

.helpful-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #aaa;
}

.rv-helpful-btn {
    padding: 4px 11px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .rv-helpful-btn:hover {
        border-color: #18a34a;
        color: #18a34a;
    }

    .rv-helpful-btn.voted {
        border-color: #18a34a;
        background: #ecfff0;
        color: #18a34a;
        pointer-events: none;
    }

.review-date {
    margin-left: auto;
    font-size: 11px;
    color: #ccc;
    font-weight: 600;
}

/* Owner reply */
.owner-reply {
    background: #f8f8f8;
    border-radius: 11px;
    padding: 13px;
    margin-top: 12px;
    border-left: 3px solid #fa990c;
}

.or-header {
    font-size: 11px;
    font-weight: 800;
    color: #fa990c;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .or-header i {
        font-size: 10px;
    }

.or-body {
    font-size: 13px;
    color: #555;
    line-height: 1.65;
}

/* Load more */
.load-more-wrap {
    text-align: center;
    margin-top: 20px;
}

.load-more-btn {
    padding: 13px 32px;
    background: #fff;
    color: #111;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .load-more-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* ─── SIDEBAR ─── */
.reviews-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sb-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.sb-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sb-title i {
        color: #fa990c;
    }

/* Platform ratings */
.platform-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    border-bottom: 1px solid #f8f8f8;
}

    .platform-row:last-child {
        border-bottom: none;
    }

.plat-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid #eaeaea;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.plat-info {
    flex: 1;
}

.plat-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.plat-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

    .plat-stars i {
        color: #ffb400;
        font-size: 11px;
    }

.plat-count {
    font-size: 11px;
    color: #aaa;
    margin-left: 2px;
}

.plat-score {
    font-size: 16px;
    font-weight: 800;
    color: #fa990c;
}

/* Top reviewers */
.top-reviewer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f8f8f8;
}

    .top-reviewer:last-child {
        border-bottom: none;
    }

.tr-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff7ec;
    color: #fa990c;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid #fde4b2;
}

.tr-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.tr-count {
    font-size: 11px;
    color: #aaa;
    margin-top: 1px;
}

.tr-stars {
    margin-left: auto;
    display: flex;
    gap: 2px;
}

    .tr-stars i {
        color: #ffb400;
        font-size: 10px;
    }

/* Write review form */
.write-form-card {
    background: linear-gradient(135deg,#fff9f0,#fff);
    border: 1.5px solid #fde4b2;
    border-radius: 18px;
    padding: 22px;
}

.wf-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .wf-title i {
        color: #fa990c;
    }

.wf-sub {
    font-size: 12px;
    color: #888;
    margin-bottom: 18px;
    line-height: 1.6;
}

.wf-stars-pick {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    cursor: pointer;
}

    .wf-stars-pick i {
        font-size: 26px;
        color: #e0e0e0;
        transition: .2s;
    }

        .wf-stars-pick i.active {
            color: #ffb400;
        }

.wf-inp {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #e3e3e3;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    margin-bottom: 10px;
}

    .wf-inp:focus {
        border-color: #fa990c;
        background: #fff;
    }

    .wf-inp::placeholder {
        color: #c0c0c0;
    }

textarea.wf-inp {
    resize: vertical;
    min-height: 88px;
}

.wf-submit {
    width: 100%;
    padding: 12px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

    .wf-submit:hover {
        background: #fa990c;
    }

    .wf-submit:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

/* Trust badges */
.trust-row-sm {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trust-sm-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

    .trust-sm-item i {
        color: #18a34a;
        font-size: 13px;
    }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .lightbox.open {
        display: flex;
    }

.lb-img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    object-fit: contain;
}

.lb-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    transition: .2s;
}

    .lb-close:hover {
        background: rgba(255,255,255,.3);
    }

/* ─── WRITE REVIEW MODAL ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 8000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(3px);
}

    .modal-overlay.open {
        display: flex;
    }

        .modal-overlay.open .modal-box {
            animation: modalIn .35s cubic-bezier(.22,1,.36,1) both;
        }

@keyframes modalIn {
    from {
        transform: translateY(30px) scale(.96);
        opacity: 0;
    }

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

.modal-box {
    background: #fff;
    border-radius: 22px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    position: relative;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #f5f5f5;
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 22px 22px 0 0;
    z-index: 1;
}

    .modal-head h3 {
        font-size: 17px;
        font-weight: 800;
        color: #111;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .modal-head h3 i {
            color: #fa990c;
        }

.modal-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    color: #888;
    transition: .2s;
}

    .modal-close-btn:hover {
        background: #fff5f5;
        color: #e02020;
        border-color: #e02020;
    }

.modal-body {
    padding: 22px;
}

/* Star picker in modal */
.star-pick-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}

.star-pick {
    font-size: 36px;
    cursor: pointer;
    transition: .2s;
    color: #e0e0e0;
    line-height: 1;
}

    .star-pick:hover, .star-pick.hov, .star-pick.sel {
        color: #ffb400;
        transform: scale(1.15);
    }

.m-inp {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    margin-bottom: 12px;
}

    .m-inp:focus {
        border-color: #fa990c;
        background: #fff;
    }

    .m-inp::placeholder {
        color: #bbb;
    }

textarea.m-inp {
    resize: vertical;
    min-height: 100px;
}

select.m-inp {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
}

.m-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
    display: block;
}

.m-submit {
    width: 100%;
    padding: 14px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .m-submit:hover {
        background: #fa990c;
    }

    .m-submit:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

.m-review-success {
    text-align: center;
    padding: 20px 0;
}

.m-rv-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg,#18a34a,#22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 28px;
    color: #fff;
    animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.m-review-success h3 {
    font-size: 19px;
    font-weight: 800;
    color: #111;
    margin-bottom: 7px;
}

.m-review-success p {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
}

/* ─── TOAST ─── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ─── FOOTER ─── */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ─── RESPONSIVE ─── */
@media(max-width:1024px) {
    .reviews-section {
        grid-template-columns: 1fr;
    }

    .reviews-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .rating-summary-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .rs-left {
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 18px;
        margin-bottom: 4px;
    }

    .cat-ratings {
        justify-content: center;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .reviews-hero {
        padding: 40px 16px 36px;
    }

    .rating-summary-section {
        padding: 20px 14px 0;
    }

    .filter-bar {
        padding: 0 14px 14px;
    }

    .reviews-section {
        padding: 0 14px 40px;
    }

    .filter-btn {
        font-size: 12px;
        padding: 7px 13px;
    }

    .write-review-btn {
        font-size: 12px;
        padding: 7px 14px;
    }

    .review-card {
        padding: 16px;
    }

    .review-images .review-img {
        width: 60px;
        height: 60px;
    }

    .reviews-sidebar {
        grid-template-columns: 1fr;
    }

    .modal-box {
        border-radius: 18px 18px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
    }

    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }

    .toast {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}



/* ===== From faq.html ===== */
/* ─── RESET ─── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

/* ─── HEADER ─── */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ─── HERO ─── */
.faq-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 55%,#2a1400 100%);
    padding: 56px 20px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .faq-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .faq-hero::after {
        content: '';
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.hero-h1 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(28px,4vw,48px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

    .hero-h1 em {
        color: #fa990c;
        font-style: normal;
    }

.hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
/* FAQ search bar */
.faq-search {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    position: relative;
    z-index: 1;
}

    .faq-search input {
        flex: 1;
        padding: 14px 20px;
        border: none;
        outline: none;
        font-size: 15px;
        font-family: 'Outfit',sans-serif;
        color: #111;
    }

        .faq-search input::placeholder {
            color: #bbb;
        }

.faq-search-btn {
    padding: 14px 22px;
    background: #fa990c;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .faq-search-btn:hover {
        background: #e8880a;
    }

.hero-stats {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

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

.hs-num {
    font-size: 22px;
    font-weight: 800;
    color: #fa990c;
}

.hs-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    font-weight: 600;
    margin-top: 2px;
}

/* ─── MAIN LAYOUT ─── */
.faq-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}

/* ─── SIDEBAR NAV ─── */
.faq-nav {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 18px;
    position: sticky;
    top: 84px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.faq-nav-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .faq-nav-title i {
        color: #fa990c;
    }

.faq-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.faq-nav-item a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: .2s;
}

    .faq-nav-item a:hover {
        background: #fff7ec;
        color: #fa990c;
    }

    .faq-nav-item a.active {
        background: #fff7ec;
        color: #fa990c;
    }

    .faq-nav-item a .nav-count {
        margin-left: auto;
        background: #f5f5f5;
        color: #888;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 10px;
    }

    .faq-nav-item a.active .nav-count {
        background: #fff0db;
        color: #fa990c;
    }

/* CTA in sidebar */
.faq-nav-cta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f5f5f5;
    text-align: center;
}

    .faq-nav-cta p {
        font-size: 12px;
        color: #888;
        margin-bottom: 10px;
        line-height: 1.6;
    }

    .faq-nav-cta a {
        display: block;
        padding: 9px 14px;
        background: #fa990c;
        color: #fff;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: .2s;
    }

        .faq-nav-cta a:hover {
            background: #e8880a;
        }

/* ─── FAQ MAIN ─── */
.faq-main {
}
/* No results */
.no-results {
    display: none;
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
}

    .no-results.show {
        display: block;
    }

.no-results-emoji {
    font-size: 48px;
    display: block;
    margin-bottom: 14px;
}

.no-results h3 {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 7px;
}

.no-results p {
    font-size: 14px;
    color: #888;
}

/* Category section */
.faq-category {
    margin-bottom: 28px;
}

.faq-cat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    border: 1px solid #eaeaea;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    cursor: pointer;
    transition: .2s;
}

    .faq-cat-header:hover {
        border-color: #fa990c;
    }

.faq-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.faq-cat-info {
    flex: 1;
}

.faq-cat-name {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
}

.faq-cat-desc {
    font-size: 12px;
    color: #888;
}

.faq-cat-count {
    background: #f5f5f5;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.faq-cat-toggle {
    color: #aaa;
    font-size: 13px;
    margin-left: 6px;
    transition: .3s;
}

.faq-category.collapsed .faq-cat-toggle {
    transform: rotate(-90deg);
}

/* FAQ items list */
.faq-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-category.collapsed .faq-items {
    display: none;
}

/* Individual FAQ */
.faq-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .25s;
}

    .faq-item:hover {
        border-color: #e8d5b5;
    }

    .faq-item.open {
        border-color: #fa990c;
        box-shadow: 0 4px 16px rgba(250,153,12,.08);
    }

    .faq-item.hidden {
        display: none;
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
    gap: 12px;
}

.faq-q-text {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    flex: 1;
    line-height: 1.45;
}

.faq-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    transition: .3s;
}

.faq-item.open .faq-arrow {
    background: #fa990c;
    color: #fff;
    border-color: #fa990c;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s ease;
}

.faq-item.open .faq-a {
    max-height: 600px;
}

.faq-a-inner {
    padding: 0 18px 18px;
    font-size: 14px;
    color: #555;
    line-height: 1.82;
    border-top: 1px solid #f5f5f5;
    padding-top: 14px;
}

    .faq-a-inner a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .faq-a-inner a:hover {
            text-decoration: underline;
        }

    .faq-a-inner strong {
        color: #111;
    }

/* Helpful voting */
.faq-helpful {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 14px;
    border-top: 1px dashed #f0f0f0;
}

    .faq-helpful span {
        font-size: 12px;
        color: #aaa;
        font-weight: 600;
    }

.helpful-btn {
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .helpful-btn:hover {
        border-color: #18a34a;
        color: #18a34a;
    }

    .helpful-btn.yes-voted {
        border-color: #18a34a;
        background: #ecfff0;
        color: #18a34a;
    }

    .helpful-btn.no-voted {
        border-color: #e02020;
        background: #fff5f5;
        color: #e02020;
    }

    .helpful-btn:hover:last-child {
        border-color: #e02020;
        color: #e02020;
    }

/* Search highlight */
.highlight {
    background: #fff3cd;
    border-radius: 3px;
    padding: 0 2px;
}

/* ─── CONTACT CTA ─── */
.faq-contact {
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2c1400 100%);
    border-radius: 22px;
    padding: 36px;
    text-align: center;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}

    .faq-contact::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -40px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.15),transparent 65%);
        pointer-events: none;
    }

    .faq-contact h3 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
    }

        .faq-contact h3 em {
            color: #fa990c;
            font-style: normal;
        }

    .faq-contact p {
        font-size: 14px;
        color: rgba(255,255,255,.65);
        margin-bottom: 22px;
        line-height: 1.7;
        position: relative;
        z-index: 1;
    }

.contact-methods {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cm-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    border: 1.5px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.8);
}

    .cm-btn:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

    .cm-btn.primary {
        background: #fa990c;
        border-color: #fa990c;
        color: #fff;
    }

        .cm-btn.primary:hover {
            background: #e8880a;
        }

    .cm-btn i {
        font-size: 14px;
    }

/* ─── RELATED SEARCHES ─── */
.rs-box {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    padding: 18px 22px;
    margin-top: 20px;
}

.rs-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rs-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ─── TOAST ─── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ─── FOOTER ─── */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ─── RESPONSIVE ─── */
@media(max-width:1024px) {
    .faq-page {
        grid-template-columns: 1fr;
    }

    .faq-nav {
        position: static;
    }

    .faq-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .faq-nav-item a {
        padding: 7px 12px;
    }

        .faq-nav-item a .nav-count {
            display: none;
        }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .faq-hero {
        padding: 40px 16px 36px;
    }

    .faq-page {
        padding: 20px 14px 40px;
    }

    .faq-cat-header {
        padding: 14px;
    }

    .faq-cat-name {
        font-size: 15px;
    }

    .faq-q {
        padding: 13px 14px;
    }

    .faq-q-text {
        font-size: 13px;
    }

    .faq-a-inner {
        padding: 0 14px 14px;
        padding-top: 12px;
    }

    .contact-methods {
        flex-direction: column;
        align-items: center;
    }

    .faq-contact {
        padding: 26px 18px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }

    .toast {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}



/* ===== From shipping-delivery.html ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 13px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ── POLICY PAGE LAYOUT ── */
.policy-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 20px 60px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}
/* Hero */
.policy-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 55%,#2a1400 100%);
    padding: 52px 20px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .policy-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .policy-hero::after {
        content: '';
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.ph-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.ph-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(26px,4vw,44px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

    .ph-title em {
        color: #fa990c;
        font-style: normal;
    }

.ph-meta {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    position: relative;
    z-index: 1;
}
/* Sidebar TOC */
.policy-toc {
    position: sticky;
    top: 84px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.toc-heading {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .toc-heading i {
        color: #fa990c;
    }

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .toc-list li a {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 9px;
        border-radius: 9px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        color: #555;
        transition: .2s;
        line-height: 1.35;
    }

        .toc-list li a::before {
            content: '';
            width: 12px;
            height: 2px;
            background: #fa990c;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .toc-list li a:hover {
            background: #fff7ec;
            color: #fa990c;
        }

        .toc-list li a.active {
            background: #fff7ec;
            color: #fa990c;
        }
/* Related policies */
.related-policies {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f5f5f5;
}

.rp-title {
    font-size: 12px;
    font-weight: 800;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.rp-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    transition: .2s;
    margin-bottom: 2px;
}

    .rp-link:hover {
        background: #fff7ec;
        color: #fa990c;
    }

    .rp-link i {
        color: #fa990c;
        font-size: 11px;
        flex-shrink: 0;
    }
/* Contact box in sidebar */
.toc-contact {
    margin-top: 14px;
    padding: 14px;
    background: linear-gradient(135deg,#111,#1a1a1a);
    border-radius: 12px;
    text-align: center;
}

.tcc-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.tcc-sub {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    margin-bottom: 10px;
    line-height: 1.5;
}

.tcc-btn {
    display: block;
    padding: 8px;
    background: #fa990c;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

    .tcc-btn:hover {
        background: #e8880a;
        color: #fff;
    }
/* Main content */
.policy-main {
}

.policy-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 40px 44px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    margin-bottom: 20px;
}
/* Policy typography */
.policy-body {
}

    .policy-body h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 22px;
        font-weight: 700;
        color: #111;
        margin: 32px 0 12px;
        padding-top: 8px;
        border-bottom: 2px solid #f5f5f5;
        padding-bottom: 10px;
        scroll-margin-top: 100px;
    }

        .policy-body h2:first-child {
            margin-top: 0;
        }

    .policy-body h3 {
        font-size: 15px;
        font-weight: 800;
        color: #222;
        margin: 20px 0 8px;
    }

    .policy-body p {
        font-size: 14px;
        color: #444;
        line-height: 1.85;
        margin-bottom: 14px;
    }

        .policy-body p:last-child {
            margin-bottom: 0;
        }

    .policy-body ul, .policy-body ol {
        margin: 0 0 14px 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .policy-body li {
        font-size: 14px;
        color: #444;
        line-height: 1.75;
    }

    .policy-body strong {
        color: #111;
    }

    .policy-body a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .policy-body a:hover {
            text-decoration: underline;
        }
/* Callout boxes */
.callout {
    border-radius: 13px;
    padding: 16px 18px;
    margin: 18px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.callout-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.callout-tip {
    background: #ecfff0;
    border: 1px solid #b8f0cc;
}

.callout-warn {
    background: #fff7ec;
    border: 1px solid #fde4b2;
}

.callout-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.2;
}

.callout-body strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
}

.callout-body p {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    margin: 0;
}
/* Policy table */
.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 18px;
    font-size: 13px;
}

    .policy-table th {
        background: #f8f8f8;
        color: #111;
        font-weight: 700;
        padding: 11px 14px;
        text-align: left;
        border: 1px solid #eaeaea;
    }

    .policy-table td {
        padding: 10px 14px;
        border: 1px solid #eaeaea;
        color: #444;
        vertical-align: top;
        line-height: 1.65;
    }

    .policy-table tr:nth-child(even) td {
        background: #fafafa;
    }
/* Last updated chip */
.updated-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f5;
    color: #888;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    margin-bottom: 20px;
}

    .updated-chip i {
        color: #fa990c;
        font-size: 10px;
    }
/* Section number badge */
.sec-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #fa990c;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}
/* Related searches */
.rs-box {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    padding: 18px 22px;
    margin-bottom: 20px;
}

.rs-box-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rs-box-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }
/* Footer */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }
/* Responsive */
@media(max-width:1024px) {
    .policy-page {
        grid-template-columns: 1fr;
    }

    .policy-toc {
        position: static;
    }

    .toc-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

        .toc-list li a {
            font-size: 11px;
            padding: 5px 8px;
        }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .policy-hero {
        padding: 40px 16px 36px;
    }

    .policy-page {
        padding: 20px 14px 40px;
    }

    .policy-card {
        padding: 24px 18px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }
}



/* ===== From dashboard.html ===== */
/* ════════════════════════════════════════
   RESET + BASE
════════════════════════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f4f5f7;
    color: #1a1a1a;
    overflow-x: hidden;
    font-size: 15px;
}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
header {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}

.top-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 66%;
        padding: 9px 18px;
        border-radius: 50px;
        border: 1.5px solid #ebebeb;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        outline: none;
        transition: .2s;
        background: #fafafa;
    }

        .search-wrap input:focus {
            border-color: #fa990c;
            background: #fff;
        }

.header-icons {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.hico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .hico:hover {
        background: #fff7ec;
    }

    .hico .bdg {
        position: absolute;
        top: -4px;
        right: -4px;
        background: #e02020;
        color: #fff;
        font-size: 10px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        border: 2px solid #fff;
    }
/* Customer name chip instead of login icon */
.customer-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff7ec;
    border: 1.5px solid #fde4b2;
    border-radius: 50px;
    padding: 5px 13px 5px 5px;
    cursor: pointer;
    transition: .2s;
    position: relative;
    text-decoration: none;
}

    .customer-chip:hover {
        background: #fff0d0;
        border-color: #fa990c;
    }

.customer-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.customer-chip-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}

.customer-dropdown {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    min-width: 190px;
    overflow: hidden;
    display: none;
    z-index: 999;
}

.customer-chip:hover .customer-dropdown,
.customer-chip.open .customer-dropdown {
    display: block;
}

.cd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: .2s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    font-family: 'Outfit',sans-serif;
}

    .cd-item:hover {
        background: #fff7ec;
        color: #fa990c;
    }

    .cd-item i {
        font-size: 13px;
        color: #fa990c;
        width: 16px;
    }

.cd-sep {
    height: 1px;
    background: #f5f5f5;
    margin: 3px 0;
}

.cd-item.logout {
    color: #e02020;
}

    .cd-item.logout i {
        color: #e02020;
    }

    .cd-item.logout:hover {
        background: #fff5f5;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .menu-btn span {
        width: 22px;
        height: 2px;
        background: #111;
        border-radius: 3px;
        display: block;
        transition: .3s;
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -360px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 18px 14px;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
    transition: .4s cubic-bezier(.4,0,.2,1);
    z-index: 9999;
    overflow: auto;
}

    .side-menu.open {
        right: 0;
    }

.sm-close {
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
    color: #888;
    background: none;
    border: none;
}

    .sm-close:hover {
        color: #fa990c;
    }

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #f2f2f2;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    padding: 6px 0;
}

    .menu-link b {
        font-size: 20px;
        line-height: 1;
        transition: .3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

    .dropdown a {
        text-decoration: none;
        color: #666;
        font-size: 13px;
        padding: 7px 10px;
        display: block;
        transition: .2s;
        border-radius: 7px;
    }

        .dropdown a:hover {
            color: #fa990c;
            background: #fff7ec;
            padding-left: 14px;
        }

.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border-bottom: 1px solid #f0e8d8;
    background: #fff;
}

.cat-item {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid #f0e8d8;
    font-size: 20px;
    cursor: pointer;
    transition: .2s;
}

    .cat-item p {
        margin-top: 3px;
        font-size: 10px;
        color: #555;
        font-weight: 600;
    }

    .cat-item:hover {
        background: #fff7ec;
    }

        .cat-item:hover p {
            color: #fa990c;
        }

.breadcrumb-bar {
    background: #fff;
    padding: 9px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

    .breadcrumb-bar a {
        color: #999;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 700;
    }

/* ════════════════════════════════════════
   DASHBOARD LAYOUT
════════════════════════════════════════ */
.dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* ════════════════════════════════════════
   SIDEBAR NAV
════════════════════════════════════════ */
.dash-sidebar {
    position: sticky;
    top: 84px;
}
/* Profile mini card */
.profile-mini {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 22px;
    text-align: center;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.pm-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
}

.pm-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg,#fa990c,#e8880a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(250,153,12,.3);
    font-family: 'Outfit',sans-serif;
}

.pm-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    color: #fff;
}

.pm-name {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
}

.pm-mobile {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

.pm-loyalty {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff7ec;
    border: 1px solid #fde4b2;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
}

    .pm-loyalty i {
        font-size: 11px;
    }

/* Nav list */
.dash-nav {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    transition: .2s;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #f5f5f5;
    border-left: 3px solid transparent;
}

    .dash-nav-item:last-child {
        border-bottom: none;
    }

    .dash-nav-item:hover {
        background: #fff7ec;
        color: #fa990c;
        border-left-color: #fa990c;
    }

    .dash-nav-item.active {
        background: #fff7ec;
        color: #fa990c;
        border-left-color: #fa990c;
        font-weight: 700;
    }

    .dash-nav-item i {
        font-size: 16px;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
    }

    .dash-nav-item.active i {
        color: #fa990c;
    }

.nav-badge {
    margin-left: auto;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}

/* ════════════════════════════════════════
   MAIN CONTENT PANEL — show/hide sections
════════════════════════════════════════ */
.dash-main {
}

.dash-section {
    display: none;
}

    .dash-section.active {
        display: block;
    }

/* Section header */
.sec-header {
    margin-bottom: 22px;
}

.sec-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 28px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: 4px;
}

    .sec-title em {
        color: #fa990c;
        font-style: normal;
    }

.sec-subtitle {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
}

/* ════════════════════════════════════════
   SUMMARY CARDS (Dashboard overview)
════════════════════════════════════════ */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.sum-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 18px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

    .sum-card:hover {
        border-color: #fa990c;
        transform: translateY(-3px);
        box-shadow: 0 8px 22px rgba(250,153,12,.1);
    }

.sum-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 10px;
}

.si-orange {
    background: #fff7ec;
    color: #fa990c;
}

.si-green {
    background: #ecfff0;
    color: #18a34a;
}

.si-blue {
    background: #eff6ff;
    color: #2563eb;
}

.si-purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.sum-num {
    font-size: 26px;
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.sum-lbl {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-top: 4px;
}

/* Recent activity strip on dashboard */
.activity-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .activity-title i {
        color: #fa990c;
    }

/* ════════════════════════════════════════
   ORDER LIST
════════════════════════════════════════ */
/* Filter pills */
.order-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ofilter {
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
}

    .ofilter:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .ofilter.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

.order-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    margin-bottom: 14px;
    overflow: hidden;
    transition: .3s;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

    .order-card:hover {
        border-color: #e8d5b5;
        box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }

/* Order header */
.order-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid #f5f5f5;
    flex-wrap: wrap;
}

.order-id {
    font-size: 14px;
    font-weight: 800;
    color: #111;
}

.order-date {
    font-size: 12px;
    color: #888;
}

.order-status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    margin-left: auto;
    flex-shrink: 0;
}

.os-delivered {
    background: #ecfff0;
    color: #18a34a;
}

.os-processing {
    background: #eff6ff;
    color: #2563eb;
}

.os-cancelled {
    background: #fff5f5;
    color: #e02020;
}

.os-pending {
    background: #fff7ec;
    color: #fa990c;
}

/* Order body */
.order-body {
    padding: 14px 18px;
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oi-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}

    .oi-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.oi-info {
    flex: 1;
}

.oi-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.oi-meta {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.oi-price {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    flex-shrink: 0;
}

/* Order footer */
.order-footer {
    padding: 12px 18px;
    background: #fafafa;
    border-top: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.order-total {
    font-size: 14px;
    font-weight: 800;
    color: #111;
}

    .order-total span {
        color: #888;
        font-weight: 600;
    }

.order-footer-btns {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.obtn {
    padding: 7px 15px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .obtn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .obtn.primary {
        background: #111;
        color: #fff;
        border-color: #111;
    }

        .obtn.primary:hover {
            background: #fa990c;
            border-color: #fa990c;
        }

    .obtn.green {
        background: #ecfff0;
        color: #18a34a;
        border-color: #b8f0cc;
    }

/* Order tracking timeline (inside order) */
.order-tracking {
    margin: 14px 0 2px;
   /* display: flex;*/
    gap: 0;
    position: relative;
}

    .order-tracking::before {
        content: '';
        position: absolute;
        top: 14px;
        left: 0;
        right: 0;
        height: 2px;
        background: #e8e8e8;
        z-index: 0;
    }

.ot-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ot-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 7px;
    font-size: 12px;
    border: 2px solid #e8e8e8;
    background: #fff;
    transition: .3s;
}

    .ot-dot.done {
        background: #18a34a;
        border-color: #18a34a;
        color: #fff;
    }

    .ot-dot.active {
        background: #fa990c;
        border-color: #fa990c;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(250,153,12,.2);
    }

    .ot-dot.pending {
        background: #fff;
        border-color: #e8e8e8;
        color: #ccc;
    }

.ot-label {
    font-size: 10px;
    font-weight: 700;
    color: #888;
}

.ot-step .ot-label.done {
    color: #18a34a;
}

.ot-step .ot-label.active {
    color: #fa990c;
}

/* ════════════════════════════════════════
   PROFILE UPDATE
════════════════════════════════════════ */
.profile-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    margin-bottom: 18px;
}
/* Avatar upload */
.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f5f5f5;
}

.avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg,#fa990c,#e8880a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    position: relative;
}

.avatar-upload-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    background: #f5f5f5;
    color: #333;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid #e8e8e8;
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .avatar-upload-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

.avatar-info {
    font-size: 12px;
    color: #aaa;
    margin-top: 5px;
}

/* Form fields */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

    .form-grid.full {
        grid-template-columns: 1fr;
    }

.f-group {
    display: flex;
    flex-direction: column;
}

.f-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .f-label .req {
        color: #fa990c;
    }

.f-input {
    padding: 12px 14px;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    color: #111;
}

    .f-input:focus {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .f-input::placeholder {
        color: #c0c0c0;
    }

    .f-input:disabled {
        background: #f5f5f5;
        color: #999;
        cursor: not-allowed;
    }

select.f-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    padding-right: 30px;
}

/* Mobile field with prefix */
.mobile-field {
    display: flex;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    overflow: hidden;
    background: #fafafa;
    transition: .2s;
}

    .mobile-field:focus-within {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

.mob-prefix {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    font-size: 14px;
    font-weight: 700;
    color: #444;
    border-right: 1.5px solid #e3e3e3;
    flex-shrink: 0;
    background: #f5f5f5;
}

.mob-inp {
    flex: 1;
    padding: 12px 14px;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    background: transparent;
    color: #111;
}

    .mob-inp::placeholder {
        color: #c0c0c0;
    }

/* Verified badge inline */
.verified-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #18a34a;
    margin-top: 5px;
}

    .verified-inline i {
        font-size: 10px;
    }

/* Save button */
.save-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
}

    .save-btn:hover {
        background: #fa990c;
    }

    .save-btn.saving {
        background: #fa990c;
        pointer-events: none;
    }

/* Password change section */
.change-password-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #f8f8f8;
    border-radius: 12px;
    border: 1px solid #eaeaea;
}

.cpw-info {
}

.cpw-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.cpw-sub {
    font-size: 12px;
    color: #888;
}

.cpw-btn {
    padding: 8px 16px;
    border-radius: 9px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .cpw-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* Preferences / notification toggles */
.pref-section {
    margin-top: 18px;
}

.pref-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
}

.pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

    .pref-row:last-child {
        border-bottom: none;
    }

.pref-info-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.pref-info-sub {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
/* Toggle switch */
.toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: #e0e0e0;
    border-radius: 24px;
    transition: .3s;
    cursor: pointer;
}

    .toggle-slider:before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: .3s;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }

.toggle input:checked + .toggle-slider {
    background: #18a34a;
}

    .toggle input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

/* ════════════════════════════════════════
   ADDRESSES
════════════════════════════════════════ */
.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.address-card {
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #eaeaea;
    padding: 18px;
    transition: .3s;
    position: relative;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

    .address-card:hover {
        border-color: #e8d5b5;
    }

    .address-card.default-addr {
        border-color: #fa990c;
        box-shadow: 0 4px 16px rgba(250,153,12,.1);
    }

.addr-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.atb-home {
    background: #ecfff0;
    color: #18a34a;
}

.atb-office {
    background: #eff6ff;
    color: #2563eb;
}

.atb-other {
    background: #f5f3ff;
    color: #7c3aed;
}

.default-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}

.addr-name {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 3px;
}

.addr-phone {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

.addr-text {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 12px;
}

.addr-actions {
    display: flex;
    gap: 7px;
}

.addr-btn {
    padding: 6px 13px;
    border-radius: 8px;
    border: 1.5px solid #e8e8e8;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .addr-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .addr-btn.delete:hover {
        border-color: #e02020;
        color: #e02020;
    }

    .addr-btn.set-default {
        border-color: #18a34a;
        color: #18a34a;
        background: #ecfff0;
    }

/* Add new address card */
.add-addr-card {
    background: #fff;
    border-radius: 16px;
    border: 1.5px dashed #e8e8e8;
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

    .add-addr-card:hover {
        border-color: #fa990c;
        background: #fffdf9;
    }

.add-addr-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ccc;
    margin-bottom: 10px;
    transition: .3s;
}

.add-addr-card:hover .add-addr-icon {
    background: #fff7ec;
    color: #fa990c;
}

.add-addr-text {
    font-size: 13px;
    font-weight: 700;
    color: #888;
}

.add-addr-card:hover .add-addr-text {
    color: #fa990c;
}

/* Address form panel (shows when adding/editing) */
.addr-form-panel {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 26px;
    margin-top: 4px;
    display: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

    .addr-form-panel.show {
        display: block;
    }

.afp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f5f5f5;
}

.afp-title {
    font-size: 16px;
    font-weight: 800;
    color: #111;
}

.afp-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    transition: .2s;
}

    .afp-close:hover {
        background: #fff5f5;
        border-color: #e02020;
        color: #e02020;
    }
/* Address type tabs */
.addr-type-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.att-item {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
}

    .att-item.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* ════════════════════════════════════════
   REVIEWS — write review on orders
════════════════════════════════════════ */
.review-order-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.roc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f5f5f5;
}

.roc-order-info {
    flex: 1;
}

.roc-order-id {
    font-size: 12px;
    font-weight: 700;
    color: #888;
}

.roc-date {
    font-size: 12px;
    color: #aaa;
}

.roc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    background: #ecfff0;
    color: #18a34a;
    padding: 3px 9px;
    border-radius: 20px;
}

/* Product to review */
.roc-products {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.roc-product {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f8f8f8;
}

    .roc-product:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.roc-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

    .roc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.roc-product-info {
    flex: 1;
}

.roc-product-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 3px;
}

.roc-product-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

/* Inline star picker */
.star-picker-inline {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.spi {
    font-size: 22px;
    cursor: pointer;
    color: #e0e0e0;
    transition: .15s;
    line-height: 1;
}

    .spi:hover, .spi.hov, .spi.sel {
        color: #ffb400;
        transform: scale(1.15);
    }

/* Already reviewed badge */
.reviewed-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}
/* Review expand form */
.roc-review-form {
    background: #f8f8f8;
    border-radius: 11px;
    padding: 12px;
    margin-top: 8px;
    display: none;
}

    .roc-review-form.show {
        display: block;
    }

.roc-review-inp {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #e3e3e3;
    border-radius: 9px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    resize: vertical;
    min-height: 76px;
    transition: .2s;
    background: #fff;
}

    .roc-review-inp:focus {
        border-color: #fa990c;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .roc-review-inp::placeholder {
        color: #bbb;
    }

.roc-submit-btn {
    margin-top: 9px;
    padding: 9px 18px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .roc-submit-btn:hover {
        background: #fa990c;
    }

.write-review-btn {
    padding: 7px 15px;
    background: #fff;
    color: #111;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .write-review-btn:hover {
        border-color: #fa990c;
        color: #fff;
    }

/* My reviews tab */
.my-reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-review-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.mrc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mrc-img {
    width: 46px;
    height: 46px;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
}

    .mrc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mrc-product {
    font-size: 13px;
    font-weight: 800;
    color: #111;
}

.mrc-date {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

.mrc-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 2px;
}

    .mrc-stars i {
        color: #ffb400;
        font-size: 13px;
    }

.mrc-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
}

.mrc-body {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

.mrc-actions {
    display: flex;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
}

.mrc-act-btn {
    padding: 5px 12px;
    border-radius: 7px;
    border: 1.5px solid #e8e8e8;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .mrc-act-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .mrc-act-btn.del:hover {
        border-color: #e02020;
        color: #e02020;
    }

/* Review tabs */
.review-tabs {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #e8e8e8;
    overflow: hidden;
    margin-bottom: 18px;
}

.rtab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    color: #555;
    border-right: 1.5px solid #e8e8e8;
}

    .rtab:last-child {
        border-right: none;
    }

    .rtab:hover {
        background: #fff7ec;
        color: #fa990c;
    }

    .rtab.active {
        background: #fa990c;
        color: #fff;
    }

/* ════════════════════════════════════════
   LOYALTY / WALLET
════════════════════════════════════════ */
.loyalty-banner {
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2a1400 100%);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

    .loyalty-banner::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -40px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.2),transparent 65%);
        pointer-events: none;
    }

.lb-icon {
    font-size: 40px;
    position: relative;
    z-index: 1;
}

.lb-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.lb-pts {
    font-family: 'Cormorant Garamond',serif;
    font-size: 36px;
    font-weight: 700;
    color: #fa990c;
    line-height: 1;
}

.lb-lbl {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
}

.lb-sub {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    margin-top: 4px;
}

.lb-redeem-btn {
    padding: 11px 22px;
    background: #fa990c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    position: relative;
    z-index: 1;
}

    .lb-redeem-btn:hover {
        background: #e8880a;
    }

/* ════════════════════════════════════════
   MODALS (shared)
════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 8000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(3px);
}

    .modal-overlay.open {
        display: flex;
    }

        .modal-overlay.open .modal-box {
            animation: mIn .3s cubic-bezier(.22,1,.36,1) both;
        }

@keyframes mIn {
    from {
        transform: translateY(28px) scale(.96);
        opacity: 0;
    }

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

.modal-box {
    background: #fff;
    border-radius: 22px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    position: relative;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    top: 0;
    background: #fff;
    border-radius: 22px 22px 0 0;
    z-index: 1;
}

    .modal-head h3 {
        font-size: 16px;
        font-weight: 800;
        color: #111;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .modal-head h3 i {
            color: #fa990c;
        }

.modal-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    transition: .2s;
}

    .modal-close:hover {
        background: #fff5f5;
        border-color: #e02020;
        color: #e02020;
    }

.modal-body {
    padding: 20px;
}

/* Success modal */
.modal-success {
    text-align: center;
    padding: 28px 20px;
}

.ms-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg,#18a34a,#22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 26px;
    color: #fff;
    animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ms-title {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.ms-body {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* ════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
}

.empty-emoji {
    font-size: 48px;
    display: block;
    margin-bottom: 14px;
}

.empty-title {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    margin-bottom: 7px;
}

.empty-sub {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    background: #111;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    transform: translateY(60px);
    opacity: 0;
    transition: .35s;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}

    .toast.show {
        transform: translateY(0);
        opacity: 1;
    }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.interlink-footer {
    background: #091426;
    padding: 18px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 22px;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 9px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 13px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 5px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 18px;
    right: 5%;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.main-footer {
    background: #171717;
    color: #fff;
    padding: 48px 20px 20px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.main-footer .footer-column h3 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 5px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: .3s;
            font-size: 13px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
            }

.footer-logo {
    width: 120px;
    margin-bottom: 18px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
    margin-bottom: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.8;
    font-size: 13px;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

    .social-icons a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: .3s;
        font-size: 13px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 12px;
        transition: .3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 12px;
    }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:1024px) {
    .dashboard {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dash-sidebar {
        position: static;
    }

    .profile-mini {
        display: none;
    }

    .dash-nav {
        display: none;
        overflow-x: auto;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        margin-bottom: 0;
    }

    .dash-nav-item {
        border-bottom: none;
        flex: 0 0 auto;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 11px 14px;
        white-space: nowrap;
        font-size: 13px;
    }

        .dash-nav-item.active {
            border-bottom-color: #fa990c;
            border-left: none;
        }

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

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media(max-width:768px) {
    .top-header {
        flex-wrap: wrap;
    }

    .search-wrap {
        display: none;
        width: 100%;
        order: 3;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            border-radius: 10px;
            padding: 9px 14px;
        }

    .header-icons {
        margin-left: auto;
    }

    .hico {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
    }

    .cat-item {
        padding: 6px 2px;
        font-size: 16px;
    }

        .cat-item p {
            font-size: 9px;
        }

    .customer-chip-name {
        display: none;
    }

    .dashboard {
        padding: 14px 14px 40px;
    }

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

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

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

    .order-footer-btns {
        width: 100%;
        justify-content: flex-end;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        max-height: 380px;
    }

    .toast {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

@media(max-width:480px) {
    .summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .order-tracking {
        overflow-x: auto;
    }

    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-box {
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 88vh;
    }
}



/* ===== From dry-cakes-delhi.html ===== */
/* ============================================================
   BASE RESET — same as home page
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit',sans-serif;
    background: #f5f5f5;
    color: #222;
    overflow-x: hidden;
}

/* ============================================================
   HEADER — copied verbatim from home page
   ============================================================ */
header {
    padding: 5px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: white;
    z-index: 999;
}

.top-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    font-size: 34px;
    font-family: 'Cormorant Garamond',serif;
    font-weight: 700;
}

.search-wrap {
    flex: 1;
}

    .search-wrap input {
        width: 70%;
        padding: 10px 30px;
        border-radius: 50px;
        border: 1px solid #ddd;
        font-size: 15px;
    }

.menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

    .menu-btn span {
        width: 30px;
        height: 3px;
        background: #000;
        border-radius: 5px;
        display: block;
    }

.header-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 20px;
    text-decoration: none;
}

    .icon span {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #d10000;
        color: white;
        font-size: 11px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.search-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

/* SIDE MENU */
.side-menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100%;
    background: white;
    padding: 10px;
    box-shadow: -10px 0 30px rgba(0,0,0,.1);
    transition: .5s;
    z-index: 9999;
    overflow: auto;
}

.close-btn {
    font-size: 24px;
    margin-bottom: 20px;
    cursor: pointer;
}

.menu-list {
    list-style: none;
}

.menu-item {
    border-bottom: 1px solid #e5e5e5;
    padding: 18px 0;
}

.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

    .menu-link b {
        font-size: 30px;
        transition: 0.3s;
    }

.menu-item.active .menu-link b {
    transform: rotate(45deg);
}

.dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 20px;
}

    .dropdown a {
        text-decoration: none;
        color: #6d6d6d;
        font-size: 16px;
        padding-top: 2px;
        transition: 0.3s;
    }

        .dropdown a:hover {
            color: #000;
            transform: translateX(5px);
        }

/* TOP CATEGORIES — same as home */
.top-categories {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    border: 1px solid #E6A032;
    border-radius: 0;
    overflow: hidden;
    background: white;
}

.cat-item {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #E6A032;
    font-size: 28px;
    cursor: pointer;
    transition: 0.2s;
}

    .cat-item p {
        margin-top: 10px;
        font-size: 16px;
    }

    .cat-item:hover {
        background: #fff7f0;
    }

        .cat-item:hover p {
            color: #ff7a00;
        }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-bar {
    background: #fff;
    padding: 12px 40px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #888;
}

    .breadcrumb-bar a {
        color: #888;
        text-decoration: none;
    }

        .breadcrumb-bar a:hover {
            color: #fa990c;
        }

    .breadcrumb-bar span {
        color: #222;
        font-weight: 600;
    }

/* ============================================================
   PAGE LAYOUT — listing wrapper
   ============================================================ */
.listing-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 40px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

/* ============================================================
   LEFT FILTER SIDEBAR (desktop)
   ============================================================ */
.filter-sidebar {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e3e6eb;
    padding: 24px;
    position: sticky;
    top: 80px;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .filter-header h3 {
        font-size: 18px;
        font-weight: 700;
        color: #111;
    }

.clear-filters {
    font-size: 13px;
    color: #fa990c;
    cursor: pointer;
    font-weight: 600;
    border: none;
    background: none;
    text-decoration: underline;
}

.filter-group {
    border-top: 1px solid #f0f0f0;
    padding: 16px 0;
}

.filter-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    cursor: pointer;
    margin-bottom: 12px;
}

    .filter-group-title i {
        font-size: 12px;
        color: #888;
        transition: 0.3s;
    }

.filter-group.open .filter-group-title i {
    transform: rotate(180deg);
}

.filter-body {
    display: none;
}

.filter-group.open .filter-body {
    display: block;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    transition: 0.2s;
}

    .filter-option:hover {
        color: #fa990c;
    }

    .filter-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #fa990c;
        cursor: pointer;
        flex-shrink: 0;
    }

.filter-count {
    margin-left: auto;
    background: #f5f5f5;
    color: #888;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
}

/* Price range */
.price-range-wrap {
    padding: 4px 0;
}

.price-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

    .price-inputs input {
        width: 80px;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 13px;
        font-family: 'Outfit',sans-serif;
    }

.price-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,#fa990c 0%,#fa990c 60%,#e0e0e0 60%);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

    .price-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        background: #fa990c;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(250,153,12,0.4);
    }

/* Rating filter stars */
.star-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: #444;
}

    .star-filter i {
        color: #ffb400;
        font-size: 13px;
    }

    .star-filter:hover {
        color: #fa990c;
    }

    .star-filter input {
        accent-color: #fa990c;
        cursor: pointer;
    }

/* ============================================================
   RIGHT — PRODUCTS AREA
   ============================================================ */
.products-area {
}

/* Page heading */
.listing-heading {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e3e6eb;
    padding: 24px 28px;
    margin-bottom: 24px;
}

    .listing-heading h1 {
        font-size: 28px;
        font-weight: 800;
        color: #111;
        margin-bottom: 6px;
    }

    .listing-heading p {
        font-size: 14px;
        color: #888;
    }

/* Sort + result row */
.sort-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.result-count {
    font-size: 14px;
    color: #666;
}

    .result-count strong {
        color: #111;
    }

.sort-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sort-wrap label {
        font-size: 14px;
        color: #666;
    }

.sort-select {
    padding: 9px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    background: #fff;
    cursor: pointer;
    outline: none;
}

    .sort-select:focus {
        border-color: #fa990c;
    }

/* Mobile filter toggle */
.mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Outfit',sans-serif;
    cursor: pointer;
}

/* ============================================================
   PRODUCT GRID — same class + structure as home page
   ============================================================ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
}

/* PRODUCT CARD — same as home page */
.product-card {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #e3e6eb;
    transition: 0.35s ease;
    position: relative;
}

    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    }

.product-image {
    position: relative;
    height: 240px;
    overflow: hidden;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.4s ease;
    }

.product-card:hover img {
    transform: scale(1.05);
}

/* Wishlist */
.wishlist-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #b5b5b5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: 0.3s;
    z-index: 2;
    border: none;
}

    .wishlist-btn:hover {
        color: #ff4f70;
    }

    .wishlist-btn.active {
        color: #ff4f70;
    }

/* Badges */
.label-wrap {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.hot {
    background: #ff4d4d;
    color: white;
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 30px;
    font-weight: 700;
}

.sale {
    background: black;
    color: white;
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 30px;
    font-weight: 700;
}

/* Orange overlay + add-to-cart button */
.product-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,136,0,0.38);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: 0.35s ease;
    z-index: 2;
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.add-cart-btn {
    background: #fff;
    color: #ff7a00;
    border: none;
    outline: none;
    padding: 12px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(70px);
    transition: 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    font-family: 'Outfit',sans-serif;
    white-space: nowrap;
}

.product-card:hover .add-cart-btn {
    transform: translateY(0);
}

.add-cart-btn:hover {
    background: #111;
    color: #fff;
}

/* Quantity control (replaces add-to-cart after adding) */
.qty-control {
    display: none;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

    .qty-control.visible {
        display: flex;
    }

.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #111;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-family: 'Outfit',sans-serif;
}

    .qty-btn:hover {
        background: #fa990c;
    }

.qty-count {
    min-width: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #111;
    padding: 0 4px;
}

/* Product content */
.product-content {
    padding: 16px 18px 18px;
}

.product-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
    margin-bottom: 8px;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.price {
    font-size: 17px;
    font-weight: 700;
    color: #111;
}

.old-price {
    font-size: 14px;
    color: #b9b9b9;
    text-decoration: line-through;
}

.discount {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #18a34a;
    padding: 4px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}

.bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6f6f7d;
}

    .rating i {
        color: #ffb400;
    }

.delivery-tag {
    background: #f3e8ff;
    color: #7c3aed;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}

.fast-delivery {
    background: #ffe7ff;
    color: #c026d3;
}

/* Cart indicator on card (bottom bar) */
.cart-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: #fff7ec;
    border-top: 1px solid #ffe0b2;
}

    .cart-bar.show {
        display: flex;
    }

    .cart-bar .qty-control {
        display: flex;
        box-shadow: none;
        background: transparent;
    }

    .cart-bar .qty-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
    }

    .cart-bar .qty-count {
        font-size: 14px;
        font-weight: 700;
        color: #111;
    }

.cart-bar-price {
    font-size: 14px;
    font-weight: 700;
    color: #fa990c;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.pg-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e3e6eb;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Outfit',sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pg-btn:hover, .pg-btn.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

.pg-dots {
    color: #888;
    padding: 0 4px;
}

/* ============================================================
   SEO / AEO SECTIONS BELOW LISTING
   ============================================================ */
.seo-section {
    max-width: 1440px;
    margin: 50px auto 0;
    padding: 0 40px 60px;
}

/* WHY CHOOSE */
.why-choose {
    background: #fff;
    border-radius: 24px;
    padding: 50px 40px;
    border: 1px solid #e3e6eb;
    margin-bottom: 40px;
}

    .why-choose h2 {
        font-size: 26px;
        font-weight: 800;
        color: #111;
        margin-bottom: 8px;
    }

    .why-choose .sub {
        color: #888;
        font-size: 14px;
        margin-bottom: 36px;
    }

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

.why-card {
    text-align: center;
    padding: 24px 16px;
    background: #fafafa;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}

    .why-card:hover {
        background: #fff7ec;
        border-color: #fa990c;
        transform: translateY(-4px);
    }

    .why-card .icon-circle {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #fff7ec;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        font-size: 28px;
    }

    .why-card h3 {
        font-size: 15px;
        font-weight: 700;
        color: #111;
        margin-bottom: 6px;
    }

    .why-card p {
        font-size: 13px;
        color: #888;
        line-height: 1.6;
    }

/* FAQ AEO */
.faq-section {
    background: #fff;
    border-radius: 24px;
    padding: 50px 40px;
    border: 1px solid #e3e6eb;
    margin-bottom: 40px;
}

    .faq-section h2 {
        font-size: 26px;
        font-weight: 800;
        color: #111;
        margin-bottom: 8px;
        margin-left:15px;
    }

    .faq-section .sub {
        color: #888;
        font-size: 14px;
        margin-bottom: 36px;
        margin-left: 15px;
    }

.faq-item {
    border-bottom: 1px solid #f0f0f0;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

    .faq-q i {
        font-size: 12px;
        color: #888;
        transition: 0.3s;
    }

.faq-item.open .faq-q i {
    transform: rotate(180deg);
}

.faq-a {
    display: none;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    padding-bottom: 16px;
}

.faq-item.open .faq-a {
    display: block;
}

/* Related searches / interlinking */
.related-searches {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    border: 1px solid #e3e6eb;
    margin-bottom: 40px;
}

    .related-searches h2 {
        font-size: 22px;
        font-weight: 800;
        color: #111;
        margin-bottom: 20px;
    }

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-tag {
    padding: 9px 18px;
    border: 1px solid #e3e6eb;
    border-radius: 50px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    transition: 0.2s;
    background: #fafafa;
}

    .search-tag:hover {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* About the category */
.about-category {
    background: #fff;
    border-radius: 24px;
    padding: 50px 40px;
    border: 1px solid #e3e6eb;
}

    .about-category h2 {
        font-size: 26px;
        font-weight: 800;
        color: #111;
        margin-bottom: 18px;
    }

    .about-category p {
        font-size: 15px;
        color: #555;
        line-height: 1.9;
        margin-bottom: 16px;
    }

    .about-category h3 {
        font-size: 18px;
        font-weight: 700;
        color: #111;
        margin: 24px 0 10px;
    }

/* ============================================================
   INTERLINK FOOTER + MAIN FOOTER — same as home page
   ============================================================ */
.interlink-footer {
    background: #091426;
    padding: 20px 5%;
    position: relative;
}

.footer-wrap {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 50px;
    overflow: hidden;
    max-height: 40px;
    transition: max-height .5s ease;
}

    .footer-wrap.active {
        max-height: 3000px;
    }

.interlink-footer .footer-column h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 30px;
    position: relative;
}

.interlink-footer .footer-column ul {
    list-style: none;
}

.interlink-footer .footer-column li {
    margin-bottom: 14px;
}

.interlink-footer .footer-column a {
    text-decoration: none;
    color: #aeb4c1;
    font-size: 16px;
    transition: .3s;
}

    .interlink-footer .footer-column a:hover {
        color: #fff;
        padding-left: 8px;
    }

.footer-btn-wrap {
    position: absolute;
    top: 20px;
    right: 5%;
    font-size: 12px;
}

    .footer-btn-wrap button {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 13px;
    }

/* MAIN FOOTER */
.main-footer {
    background: #171717;
    color: #fff;
    padding: 70px 20px 25px;
    font-family: 'Outfit',sans-serif;
}

.footer-container {
    max-width: 1400px;
    margin: auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.main-footer .footer-column h3 {
    font-size: 18px;
    margin-bottom: 25px;
    font-weight: 700;
    color: #fff;
}

.main-footer .footer-column ul {
    list-style: none;
}

    .main-footer .footer-column ul li {
        margin-bottom: 6px;
    }

        .main-footer .footer-column ul li a {
            color: #b9b9b9;
            text-decoration: none;
            transition: 0.3s;
            font-size: 14px;
        }

            .main-footer .footer-column ul li a:hover {
                color: #fff;
                padding-left: 4px;
            }

.footer-logo {
    width: 150px;
    margin-bottom: 25px;
}

.footer-brand p {
    color: #bdbdbd;
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 25px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .footer-contact a {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }

.footer-address {
    color: #bdbdbd;
    line-height: 1.9;
    font-size: 16px;
}

.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

    .social-icons a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #252525;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: 0.3s;
        font-size: 14px;
    }

        .social-icons a:hover {
            background: #fff;
            color: #111;
        }

.footer-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .footer-middle a {
        color: #bdbdbd;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
    }

        .footer-middle a:hover {
            color: #fff;
        }

.footer-bottom {
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

    .footer-bottom p {
        color: #9f9f9f;
        font-size: 14px;
    }

/* ============================================================
   MOBILE FILTER DRAWER
   ============================================================ */
.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

    .filter-overlay.open {
        display: block;
    }

.filter-drawer {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px;
    z-index: 1001;
    transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    max-height: 85vh;
    overflow-y: auto;
}

    .filter-drawer.open {
        bottom: 0;
    }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .drawer-header h3 {
        font-size: 18px;
        font-weight: 700;
    }

.drawer-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawer-footer {
    position: sticky;
    bottom: -24px;
    background: #fff;
    padding: 16px 0 0;
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

.btn-apply {
    flex: 1;
    padding: 14px;
    background: #fa990c;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
}

.btn-reset {
    flex: 1;
    padding: 14px;
    background: #f5f5f5;
    color: #111;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
}

/* ============================================================
   CART TOAST
   ============================================================ */
.cart-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #111;
    color: #fff;
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 9999;
    transform: translateY(80px);
    opacity: 0;
    transition: 0.4s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cart-toast.show {
        transform: translateY(0);
        opacity: 1;
    }

.toast-icon {
    font-size: 20px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px) {
    .product-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .why-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:992px) {
    .listing-page {
        grid-template-columns: 1fr;
        padding: 20px 20px;
    }

    .filter-sidebar {
        display: none;
    }

    .mobile-filter-btn {
        display: flex;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {
    .top-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        position: relative;
    }

    .search-wrap {
        width: 100%;
        order: 2;
        display: none;
        margin-top: 12px;
    }

        .search-wrap.active {
            display: block;
        }

        .search-wrap input {
            width: 100%;
            height: 35px;
            border-radius: 14px;
            border: 1px solid #ddd;
            padding: 0 18px;
            font-size: 15px;
            outline: none;
        }

    .header-icons {
        gap: 8px;
    }

    .icon {
        width: 42px;
        height: 42px;
    }

    .top-categories {
        grid-template-columns: repeat(4,1fr);
        margin: 7px;
    }

    .cat-item {
        padding: 6px;
        font-size: 22px;
        border-bottom: 1px solid #E6A032;
    }

        .cat-item p {
            font-size: 11px;
        }

    .product-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 14px;
    }

    .product-image {
        height: 180px;
    }

    .product-content {
        padding: 10px 12px 12px;
    }

    .product-title {
        font-size: 13px;
    }

    .price {
        font-size: 15px;
    }

    .listing-heading {
        padding: 18px 16px;
    }

        .listing-heading h1 {
            font-size: 21px;
        }

    .sort-result-row {
        gap: 8px;
    }

    .sort-select {
        font-size: 13px;
        padding: 8px 10px;
    }

    .breadcrumb-bar {
        padding: 10px 16px;
    }

    .seo-section {
        padding: 0 16px 40px;
    }

    .why-choose, .faq-section, .related-searches, .about-category {
        padding: 30px 20px;
    }

    .why-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 16px;
    }

    .why-card {
        padding: 18px 12px;
    }

    .why-choose h2, .faq-section h2, .about-category h2 {
        font-size: 20px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
        max-height: 420px;
    }

    .cart-toast {
        bottom: 80px;
        right: 16px;
        left: 16px;
    }
}

@media(max-width:480px) {
    .product-image {
        height: 155px;
    }

    .listing-page {
        padding: 14px 12px;
    }
}

/* ── CART LAYOUT ── */
.cart-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 120px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}

/* ── LEFT ── */
.cart-hdr {
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.cart-hdr-title {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-count-pill {
    background: #fa990c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
}

.clear-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #999;
    background: none;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    padding: 7px 12px;
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .clear-btn:hover {
        color: #e02020;
        border-color: #e02020;
        background: #fff5f5;
    }

.col-labels {
    display: grid;
    grid-template-columns: 1fr 90px 120px 80px 36px;
    gap: 0;
    padding: 8px 18px;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}

    .col-labels span:not(:first-child) {
        text-align: center;
    }

/* ── CART ITEM ── */
.cart-item {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    margin-bottom: 10px;
    overflow: hidden;
    transition: .35s;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    position: relative;
}

    .cart-item:hover {
        border-color: #fa990c;
        box-shadow: 0 4px 16px rgba(250,153,12,.1);
    }

.save-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg,#18a34a,#22c55e);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px 3px 10px;
    border-radius: 16px 0 10px 0;
    letter-spacing: .3px;
    z-index: 1;
}

/* Desktop item grid */
.item-desk {
    display: grid;
    grid-template-columns: 1fr 90px 120px 80px 36px;
    gap: 0;
    align-items: center;
    padding: 14px 18px;
}

.item-prod {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-img {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid #f0f0f0;
}

    .item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.item-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
    line-height: 1.4;
}

.item-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid;
}

.tag-g {
    background: #f5f5f5;
    color: #666;
    border-color: #e8e8e8;
}

.tag-gr {
    background: #ecfff0;
    color: #18a34a;
    border-color: #b8f0cc;
}

.tag-sk {
    background: #f0f0ff;
    color: #5a52b5;
    border-color: #d0cfff;
}

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

.price-now {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    display: block;
}

.price-was {
    font-size: 12px;
    color: #bbb;
    text-decoration: line-through;
    display: block;
    margin-top: 1px;
}

.item-qty {
    display: flex;
    justify-content: center;
}

.qty-ctrl {
    display: flex;
    align-items: center;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    background: #fafafa;
}

    .qty-ctrl button {
        width: 32px;
        height: 34px;
        border: none;
        background: transparent;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        color: #444;
        transition: .15s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .qty-ctrl button:hover {
            background: #fff7ec;
            color: #fa990c;
        }

    .qty-ctrl .qty-n {
        min-width: 32px;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #111;
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.item-total-d {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.del-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #e8e8e8;
    background: #fafafa;
    cursor: pointer;
    color: #bbb;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}

    .del-btn:hover {
        background: #fff5f5;
        border-color: #e02020;
        color: #e02020;
    }

/* Mobile item layout */
.item-mob {
    display: none;
}

.mob-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #f5f5f5;
}

.mob-img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1.5px solid #f0f0f0;
}

    .mob-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.mob-details {
    flex: 1;
}

.mob-bottom {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

.mob-price {
    flex: 1;
}

.mob-pnow {
    font-size: 14px;
    font-weight: 800;
    color: #111;
}

.mob-pwas {
    font-size: 11px;
    color: #bbb;
    text-decoration: line-through;
}

.mob-item-total {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    min-width: 55px;
    text-align: right;
}

/* ── EMPTY STATE ── */
.empty-cart {
    display: none;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    padding: 60px 24px;
    border: 1px solid #eaeaea;
}

    .empty-cart.show {
        display: block;
    }

.empty-emoji {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
}

.empty-cart h2 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.empty-cart p {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 24px;
}

.btn-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111;
    color: #fff;
    padding: 13px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

    .btn-shop:hover {
        background: #fa990c;
        color: #fff;
    }

/* ── RECOMMENDED ── */
.rec-section {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 16px;
    margin-top: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.rec-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .rec-title i {
        color: #fa990c;
    }

.rec-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #e8e8e8 transparent;
}

    .rec-scroll::-webkit-scrollbar {
        height: 3px;
    }

    .rec-scroll::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 4px;
    }

.rec-card {
    flex-shrink: 0;
    width: 130px;
    border-radius: 14px;
    border: 1.5px solid #eaeaea;
    overflow: hidden;
    background: #fff;
    transition: .2s;
}

    .rec-card:hover {
        border-color: #fa990c;
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(250,153,12,.12);
    }

.rec-card-img {
    height: 90px;
    overflow: hidden;
}

    .rec-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .3s;
    }

.rec-card:hover .rec-card-img img {
    transform: scale(1.06);
}

.rec-card-body {
    padding: 8px;
}

.rec-name {
    font-size: 11px;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
    line-height: 1.4;
}

.rec-price {
    font-size: 12px;
    font-weight: 800;
    color: #fa990c;
    margin-bottom: 6px;
}

.rec-add {
    width: 100%;
    padding: 6px 0;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .rec-add:hover {
        background: #fa990c;
    }

    .rec-add.added {
        background: #18a34a;
    }

/* ── ORDER SUMMARY ── */
.summary-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 18px;
    position: sticky;
    top: 76px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.sum-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sum-title i {
        color: #fa990c;
    }

.trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 14px;
}

.trust-itm {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
}

    .trust-itm i {
        color: #18a34a;
        font-size: 13px;
    }

.srow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #f9f9f9;
}

    .srow:last-of-type {
        border-bottom: none;
    }

    .srow span:last-child {
        font-weight: 700;
        color: #111;
    }

    .srow.grn span:last-child {
        color: #18a34a;
    }

    .srow.hidden {
        display: none;
    }

.strike {
    text-decoration: line-through;
    color: #ccc;
    font-weight: 400 !important;
}

.saving-pill {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #b8f0cc;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0;
    margin-top: 6px;
    border-top: 2px solid #f0f0f0;
}

    .total-row span:first-child {
        font-size: 14px;
        font-weight: 800;
        color: #111;
    }

    .total-row span:last-child {
        font-size: 22px;
        font-weight: 800;
        color: #111;
    }

/* ── COUPON ── */
.coupon-section {
    margin: 14px 0;
}

.coupon-label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .coupon-label i {
        color: #fa990c;
    }

.coupon-row {
    display: flex;
    gap: 7px;
}

.coupon-inp {
    flex: 1;
    padding: 10px 13px;
    border: 1.5px solid #e3e3e3;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    text-transform: uppercase;
    letter-spacing: .5px;
}

    .coupon-inp:focus {
        border-color: #fa990c;
        background: #fff;
    }

    .coupon-inp.valid {
        border-color: #18a34a;
        background: #f0fff4;
    }

    .coupon-inp.err {
        border-color: #e02020;
        background: #fff5f5;
    }

.apply-btn {
    padding: 0 16px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    white-space: nowrap;
}

    .apply-btn:hover {
        background: #fa990c;
    }

.coupon-msg {
    margin-top: 6px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 6px;
}

    .coupon-msg.ok {
        display: flex;
        background: #ecfff0;
        color: #18a34a;
        border: 1px solid #b8f0cc;
    }

    .coupon-msg.fail {
        display: flex;
        background: #fff5f5;
        color: #e02020;
        border: 1px solid #ffc0c0;
    }

.applied-chip {
    display: none;
    background: #fff7ec;
    border: 1px solid #fde4b2;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
}

    .applied-chip.show {
        display: flex;
    }

.rm-chip-btn {
    margin-left: auto;
    font-size: 11px;
    color: #e02020;
    cursor: pointer;
    font-weight: 700;
    background: none;
    border: none;
    font-family: 'Outfit',sans-serif;
}

.avail-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    cursor: pointer;
    margin-top: 8px;
    text-decoration: none;
    transition: .2s;
    width: fit-content;
}

    .avail-toggle i {
        transition: .3s;
    }

    .avail-toggle.open i {
        transform: rotate(180deg);
    }

.avail-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}

    .avail-list.open {
        max-height: 800px;
    }

.coupon-chip {
    border: 1.5px dashed #e3e3e3;
    border-radius: 12px;
    padding: 11px 13px;
    margin-top: 8px;
    cursor: pointer;
    transition: .2s;
}

    .coupon-chip:hover {
        border-color: #fa990c;
        background: #fffdf9;
    }

.cc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cc-code {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    letter-spacing: .5px;
    font-family: monospace;
}

.cc-off {
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
}

.cc-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
}

.cc-tap {
    font-size: 10px;
    color: #fa990c;
    font-weight: 700;
    margin-top: 4px;
    display: block;
}

/* ── CHECKOUT BUTTON ── */
.checkout-btn {
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
}

    .checkout-btn:hover {
        background: #fa990c;
    }

.or-line {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    margin: 10px 0;
    position: relative;
}

    .or-line::before, .or-line::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 42%;
        height: 1px;
        background: #eee;
    }

    .or-line::before {
        left: 0;
    }

    .or-line::after {
        right: 0;
    }

.continue-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #666;
    text-decoration: none;
    padding: 10px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    transition: .2s;
}

    .continue-link:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

.pay-icons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0 6px;
}

.pay-ico {
    padding: 3px 9px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #666;
}

.secure-note {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .secure-note i {
        color: #18a34a;
    }

/* ── MOBILE STICKY BAR ── */
.mob-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #eaeaea;
    padding: 10px 14px;
    z-index: 800;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    gap: 12px;
    align-items: center;
}

.mob-total-info {
    flex: 1;
}

    .mob-total-info em {
        font-size: 10px;
        color: #888;
        font-style: normal;
        display: block;
        margin-bottom: 1px;
    }

    .mob-total-info strong {
        font-size: 19px;
        font-weight: 800;
        color: #111;
    }

.mob-cta {
    flex: 1.2;
    padding: 13px 10px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .mob-cta:hover {
        background: #fa990c;
    }

/* ═══════════════════════════════════════════════════════
   ★★★ SEARCH DROPDOWN — NEW CODE STARTS HERE ★★★
   All rules below marked [SEARCH-UI] are newly added
═══════════════════════════════════════════════════════ */

/* [SEARCH-UI] Overlay — dims the page when dropdown is open */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.32);
    z-index: 998;
    display: none;
    /* backdrop-filter gives the frosted glass look */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

    .search-overlay.show {
        display: block;
    }

/* [SEARCH-UI] Outer wrapper that holds the real <input>
   and the dropdown panel together */
.sk-search-outer {
    position: relative;
    width: 66%;
    /* Ensures the dropdown floats above the overlay */
    z-index: 999;
}

/* [SEARCH-UI] The input itself — fuller width + search icon button */
.sk-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #ebebeb;
    border-radius: 50px;
    overflow: hidden;
    transition: .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

    .sk-search-box.focused {
        border-color: #fa990c;
        box-shadow: 0 0 0 3px rgba(250,153,12,.12);
    }

    .sk-search-box input {
        flex: 1;
        padding: 10px 18px;
        border: none;
        outline: none;
        font-size: 14px;
        font-family: 'Outfit',sans-serif;
        background: transparent;
        color: #111;
    }

        .sk-search-box input::placeholder {
            color: #bbb;
        }

    .sk-search-box .sk-clear-btn {
        /* [SEARCH-UI] × button appears when user types */
        display: none;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: #f5f5f5;
        color: #888;
        font-size: 13px;
        cursor: pointer;
        margin-right: 4px;
        transition: .2s;
        flex-shrink: 0;
    }

        .sk-search-box .sk-clear-btn:hover {
            background: #ffe4e4;
            color: #e02020;
        }

        .sk-search-box .sk-clear-btn.show {
            display: flex;
        }

.sk-search-btn {
    /* [SEARCH-UI] Orange search button on the right */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    background: #fa990c;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit',sans-serif;
    cursor: pointer;
    transition: .2s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .sk-search-btn:hover {
        background: #e8880a;
    }

    .sk-search-btn i {
        font-size: 13px;
    }

/* ─────────────────────────────────────
   [SEARCH-UI] DROPDOWN PANEL
───────────────────────────────────── */
.sk-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    box-shadow: 0 16px 48px rgba(0,0,0,.14);
    overflow: hidden;
    display: none;
    z-index: 1000;
    /* Entrance animation */
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .22s ease,opacity .22s ease;
}

    .sk-search-dropdown.show {
        display: block;
        transform: translateY(0);
        opacity: 1;
    }

/* [SEARCH-UI] Each labelled section inside the dropdown */
.sk-drop-section {
    padding: 18px 18px 10px;
}

    .sk-drop-section + .sk-drop-section {
        border-top: 1px solid #f5f5f5;
        padding-top: 14px;
    }

.sk-drop-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}

    .sk-drop-label i {
        font-size: 12px;
        color: #fa990c;
    }

    .sk-drop-label span.sk-see-all {
        margin-left: auto;
        font-size: 11px;
        font-weight: 700;
        color: #fa990c;
        text-transform: none;
        letter-spacing: 0;
        cursor: pointer;
        text-decoration: none;
    }

        .sk-drop-label span.sk-see-all:hover {
            text-decoration: underline;
        }

/* [SEARCH-UI] Trending tag pills — matches IGP screenshot style */
.sk-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
}

.sk-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    background: #f5f5f5;
    color: #333;
    border: 1.5px solid #eaeaea;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .18s;
    white-space: nowrap;
}

    .sk-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

    .sk-tag i {
        font-size: 11px;
        color: #fa990c;
    }

/* [SEARCH-UI] Auto-suggestion result rows */
.sk-suggest-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.sk-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 11px;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    color: inherit;
}

    .sk-suggest-item:hover {
        background: #f8f8f8;
    }

    .sk-suggest-item.active {
        background: #fff7ec;
    }

/* Left icon box */
.sk-si-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: .15s;
}

.sk-suggest-item:hover .sk-si-icon {
    background: #fff0db;
}

/* Text part */
.sk-si-text {
    flex: 1;
    min-width: 0;
}

.sk-si-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    /* [SEARCH-UI] Bold highlight on matched characters */
    .sk-si-name mark {
        background: transparent;
        color: #fa990c;
        font-weight: 800;
        padding: 0;
    }

.sk-si-meta {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sk-si-meta span {
        display: flex;
        align-items: center;
        gap: 3px;
    }

/* Right arrow */
.sk-si-arrow {
    font-size: 11px;
    color: #ccc;
    flex-shrink: 0;
    transition: .2s;
}

.sk-suggest-item:hover .sk-si-arrow {
    color: #fa990c;
    transform: translateX(3px);
}

/* [SEARCH-UI] Category quick-jump row */
.sk-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 4px;
}

.sk-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    background: #fff;
    border: 1.5px solid #eaeaea;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: .18s;
    text-decoration: none;
}

    .sk-cat-chip:hover {
        border-color: #fa990c;
        color: #fa990c;
        background: #fff7ec;
    }

/* [SEARCH-UI] Recent searches row */
.sk-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 11px;
    cursor: pointer;
    transition: .15s;
}

    .sk-recent-item:hover {
        background: #f8f8f8;
    }

.sk-recent-icon {
    font-size: 13px;
    color: #ccc;
    flex-shrink: 0;
}

.sk-recent-text {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    flex: 1;
}

.sk-recent-del {
    font-size: 12px;
    color: #ddd;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 6px;
    transition: .15s;
    border: none;
    background: none;
}

    .sk-recent-del:hover {
        color: #e02020;
        background: #fff5f5;
    }

/* [SEARCH-UI] No-results state */
.sk-no-results {
    text-align: center;
    padding: 24px 16px 20px;
}

    .sk-no-results .sk-nr-emoji {
        font-size: 36px;
        display: block;
        margin-bottom: 10px;
    }

    .sk-no-results p {
        font-size: 13px;
        color: #888;
        line-height: 1.7;
    }

    .sk-no-results strong {
        color: #111;
    }

/* [SEARCH-UI] Footer inside dropdown — quick links */
.sk-drop-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    gap: 10px;
    flex-wrap: wrap;
}

    .sk-drop-footer a {
        font-size: 12px;
        font-weight: 700;
        color: #888;
        text-decoration: none;
        transition: .15s;
    }

        .sk-drop-footer a:hover {
            color: #fa990c;
        }

        .sk-drop-footer a i {
            margin-right: 4px;
        }

/* ═══════════════════════════════════════════════════════
   ★★★ SEARCH DROPDOWN — NEW CODE ENDS HERE ★★★
═══════════════════════════════════════════════════════ */

/* ─── HERO ─── */
.faq-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 55%,#2a1400 100%);
    padding: 56px 20px 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .faq-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 440px;
        height: 440px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .faq-hero::after {
        content: '';
        position: absolute;
        bottom: -70px;
        left: -50px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.hero-h1 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(28px,4vw,48px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

    .hero-h1 em {
        color: #fa990c;
        font-style: normal;
    }

.hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
/* FAQ search bar */
.faq-search {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    position: relative;
    z-index: 1;
}

    .faq-search input {
        flex: 1;
        padding: 14px 20px;
        border: none;
        outline: none;
        font-size: 15px;
        font-family: 'Outfit',sans-serif;
        color: #111;
    }

        .faq-search input::placeholder {
            color: #bbb;
        }

.faq-search-btn {
    padding: 14px 22px;
    background: #fa990c;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .faq-search-btn:hover {
        background: #e8880a;
    }

.hero-stats {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

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

.hs-num {
    font-size: 22px;
    font-weight: 800;
    color: #fa990c;
}

.hs-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    font-weight: 600;
    margin-top: 2px;
}

/* ─── MAIN LAYOUT ─── */
.faq-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}

/* ─── SIDEBAR NAV ─── */
.faq-nav {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 18px;
    position: sticky;
    top: 84px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.faq-nav-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .faq-nav-title i {
        color: #fa990c;
    }

.faq-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.faq-nav-item a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: .2s;
}

    .faq-nav-item a:hover {
        background: #fff7ec;
        color: #fa990c;
    }

    .faq-nav-item a.active {
        background: #fff7ec;
        color: #fa990c;
    }

    .faq-nav-item a .nav-count {
        margin-left: auto;
        background: #f5f5f5;
        color: #888;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 10px;
    }

    .faq-nav-item a.active .nav-count {
        background: #fff0db;
        color: #fa990c;
    }

/* CTA in sidebar */
.faq-nav-cta {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f5f5f5;
    text-align: center;
}

    .faq-nav-cta p {
        font-size: 12px;
        color: #888;
        margin-bottom: 10px;
        line-height: 1.6;
    }

    .faq-nav-cta a {
        display: block;
        padding: 9px 14px;
        background: #fa990c;
        color: #fff;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: .2s;
    }

        .faq-nav-cta a:hover {
            background: #e8880a;
        }

/* ─── FAQ MAIN ─── */
.faq-main {
}
/* No results */
.no-results {
    display: none;
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
}

    .no-results.show {
        display: block;
    }

.no-results-emoji {
    font-size: 48px;
    display: block;
    margin-bottom: 14px;
}

.no-results h3 {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 7px;
}

.no-results p {
    font-size: 14px;
    color: #888;
}

/* Category section */
.faq-category {
    margin-bottom: 28px;
}

.faq-cat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    border: 1px solid #eaeaea;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    cursor: pointer;
    transition: .2s;
}

    .faq-cat-header:hover {
        border-color: #fa990c;
    }

.faq-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.faq-cat-info {
    flex: 1;
}

.faq-cat-name {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
}

.faq-cat-desc {
    font-size: 12px;
    color: #888;
}

.faq-cat-count {
    background: #f5f5f5;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.faq-cat-toggle {
    color: #aaa;
    font-size: 13px;
    margin-left: 6px;
    transition: .3s;
}

.faq-category.collapsed .faq-cat-toggle {
    transform: rotate(-90deg);
}

/* FAQ items list */
.faq-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-category.collapsed .faq-items {
    display: none;
}

/* Individual FAQ */
.faq-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .25s;
}

    .faq-item:hover {
        border-color: #e8d5b5;
    }

    .faq-item.open {
        border-color: #fa990c;
        box-shadow: 0 4px 16px rgba(250,153,12,.08);
    }

    .faq-item.hidden {
        display: none;
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    cursor: pointer;
    gap: 12px;
}

.faq-q-text {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    flex: 1;
    line-height: 1.45;
}

.faq-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    transition: .3s;
}

.faq-item.open .faq-arrow {
    background: #fa990c;
    color: #fff;
    border-color: #fa990c;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s ease;
}

.faq-item.open .faq-a {
    max-height: 600px;
}

.faq-a-inner {
    padding: 0 18px 18px;
    font-size: 14px;
    color: #555;
    line-height: 1.82;
    border-top: 1px solid #f5f5f5;
    padding-top: 14px;
}

    .faq-a-inner a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .faq-a-inner a:hover {
            text-decoration: underline;
        }

    .faq-a-inner strong {
        color: #111;
    }

/* Helpful voting */
.faq-helpful {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 14px;
    border-top: 1px dashed #f0f0f0;
}

    .faq-helpful span {
        font-size: 12px;
        color: #aaa;
        font-weight: 600;
    }

.helpful-btn {
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .helpful-btn:hover {
        border-color: #18a34a;
        color: #18a34a;
    }

    .helpful-btn.yes-voted {
        border-color: #18a34a;
        background: #ecfff0;
        color: #18a34a;
    }

    .helpful-btn.no-voted {
        border-color: #e02020;
        background: #fff5f5;
        color: #e02020;
    }

    .helpful-btn:hover:last-child {
        border-color: #e02020;
        color: #e02020;
    }

/* Search highlight */
.highlight {
    background: #fff3cd;
    border-radius: 3px;
    padding: 0 2px;
}

/* ─── CONTACT CTA ─── */
.faq-contact {
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2c1400 100%);
    border-radius: 22px;
    padding: 36px;
    text-align: center;
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}

    .faq-contact::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -40px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.15),transparent 65%);
        pointer-events: none;
    }

    .faq-contact h3 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
    }

        .faq-contact h3 em {
            color: #fa990c;
            font-style: normal;
        }

    .faq-contact p {
        font-size: 14px;
        color: rgba(255,255,255,.65);
        margin-bottom: 22px;
        line-height: 1.7;
        position: relative;
        z-index: 1;
    }

.contact-methods {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cm-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    border: 1.5px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.8);
}

    .cm-btn:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
    }

    .cm-btn.primary {
        background: #fa990c;
        border-color: #fa990c;
        color: #fff;
    }

        .cm-btn.primary:hover {
            background: #e8880a;
        }

    .cm-btn i {
        font-size: 14px;
    }

/* ─── RELATED SEARCHES ─── */
.rs-box {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    padding: 18px 22px;
    margin-top: 20px;
}

.rs-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rs-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ──────────────────────────────────────────
   POPUP TRIGGER BANNER
────────────────────────────────────────── */
.popup-trigger-bar {
    background: linear-gradient(90deg,#111 0%,#1e1e1e 60%,#2a1a00 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ptb-text {
    font-size: 14px;
    color: rgba(255,255,255,.8);
}

    .ptb-text strong {
        color: #fa990c;
    }

.ptb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fa990c;
    color: #fff;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .25s;
    box-shadow: 0 4px 14px rgba(250,153,12,.35);
    white-space: nowrap;
}

    .ptb-btn:hover {
        background: #e8880a;
        transform: translateY(-1px);
    }

/* ──────────────────────────────────────────
   PAGE LAYOUT — 2-COLUMN SPLIT
────────────────────────────────────────── */
.login-page {
    max-width: 1040px;
    margin: 36px auto 60px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 0;
    align-items: stretch;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.1);
}

/* LEFT — form panel */
.login-panel {
    background: #fff;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
}

/* RIGHT — visual panel */
.visual-panel {
    background: #111;
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

    .visual-panel::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -80px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18) 0%,transparent 70%);
        pointer-events: none;
    }

    .visual-panel::after {
        content: '';
        position: absolute;
        bottom: -60px;
        left: -60px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1) 0%,transparent 70%);
        pointer-events: none;
    }

.vp-logo {
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

    .vp-logo img {
        height: 38px;
    }

.vp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.vp-headline {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

    .vp-headline em {
        color: #fa990c;
        font-style: normal;
    }

.vp-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

    .vp-perks li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: rgba(255,255,255,.75);
        font-weight: 600;
    }

        .vp-perks li i {
            color: #fa990c;
            font-size: 12px;
            width: 14px;
            flex-shrink: 0;
        }

.vp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.vp-stat {
    background: rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 13px 14px;
}

.vp-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #fa990c;
}

.vp-stat-lbl {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
    font-weight: 600;
}

/* ──────────────────────────────────────────
   STEP INDICATOR (dots)
────────────────────────────────────────── */
.step-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8e8e8;
    transition: .35s;
}

    .step-dot.active {
        background: #fa990c;
        width: 22px;
        border-radius: 4px;
    }

    .step-dot.done {
        background: #18a34a;
    }

/* ──────────────────────────────────────────
   FORM STEP CONTAINERS — show/hide
────────────────────────────────────────── */
.step-screen {
    display: none;
}

    .step-screen.active {
        display: block;
    }

/* ──────────────────────────────────────────
   FORM TYPOGRAPHY
────────────────────────────────────────── */
.step-title {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.step-subtitle {
    font-size: 13px;
    color: #888;
    margin-bottom: 22px;
    line-height: 1.7;
}

/* ──────────────────────────────────────────
   TRUST STRIP
────────────────────────────────────────── */
.trust-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.trust-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #555;
    font-weight: 600;
    background: #f5f5f5;
    padding: 5px 10px;
    border-radius: 20px;
}

    .trust-chip i {
        color: #18a34a;
        font-size: 10px;
    }

/* ------------------------------------------
   MOBILE INPUT — shared by page + popup
------------------------------------------ */
.field-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
    margin-bottom: 7px;
}

    .field-label .req {
        color: #fa990c;
        margin-left: 2px;
    }

.mobile-field {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e3e3e3;
    border-radius: 12px;
    overflow: hidden;
    background: #fafafa;
    transition: .2s;
    margin-bottom: 5px;
    min-height: 50px;
}

    .mobile-field:focus-within {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .mobile-field.is-valid {
        border-color: #18a34a;
        background: #f0fff4;
    }

    .mobile-field.is-err {
        border-color: #e02020;
        background: #fff5f5;
    }

.mob-prefix {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #444;
    border-right: 1.5px solid #e3e3e3;
    flex-shrink: 0;
    background: #f5f5f5;
    white-space: nowrap;
    min-width: 76px;
}

    .mob-prefix .flag {
        font-size: 16px;
        line-height: 1;
    }

/* covers BOTH #mobileInput and #ppMobileInput */
.mobile-field input[type="tel"] {
    flex: 1;
    padding: 13px 14px;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: 'Outfit',sans-serif;
    background: transparent;
    color: #111;
    letter-spacing: .5px;
    min-width: 0;
    width: 100%;
}

    .mobile-field input[type="tel"]::placeholder {
        color: #c5c5c5;
        letter-spacing: 0;
        font-size: 13px;
    }

.field-msg {
    font-size: 11px;
    min-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.msg-ok {
    color: #18a34a;
}

.msg-err {
    color: #e02020;
}

.msg-info {
    color: #888;
}

/* ──────────────────────────────────────────
   TERMS CHECKBOX
────────────────────────────────────────── */
.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    background: #fafafa;
    border-radius: 10px;
    border: 1.5px solid #e3e3e3;
    cursor: pointer;
    margin-bottom: 16px;
    transition: .2s;
}

    .terms-row:hover {
        border-color: #fa990c;
    }

    .terms-row.checked {
        background: #fff9f0;
        border-color: #fa990c;
    }

    .terms-row input[type="checkbox"] {
        width: 15px;
        height: 15px;
        accent-color: #fa990c;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .terms-row span {
        font-size: 12px;
        color: #555;
        line-height: 1.6;
    }

        .terms-row span a {
            color: #fa990c;
            text-decoration: none;
            font-weight: 700;
        }

            .terms-row span a:hover {
                text-decoration: underline;
            }

/* ──────────────────────────────────────────
   PRIMARY BUTTON
────────────────────────────────────────── */
.btn-primary {
    width: 100%;
    padding: 14px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 16px;
}

    .btn-primary:hover:not(:disabled) {
        background: #fa990c;
    }

    .btn-primary:disabled {
        background: #d0d0d0;
        cursor: not-allowed;
    }

    /* Loading spinner overlay on button */
    .btn-primary.loading {
        background: #fa990c;
        pointer-events: none;
    }

        .btn-primary.loading .btn-label {
            display: none;
        }

        .btn-primary.loading .btn-spin {
            display: flex;
            align-items: center;
            gap: 8px;
        }

    .btn-primary .btn-spin {
        display: none;
    }

/* Green variant */
.btn-green {
    width: 100%;
    padding: 14px;
    background: #18a34a;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 16px;
}

    .btn-green:hover:not(:disabled) {
        background: #15903e;
    }

    .btn-green:disabled {
        background: #d0d0d0;
        cursor: not-allowed;
    }

    .btn-green.loading {
        background: #15903e;
        pointer-events: none;
    }

        .btn-green.loading .btn-label {
            display: none;
        }

        .btn-green.loading .btn-spin {
            display: flex;
            align-items: center;
            gap: 8px;
        }

    .btn-green .btn-spin {
        display: none;
    }

/* ──────────────────────────────────────────
   OR DIVIDER
────────────────────────────────────────── */
.or-divider {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    margin: 4px 0 14px;
    position: relative;
}

    .or-divider::before, .or-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 43%;
        height: 1px;
        background: #eeeeee;
    }

    .or-divider::before {
        left: 0;
    }

    .or-divider::after {
        right: 0;
    }

/* ──────────────────────────────────────────
   SOCIAL BUTTONS
────────────────────────────────────────── */
.social-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.btn-social {
    flex: 1;
    padding: 11px;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

    .btn-social:hover {
        border-color: #fa990c;
        background: #fffdf9;
    }

/* ──────────────────────────────────────────
   BENEFIT CHIPS
────────────────────────────────────────── */
.benefit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f8f8f8;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

    .benefit-item i {
        color: #fa990c;
        font-size: 12px;
        flex-shrink: 0;
    }

.login-footnote {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    margin-top: 6px;
}

    .login-footnote a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .login-footnote a:hover {
            text-decoration: underline;
        }

/* ──────────────────────────────────────────
   OTP STEP — mobile confirmed chip
────────────────────────────────────────── */
.mobile-confirm-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fff4;
    border: 1px solid #b8f0cc;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.mcc-icon {
    color: #18a34a;
    font-size: 16px;
}

.mcc-info {
    flex: 1;
}

.mcc-label {
    font-size: 10px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mcc-number {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    letter-spacing: .5px;
}

.mcc-change {
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .mcc-change:hover {
        text-decoration: underline;
    }

/* ──────────────────────────────────────────
   4-BOX OTP INPUT
────────────────────────────────────────── */
.otp-boxes-row {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.otp-box {
    width: 60px;
    height: 64px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #111;
    border: 1.5px solid #e3e3e3;
    border-radius: 14px;
    outline: none;
    background: #fafafa;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    caret-color: transparent;
    -webkit-appearance: none;
}

    .otp-box:focus {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.1);
    }

    .otp-box.otp-filled {
        border-color: #18a34a;
        background: #f0fff4;
    }

    .otp-box.otp-error {
        border-color: #e02020 !important;
        background: #fff5f5 !important;
        animation: shake .35s ease;
    }

@keyframes shake {
    0%,100% {
        transform: translateX(0);
    }

    20%,60% {
        transform: translateX(-5px);
    }

    40%,80% {
        transform: translateX(5px);
    }
}

;
/* ──────────────────────────────────────────
   RESEND TIMER ROW
────────────────────────────────────────── */
.resend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 8px;
}

.resend-timer {
    font-size: 12px;
    color: #888;
}

    .resend-timer strong {
        color: #fa990c;
    }
/* Timer visible when countdown active */
#resendTimerWrap {
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Resend button — hidden when timer is active */
#resendOtpBtn {
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: .2s;
}

    #resendOtpBtn:hover {
        text-decoration: underline;
    }

    #resendOtpBtn:disabled {
        color: #ccc;
        cursor: not-allowed;
    }

/* OTP demo hint */
.otp-demo-hint {
    background: #fff7ec;
    border: 1px solid #fde4b2;
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 12px;
    color: #7a4f00;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}

    .otp-demo-hint i {
        color: #fa990c;
    }

/* ──────────────────────────────────────────
   SUCCESS SCREEN
────────────────────────────────────────── */
.success-screen {
    text-align: center;
    padding: 16px 0;
}

.success-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg,#18a34a,#22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 34px;
    color: #fff;
    animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.success-screen h3 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.success-screen p {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 20px;
}

.success-perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 22px;
    text-align: left;
}

.sp-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f8f8f8;
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

    .sp-item i {
        color: #18a34a;
        font-size: 12px;
        flex-shrink: 0;
    }

.btn-success {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111;
    color: #fff;
    padding: 13px 32px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    text-decoration: none;
}

    .btn-success:hover {
        background: #fa990c;
        color: #fff;
    }

/* ──────────────────────────────────────────
   POP-UP MODAL
────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 8000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(3px);
}

    .modal-overlay.open {
        display: flex;
    }

        .modal-overlay.open .modal-box {
            animation: modalIn .35s cubic-bezier(.22,1,.36,1) both;
        }

@keyframes modalIn {
    from {
        transform: translateY(32px) scale(.95);
        opacity: 0;
    }

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

.modal-box {
    background: #fff;
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    position: relative;
}

.modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #eee;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: .2s;
    color: #888;
    z-index: 2;
}

    .modal-close-btn:hover {
        background: #fff5f5;
        border-color: #e02020;
        color: #e02020;
    }

.modal-inner {
    padding: 28px 24px 24px;
}

/* popup step containers */
.popup-step {
    display: none;
}

    .popup-step.active {
        display: block;
    }

/* Popup step indicator */
.popup-dots {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

.pp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e8e8e8;
    transition: .3s;
}

    .pp-dot.active {
        background: #fa990c;
        width: 20px;
        border-radius: 3px;
    }

    .pp-dot.done {
        background: #18a34a;
    }

/* Popup OTP boxes (slightly smaller) */
/* popup otp boxes — reuse .otp-box, just slightly smaller */
.popup-otp-boxes {
    display: flex;
    gap: 9px;
    margin-bottom: 6px;
}

.mobile-group-wrap {
    margin-bottom: 4px;
}

/* Dual-range slider track wrapper */
.dual-range-wrap {
    position: relative;
    height: 22px; /* enough room for thumbs */
    display: flex;
    align-items: center;
    margin: 4px 0 6px;
}

/* The filled orange track between the two thumbs */
.range-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: #e0e0e0;
    border-radius: 4px;
    pointer-events: none;
}
/* Orange fill — width/left set by JS */
.range-fill {
    position: absolute;
    height: 4px;
    background: #fa990c;
    border-radius: 4px;
    pointer-events: none;
}

/* Both range inputs stacked on top of each other */
.price-slider {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: transparent; /* track drawn by .range-track / .range-fill */
    outline: none;
    cursor: pointer;
    pointer-events: none; /* clicks pass through to whichever thumb is on top */
}
    /* Only the thumb is interactive */
    .price-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        background: #fa990c;
        border: 2px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: all;
        box-shadow: 0 2px 8px rgba(250,153,12,.45);
        transition: transform .15s;
    }

        .price-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        .price-slider::-webkit-slider-thumb:active {
            transform: scale(1.25);
        }

    .price-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #fa990c;
        border: 2px solid #fff;
        border-radius: 50%;
        cursor: pointer;
        pointer-events: all;
        box-shadow: 0 2px 8px rgba(250,153,12,.45);
    }

/* Range hint labels */
.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #bbb;
    font-weight: 600;
    margin-top: 4px;
}

/* Mobile: slightly larger thumb for easier touch */
@media(max-width:768px) {
    .price-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .price-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    .dual-range-wrap {
        height: 28px;
    }

    .price-inputs input {
        padding: 9px 8px;
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════════
   CUSTOMIZATION BUTTON + MODAL
═══════════════════════════════════════════════════ */
.btn-customize {
    width: 100%;
    margin-top: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    border: 2px dashed #fa990c;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    color: #fa990c;
    cursor: pointer;
    transition: .25s;
    font-family: 'Outfit',sans-serif;
    position: relative;
    overflow: hidden;
}

    .btn-customize::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(250,153,12,.06),transparent);
        opacity: 0;
        transition: .25s;
    }

    .btn-customize:hover {
        background: #fff7ec;
        border-style: solid;
        box-shadow: 0 4px 18px rgba(250,153,12,.15);
    }

        .btn-customize:hover::before {
            opacity: 1;
        }

    .btn-customize i {
        font-size: 16px;
    }

    .btn-customize .cust-badge {
        position: absolute;
        right: 16px;
        background: #fa990c;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 20px;
    }

.cust-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

    .cust-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

.cust-modal {
    background: #fff;
    width: 100%;
    max-width: 600px;
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
}

.cust-overlay.open .cust-modal {
    transform: translateY(0);
}

.cust-pill {
    width: 38px;
    height: 4px;
    border-radius: 4px;
    background: #e0e0e0;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.cust-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f5f5f5;
    flex-shrink: 0;
}

.cust-header-left h2 {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    margin-bottom: 2px;
}

.cust-header-left p {
    font-size: 12px;
    color: #888;
}

.cust-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #555;
    transition: .2s;
}

    .cust-close:hover {
        background: #ffe4e4;
        color: #e02020;
    }

.cust-summary-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #fff9f0;
    border-bottom: 1px solid #fde4b2;
    font-size: 12.5px;
    font-weight: 700;
    color: #666;
    flex-shrink: 0;
}

    .cust-summary-bar .csb-count {
        background: #fa990c;
        color: #fff;
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 11px;
    }

    .cust-summary-bar .csb-total {
        margin-left: auto;
        font-size: 13px;
        font-weight: 800;
        color: #111;
    }

.cust-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}

    .cust-list::-webkit-scrollbar {
        width: 4px;
    }

    .cust-list::-webkit-scrollbar-thumb {
        background: #e0e0e0;
        border-radius: 4px;
    }

.cust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    cursor: pointer;
    transition: .15s;
    border-bottom: 1px solid #f8f8f8;
    position: relative;
}

    .cust-item:last-child {
        border-bottom: none;
    }

    .cust-item:hover {
        background: #fafafa;
    }

    .cust-item.selected {
        background: #fff9f0;
    }

.cust-chk {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid #d0d0d0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .18s;
    background: #fff;
}

.cust-item.selected .cust-chk {
    background: #fa990c;
    border-color: #fa990c;
}

.cust-chk i {
    font-size: 11px;
    color: #fff;
    display: none;
}

.cust-item.selected .cust-chk i {
    display: block;
}

.cust-img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #eee;
}

.cust-info {
    flex: 1;
    min-width: 0;
}

.cust-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 3px;
}

.cust-meta {
    font-size: 11px;
    color: #aaa;
    font-weight: 600;
}

.cust-prices {
    text-align: right;
    flex-shrink: 0;
}

.cust-price-now {
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.cust-price-was {
    font-size: 12px;
    color: #e02020;
    text-decoration: line-through;
    font-weight: 600;
}

.cust-discount {
    font-size: 10px;
    font-weight: 800;
    color: #18a34a;
    background: #ecfff0;
    border: 1px solid #b8f0cc;
    padding: 1px 6px;
    border-radius: 8px;
    display: inline-block;
    margin-top: 2px;
}

.cust-footer {
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
}

.cust-proceed-btn {
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s;
    font-family: 'Outfit',sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

    .cust-proceed-btn:hover {
        background: #fa990c;
    }

    .cust-proceed-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .cust-proceed-btn .cpb-total {
        background: rgba(255,255,255,.2);
        padding: 2px 10px;
        border-radius: 20px;
        font-size: 13px;
    }

@media(min-width:640px) {
    .cust-overlay {
        align-items: center;
    }

    .cust-modal {
        border-radius: 22px;
        max-height: 85vh;
        max-width: 560px;
    }

    .cust-pill {
        display: none;
    }
}

@media(max-width:480px) {
    .cust-item {
        padding: 11px 14px;
        gap: 11px;
    }

    .cust-img {
        width: 48px;
        height: 48px;
    }

    .cust-name {
        font-size: 12.5px;
    }

    .cust-price-now {
        font-size: 14px;
    }
}
/* END CUSTOMIZATION */

/* ════════════════════════════════════════
                   PAGE WRAPPER
     ════════════════════════════════════════ */
.about-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* ════════════════════════════════════════
                   SECTION SHARED STYLES
     ════════════════════════════════════════ */
.section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fa990c;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

    .section-label::before {
        content: '';
        width: 28px;
        height: 2px;
        background: #fa990c;
        border-radius: 2px;
        flex-shrink: 0;
    }

.section-h2 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(28px,4vw,44px);
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    margin-bottom: 14px;
}

    .section-h2 em {
        color: #fa990c;
        font-style: normal;
    }

.section-body {
    font-size: 15px;
    color: #555;
    line-height: 1.85;
    max-width: 640px;
}

    .section-body p {
        margin-bottom: 14px;
    }

        .section-body p:last-child {
            margin-bottom: 0;
        }

/* Card shared */
.card-white {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* ════════════════════════════════════════
                   1. HERO BANNER
      ════════════════════════════════════════ */
.about-hero {
    background: linear-gradient(135deg,#111 0%,#1c1c1c 55%,#2c1400 100%);
    border-radius: 0 0 32px 32px;
    padding: 70px 40px 60px;
    margin-bottom: 56px;
    position: relative;
    overflow: hidden;
}

    .about-hero::before {
        content: '';
        position: absolute;
        top: -120px;
        right: -80px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.2) 0%,transparent 65%);
        pointer-events: none;
    }

    .about-hero::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -60px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1) 0%,transparent 65%);
        pointer-events: none;
    }

.hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(32px,4.5vw,52px);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 18px;
}

    .hero-title em {
        color: #fa990c;
        font-style: normal;
    }

.hero-desc {
    font-size: 15px;
    color: rgba(255,255,255,.75);
    line-height: 1.8;
    margin-bottom: 28px;
}

.hero-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.h-stat {
}

.h-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #fa990c;
    line-height: 1;
}

.h-stat-lbl {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
    font-weight: 600;
}

.hero-image-wrap {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
    position: relative;
}

    .hero-image-wrap img {
        width: 100%;
        height: 340px;
        object-fit: cover;
        display: block;
    }

.hero-image-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

    .hero-image-badge i {
        color: #fa990c;
    }

/* ════════════════════════════════════════
                   2. TRUST BADGES STRIP
      ════════════════════════════════════════ */
/*.trust-strip {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 24px 32px;
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
*/
.trust-badge {
    text-align: center;
    padding: 8px 12px;
    border-right: 1px solid #f0f0f0;
}

    .trust-badge:last-child {
        border-right: none;
    }

.trust-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff7ec;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 18px;
    color: #fa990c;
}

.trust-badge-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 3px;
}

.trust-badge-sub {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
}

/* ════════════════════════════════════════
           3. ABOUT SECTION — 2-col text + image
      ═════════════════════════════════════════ */
.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 64px;
}

.about-image-stack {
    position: relative;
}

.about-img-main {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    height: 420px;
    box-shadow: 0 16px 40px rgba(0,0,0,.1);
    display: block;
}

.about-img-card {
    position: absolute;
    bottom: -24px;
    right: -24px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    border: 1px solid #f0f0f0;
    min-width: 170px;
}

.aic-num {
    font-size: 28px;
    font-weight: 800;
    color: #fa990c;
    line-height: 1;
}

.aic-lbl {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-top: 3px;
}

.about-founded-badge {
    position: absolute;
    top: 18px;
    left: -18px;
    background: linear-gradient(135deg,#fa990c,#e8880a);
    border-radius: 12px;
    padding: 12px 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(250,153,12,.3);
}

    .about-founded-badge .yr {
        font-size: 22px;
        font-weight: 800;
        display: block;
        line-height: 1;
    }

.about-text {
    padding: 8px 0;
}

.founder-quote {
    background: #fff;
    border-left: 4px solid #fa990c;
    border-radius: 0 14px 14px 0;
    padding: 18px 20px;
    margin-top: 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

    .founder-quote blockquote {
        font-family: 'Cormorant Garamond',serif;
        font-size: 18px;
        font-style: italic;
        color: #333;
        line-height: 1.7;
        margin: 0 0 10px;
    }

    .founder-quote cite {
        font-size: 12px;
        color: #888;
        font-weight: 700;
        font-style: normal;
    }

        .founder-quote cite strong {
            color: #fa990c;
        }

/* ════════════════════════════════════════
                   4. MISSION & VISION
     ════════════════════════════════════════ */
.mv-section {
    margin-bottom: 64px;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
}

.mv-card {
    border-radius: 20px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
}

.mv-card-mission {
    background: #111;
    color: #fff;
}

.mv-card-vision {
    background: #fff;
    border: 1.5px solid #eaeaea;
}

.mv-card::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
}

.mv-card-mission::before {
    background: radial-gradient(circle,rgba(250,153,12,.2),transparent 65%);
}

.mv-card-vision::before {
    background: radial-gradient(circle,rgba(250,153,12,.08),transparent 65%);
}

.mv-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.mv-card-mission .mv-icon {
    background: rgba(250,153,12,.2);
    color: #fa990c;
}

.mv-card-vision .mv-icon {
    background: #fff7ec;
    color: #fa990c;
}

.mv-card-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.mv-card-mission .mv-card-title {
    color: #fff;
}

.mv-card-vision .mv-card-title {
    color: #111;
}

.mv-card-body {
    font-size: 14px;
    line-height: 1.85;
    position: relative;
    z-index: 1;
}

.mv-card-mission .mv-card-body {
    color: rgba(255,255,255,.75);
}

.mv-card-vision .mv-card-body {
    color: #555;
}

.mv-bullets {
    list-style: none;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
    z-index: 1;
}

    .mv-bullets li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
    }

.mv-card-mission .mv-bullets li {
    color: rgba(255,255,255,.8);
}

.mv-card-vision .mv-bullets li {
    color: #444;
}

.mv-bullets li i {
    color: #fa990c;
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 12px;
}

/* ════════════════════════════════════════
                   5. OUR VALUES — icon grid
    ════════════════════════════════════════ */
.values-section {
    margin-bottom: 64px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-top: 32px;
}

.value-card {
    background: #fff;
    border-radius: 18px;
    padding: 26px 22px;
    border: 1px solid #eaeaea;
    transition: .3s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .value-card:hover {
        border-color: #fa990c;
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(250,153,12,.1);
    }

.value-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #fff7ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fa990c;
    margin-bottom: 16px;
    transition: .3s;
}

.value-card:hover .value-icon {
    background: #fa990c;
    color: #fff;
}

.value-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.value-body {
    font-size: 13px;
    color: #666;
    line-height: 1.75;
}

/* ════════════════════════════════════════
                   6. WHY CHOOSE US — advantages
     ════════════════════════════════════════ */
.why-section {
    background: #111;
    border-radius: 24px;
    padding: 56px 48px;
    margin-bottom: 64px;
    position: relative;
    overflow: hidden;
}

    .why-section::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -60px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.15),transparent 65%);
        pointer-events: none;
    }

    .why-section::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -40px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.08),transparent 65%);
        pointer-events: none;
    }

.why-inner {
    position: relative;
    z-index: 1;
}

.why-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 44px;
}

.why-section .section-label {
    color: #fa990c;
}

    .why-section .section-label::before {
        background: #fa990c;
    }

.why-section .section-h2 {
    color: #fff;
}

.why-desc {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    line-height: 1.8;
}

.why-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fa990c;
    color: #fff;
    padding: 13px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
}

    .why-cta:hover {
        background: #e8880a;
        transform: translateY(-2px);
        color: #fff;
    }

.why-advantages {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
}

.adv-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 22px 18px;
    transition: .3s;
}

    .adv-card:hover {
        background: rgba(250,153,12,.12);
        border-color: rgba(250,153,12,.4);
    }

.adv-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(250,153,12,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fa990c;
    margin-bottom: 14px;
}

.adv-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 7px;
}

.adv-body {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
}

/* ════════════════════════════════════════
      
    7. MILESTONES TIMELINE
     ════════════════════════════════════════ */
.timeline-section {
    margin-bottom: 64px;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    margin-top: 36px;
    position: relative;
}

    .timeline::before {
        content: '';
        position: absolute;
        top: 28px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg,#fa990c,#e8880a);
        z-index: 0;
    }

.tl-item {
    text-align: center;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}

.tl-dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fa990c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 18px;
    color: #fa990c;
    box-shadow: 0 4px 16px rgba(250,153,12,.2);
    transition: .3s;
}

.tl-item:hover .tl-dot {
    background: #fa990c;
    color: #fff;
}

.tl-year {
    font-size: 18px;
    font-weight: 800;
    color: #fa990c;
    margin-bottom: 5px;
}

.tl-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
}

.tl-body {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
}

/* ════════════════════════════════════════
                   8. PRODUCT CATEGORIES SNAPSHOT
    ════════════════════════════════════════ */
.products-snap {
    margin-bottom: 64px;
}

.products-snap-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-top: 32px;
}

.prod-snap-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
    transition: .3s;
    position: relative;
}

    .prod-snap-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 16px 36px rgba(0,0,0,.12);
    }

.prod-snap-img {
    height: 200px;
    overflow: hidden;
}

    .prod-snap-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .4s;
    }

.prod-snap-card:hover .prod-snap-img img {
    transform: scale(1.06);
}

.prod-snap-body {
    background: #fff;
    padding: 18px;
}

.prod-snap-tag {
    display: inline-block;
    background: #fff7ec;
    color: #fa990c;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 7px;
}

.prod-snap-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.prod-snap-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
    margin-bottom: 12px;
}

.prod-snap-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    text-decoration: none;
    transition: .2s;
}

    .prod-snap-link:hover {
        gap: 9px;
    }

    .prod-snap-link i {
        font-size: 10px;
    }

/* ════════════════════════════════════════
                   9. STATS / NUMBERS
    ════════════════════════════════════════ */
.numbers-section {
    background: linear-gradient(135deg,#fff9f0 0%,#fff 100%);
    border-radius: 24px;
    border: 1px solid #fde4b2;
    padding: 48px;
    margin-bottom: 64px;
    text-align: center;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    margin-top: 36px;
}

.num-item {
    padding: 20px;
    border-right: 1px solid #fde4b2;
}

    .num-item:last-child {
        border-right: none;
    }

.num-value {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(36px,4vw,52px);
    font-weight: 700;
    color: #fa990c;
    line-height: 1;
    margin-bottom: 6px;
}

.num-label {
    font-size: 13px;
    font-weight: 700;
    color: #444;
}

.num-sub {
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
}

/* ════════════════════════════════════════
          10. CERTIFICATIONS + ASSOCIATIONS
     ════════════════════════════════════════ */
.certs-section {
    margin-bottom: 64px;
}

.certs-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-top: 28px;
}

.cert-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 22px 18px;
    text-align: center;
    transition: .3s;
}

    .cert-card:hover {
        border-color: #18a34a;
        transform: translateY(-3px);
    }

.cert-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ecfff0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 22px;
}

.cert-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.cert-body {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

/* ════════════════════════════════════════
               11. DELIVERY COVERAGE MAP SECTION
     ════════════════════════════════════════ */
.delivery-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 64px;
}

.delivery-text {
}

.delivery-cities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.city-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    transition: .2s;
}

    .city-chip:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .city-chip i {
        color: #fa990c;
        font-size: 12px;
    }

.city-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
}

.ct-same {
    background: #ecfff0;
    color: #18a34a;
}

.ct-next {
    background: #fff7ec;
    color: #fa990c;
}

.delivery-visual {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.del-zone-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

    .del-zone-row:last-child {
        border-bottom: none;
    }

.del-zone-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dz-green {
    background: #18a34a;
}

.dz-orange {
    background: #fa990c;
}

.dz-red {
    background: #e02020;
}

.del-zone-name {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.del-zone-time {
    font-size: 12px;
    font-weight: 600;
    color: #888;
}

.del-zone-fee {
    font-size: 12px;
    font-weight: 700;
}

.fee-free {
    color: #18a34a;
}

.fee-paid {
    color: #fa990c;
}

/* ════════════════════════════════════════
                12. TEAM / PEOPLE SECTION
     ════════════════════════════════════════ */
.team-section {
    margin-bottom: 64px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    margin-top: 32px;
}

.team-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .3s;
}

    .team-card:hover {
        border-color: #fa990c;
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(250,153,12,.08);
    }

.team-img {
    height: 180px;
    overflow: hidden;
    background: #f5f5f5;
}

    .team-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .3s;
    }

.team-card:hover .team-img img {
    transform: scale(1.04);
}

.team-body {
    padding: 16px;
}

.team-name {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 3px;
}

.team-role {
    font-size: 12px;
    font-weight: 700;
    color: #fa990c;
    margin-bottom: 7px;
}

.team-bio {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
}

/* ════════════════════════════════════════
                   13. FAQ — AEO RICH ANSWERS
         ════════════════════════════════════════ */
.faq-section {
    margin-bottom: 64px;
}

.faq-list {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .2s;
}

    .faq-item.open {
        border-color: #fa990c;
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    gap: 12px;
}

.faq-q-text {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    flex: 1;
    line-height: 1.4;
}

.faq-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    transition: .3s;
}

.faq-item.open .faq-arrow {
    background: #fa990c;
    color: #fff;
    border-color: #fa990c;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-item.open .faq-a {
    max-height: 400px;
}

.faq-a-inner {
    padding: 0 20px 18px;
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    border-top: 1px solid #f5f5f5;
    padding-top: 14px;
}

/* ════════════════════════════════════════
               14. RELATED SEARCHES — GEO TAGS
           ════════════════════════════════════════ */
.related-searches {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    padding: 24px 28px;
    margin-bottom: 56px;
}

.rs-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .rs-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ════════════════════════════════════════
                15. ABOUT SEO LONG-FORM CONTENT
            ════════════════════════════════════════ */
.seo-content {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 36px;
    margin-bottom: 56px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .seo-content h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 22px;
        font-weight: 700;
        color: #111;
        margin: 22px 0 10px;
        padding-top: 6px;
    }

        .seo-content h2:first-child {
            margin-top: 0;
        }

    .seo-content h3 {
        font-size: 15px;
        font-weight: 800;
        color: #222;
        margin: 18px 0 8px;
    }

    .seo-content p {
        font-size: 14px;
        color: #555;
        line-height: 1.85;
        margin-bottom: 14px;
    }

    .seo-content ul {
        margin: 0 0 14px 18px;
    }

        .seo-content ul li {
            font-size: 14px;
            color: #555;
            line-height: 1.8;
            margin-bottom: 5px;
        }

    .seo-content strong {
        color: #111;
    }

    .seo-content a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .seo-content a:hover {
            text-decoration: underline;
        }

/* ── VIDEO HERO ── */
.video-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#111 55%,#1a0800 100%);
    padding: 52px 20px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .video-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .video-hero::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -50px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.vh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.vh-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(28px,4vw,48px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

    .vh-title em {
        color: #fa990c;
        font-style: normal;
    }

.vh-sub {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    max-width: 520px;
    margin: 0 auto 26px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
/* Subscribe CTA */
.vh-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.vh-cta-yt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e02020;
    color: #fff;
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
}

    .vh-cta-yt:hover {
        background: #c41f1f;
        color: #fff;
    }

.vh-cta-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.15);
}

.vh-stats-row {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 22px;
    position: relative;
    z-index: 1;
}

.vh-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: #fa990c;
    line-height: 1;
}

.vh-stat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    font-weight: 600;
    margin-top: 2px;
}

/* ── PAGE WRAP ── */
.videos-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 60px;
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 28px;
    align-items: start;
}

/* ── CATEGORY PILLS ── */
.cat-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.cat-pill {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
}

    .cat-pill:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .cat-pill.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* ── FEATURED VIDEO ── */
.featured-video {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: .3s;
}

    .featured-video:hover {
        box-shadow: 0 8px 28px rgba(250,153,12,.1);
        border-color: #fa990c;
    }

.fv-thumb {
    position: relative;
    overflow: hidden;
    min-height: 260px;
}

    .fv-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .4s;
        position: absolute;
        inset: 0;
    }

.featured-video:hover .fv-thumb img {
    transform: scale(1.04);
}
/* Play button overlay */
.fv-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.featured-video:hover .fv-play-overlay {
    background: rgba(0,0,0,.5);
}

.fv-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

    .fv-play-btn i {
        color: #e02020;
        font-size: 22px;
        margin-left: 4px;
    }

.featured-video:hover .fv-play-btn {
    transform: scale(1.12);
    background: #fff;
}

.fv-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #fa990c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
}

.fv-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 7px;
}

.fv-body {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fv-cat {
    font-size: 11px;
    font-weight: 700;
    color: #fa990c;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.fv-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 24px;
    font-weight: 700;
    color: #111;
    line-height: 1.35;
    margin-bottom: 10px;
}

.fv-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin-bottom: 16px;
}

.fv-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #999;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

    .fv-meta i {
        color: #fa990c;
    }

.fv-watch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #111;
    color: #fff;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    align-self: flex-start;
}

    .fv-watch:hover {
        background: #fa990c;
        color: #fff;
    }

    .fv-watch i {
        font-size: 11px;
        transition: .2s;
    }

    .fv-watch:hover i {
        transform: translateX(3px);
    }

/* ── RESULTS BAR ── */
.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.results-count {
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

    .results-count strong {
        color: #111;
    }

.sort-sel {
    padding: 7px 13px;
    border: 1.5px solid #e8e8e8;
    border-radius: 9px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    background: #fff;
    cursor: pointer;
}

    .sort-sel:focus {
        border-color: #fa990c;
    }

/* ── VIDEO GRID ── */
.videos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 28px;
}

.video-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .3s;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
}

    .video-card:hover {
        border-color: #fa990c;
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(250,153,12,.1);
    }
/* Thumbnail */
.vc-thumb {
    position: relative;
    overflow: hidden;
    height: 176px;
}

    .vc-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .4s;
    }

.video-card:hover .vc-thumb img {
    transform: scale(1.05);
}

.vc-play {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .3s;
}

.video-card:hover .vc-play {
    opacity: 1;
}

.vc-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vc-play-btn i {
        color: #e02020;
        font-size: 18px;
        margin-left: 3px;
    }

.vc-cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(250,153,12,.92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.vc-dur {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}
/* Card body */
.vc-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vc-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
    margin-bottom: 7px;
}

.vc-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 10px;
}

.vc-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    color: #aaa;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .vc-meta i {
        color: #fa990c;
        font-size: 10px;
    }

.vc-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #fa990c;
    text-decoration: none;
    transition: .2s;
}

    .vc-link:hover {
        gap: 9px;
    }

    .vc-link i {
        font-size: 10px;
    }

/* ── PAGINATION ── */
.pg-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.pg-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .pg-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .pg-btn.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

/* ── SIDEBAR ── */
.video-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sb-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.sb-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sb-title i {
        color: #fa990c;
    }
/* Playlist items */
.playlist-item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

    .playlist-item:last-child {
        border-bottom: none;
    }

    .playlist-item:hover .pi-title {
        color: #fa990c;
    }

.pi-thumb {
    width: 80px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

    .pi-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pi-dur {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.pi-info {
}

.pi-title {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 3px;
    transition: .2s;
}

.pi-meta {
    font-size: 11px;
    color: #aaa;
}
/* Channel stats */
.channel-card {
    background: linear-gradient(135deg,#111,#1a1a1a);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
}

    .channel-card::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.15),transparent 65%);
        pointer-events: none;
    }

.ch-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(250,153,12,.5);
    margin: 0 auto 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

    .ch-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ch-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.ch-handle {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.ch-stats {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.chs-item {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.1);
}

    .chs-item:last-child {
        border-right: none;
    }

.chs-num {
    font-size: 16px;
    font-weight: 800;
    color: #fa990c;
}

.chs-lbl {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
}

.ch-sub-btn {
    display: block;
    padding: 10px 22px;
    background: #e02020;
    color: #fff;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    position: relative;
    z-index: 1;
}

    .ch-sub-btn:hover {
        background: #c41f1f;
        color: #fff;
    }
/* Tags */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-item {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .tag-item:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }
/* Newsletter */
.nl-card {
    background: linear-gradient(135deg,#fff9f0,#fff);
    border: 1.5px solid #fde4b2;
    border-radius: 16px;
    padding: 18px;
    text-align: center;
}

.nl-emoji {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.nl-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}

.nl-sub {
    font-size: 12px;
    color: #888;
    margin-bottom: 14px;
    line-height: 1.6;
}

.nl-inp {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #e3e3e3;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    margin-bottom: 9px;
}

    .nl-inp:focus {
        border-color: #fa990c;
        background: #fff;
    }

    .nl-inp::placeholder {
        color: #c0c0c0;
    }

.nl-btn {
    width: 100%;
    padding: 10px;
    background: #fa990c;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
}

    .nl-btn:hover {
        background: #e8880a;
    }

/* ── READING PROGRESS BAR ── */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: #fa990c;
    width: 0%;
    z-index: 10000;
    transition: width .1s linear;
    box-shadow: 0 0 6px rgba(250,153,12,.5);
}

/* ── PAGE LAYOUT ── */
.vd-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}

/* ── VIDEO MAIN COLUMN ── */
.vd-main {
}

/* ── YOUTUBE EMBED BLOCK ── */
.yt-embed-section {
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    position: relative;
}
/* 16:9 responsive ratio */
.yt-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

    .yt-ratio iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

/* ── VIDEO TITLE & META ROW ── */
.vd-title-block {
    background: #fff;
    border-radius: 0 0 20px 20px;
    border: 1px solid #eaeaea;
    border-top: none;
    padding: 22px 24px 18px;
    margin-bottom: 18px;
}

.vd-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff7ec;
    color: #fa990c;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.vd-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(20px,3vw,32px);
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    margin-bottom: 14px;
}

.vd-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #888;
    padding-bottom: 14px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 14px;
}

    .vd-meta-row i {
        color: #fa990c;
        font-size: 12px;
    }

    .vd-meta-row .vd-views {
        display: flex;
        align-items: center;
        gap: 5px;
    }

/* Share buttons */
.vd-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vd-share-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    margin-right: 2px;
}

.sh-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
    transition: .2s;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Outfit',sans-serif;
}

    .sh-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .sh-btn.yt {
        background: #e02020;
        border-color: #e02020;
        color: #fff;
    }

        .sh-btn.yt:hover {
            background: #c41f1f;
        }

    .sh-btn.wa:hover {
        border-color: #25d366;
        color: #25d366;
    }

    .sh-btn.tw:hover {
        border-color: #000;
        color: #000;
    }

/* Author chip */
.vd-author-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
}

.vda-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fde4b2;
    flex-shrink: 0;
}

    .vda-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.vda-info {
}

.vda-name {
    font-size: 14px;
    font-weight: 800;
    color: #111;
}

.vda-role {
    font-size: 12px;
    color: #888;
}

/* ── VIDEO DESCRIPTION / CONTENT ── */
.vd-content-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 32px 32px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Section label (reused from project) */
.sec-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fa990c;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

    .sec-label::before {
        content: '';
        width: 24px;
        height: 2px;
        background: #fa990c;
        border-radius: 2px;
        flex-shrink: 0;
    }

/* Rich text content styles */
.vd-body {
    font-size: 15px;
    color: #444;
    line-height: 1.85;
}

    .vd-body h2 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 22px;
        font-weight: 700;
        color: #111;
        margin: 28px 0 11px;
        padding-top: 4px;
        border-bottom: 2px solid #f5f5f5;
        padding-bottom: 9px;
    }

    .vd-body h3 {
        font-size: 16px;
        font-weight: 800;
        color: #222;
        margin: 20px 0 9px;
    }

    .vd-body p {
        margin-bottom: 16px;
    }

    .vd-body ul, .vd-body ol {
        margin: 0 0 16px 20px;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .vd-body li {
        line-height: 1.75;
        color: #444;
    }

    .vd-body strong {
        color: #111;
    }

    .vd-body a {
        color: #fa990c;
        font-weight: 700;
        text-decoration: none;
    }

        .vd-body a:hover {
            text-decoration: underline;
        }

/* Callout box */
.callout {
    border-radius: 13px;
    padding: 16px 18px;
    margin: 20px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.callout-tip {
    background: #ecfff0;
    border: 1px solid #b8f0cc;
}

.callout-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.callout-warn {
    background: #fff7ec;
    border: 1px solid #fde4b2;
}

.callout-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.2;
}

.callout-body strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
}

.callout-body p {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    margin: 0;
}

/* Timestamp list */
.timestamps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 18px;
}

.ts-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #f8f8f8;
    border: 1px solid #eaeaea;
    text-decoration: none;
    transition: .2s;
}

    .ts-item:hover {
        background: #fff7ec;
        border-color: #fa990c;
    }

.ts-time {
    font-size: 12px;
    font-weight: 800;
    color: #fa990c;
    background: #fff0db;
    padding: 3px 9px;
    border-radius: 6px;
    min-width: 52px;
    text-align: center;
    flex-shrink: 0;
}

.ts-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.ts-desc {
    font-size: 12px;
    color: #aaa;
    margin-left: auto;
}

/* Highlight callout blockquote */
.vd-quote {
    border-left: 4px solid #fa990c;
    background: #fff9f0;
    border-radius: 0 13px 13px 0;
    padding: 16px 18px;
    margin: 20px 0;
    font-family: 'Cormorant Garamond',serif;
    font-size: 18px;
    font-style: italic;
    color: #333;
}

/* Stats strip inside content */
.content-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    background: linear-gradient(135deg,#111,#1a1a1a);
    border-radius: 14px;
    margin: 20px 0;
    overflow: hidden;
}

.cs-item {
    padding: 16px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.1);
}

    .cs-item:last-child {
        border-right: none;
    }

.cs-num {
    font-size: 20px;
    font-weight: 800;
    color: #fa990c;
}

.cs-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
    font-weight: 600;
}

/* Ingredients grid (for recipe videos) */
.ing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin: 14px 0 20px;
}

.ing-item {
    background: #f8f8f8;
    border-radius: 11px;
    padding: 12px;
    text-align: center;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .ing-item:hover {
        border-color: #fa990c;
        background: #fff9f0;
    }

.ing-emoji {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
}

.ing-name {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    margin-bottom: 2px;
}

.ing-amount {
    font-size: 11px;
    color: #888;
}

/* Tags */
.vd-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
}

    .vd-tags span {
        font-size: 12px;
        font-weight: 700;
        color: #888;
        align-self: center;
    }

.vd-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .vd-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* Bottom share strip */
.vd-share-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #f8f8f8;
    border-radius: 13px;
    padding: 16px 18px;
    border: 1px solid #eaeaea;
    margin-top: 22px;
}

    .vd-share-bottom span {
        font-size: 14px;
        font-weight: 700;
        color: #111;
    }

/* ── PRODUCT CTA CARD ── */
.product-cta-card {
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2a1400 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .product-cta-card::before {
        content: '';
        position: absolute;
        top: -60px;
        right: -40px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

.pcc-emoji {
    font-size: 40px;
    display: block;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.pcc-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 7px;
    position: relative;
    z-index: 1;
}

    .pcc-title em {
        color: #fa990c;
        font-style: normal;
    }

.pcc-sub {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-bottom: 20px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.pcc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fa990c;
    color: #fff;
    padding: 13px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    position: relative;
    z-index: 1;
}

    .pcc-btn:hover {
        background: #e8880a;
        color: #fff;
        transform: translateY(-2px);
    }

/* ── SIDEBAR ── */
.vd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sb-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.sb-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .sb-title i {
        color: #fa990c;
    }

/* Up next list */
.up-next-item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: flex-start;
    text-decoration: none;
}

    .up-next-item:last-child {
        border-bottom: none;
    }

.un-thumb {
    width: 84px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

    .un-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .3s;
    }

.up-next-item:hover .un-thumb img {
    transform: scale(1.05);
}

.un-play {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .2s;
}

.up-next-item:hover .un-play {
    opacity: 1;
}

.un-play i {
    color: #fff;
    font-size: 14px;
}

.un-dur {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.un-info {
}

.un-title {
    font-size: 12px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 3px;
    transition: .2s;
}

.up-next-item:hover .un-title {
    color: #fa990c;
}

.un-meta {
    font-size: 11px;
    color: #aaa;
}

/* Sticky TOC */
.toc-sticky {
    position: sticky;
    top: 88px;
}

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .toc-list li a {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px 0;
        font-size: 12px;
        color: #555;
        text-decoration: none;
        transition: .2s;
        line-height: 1.35;
    }

        .toc-list li a:hover {
            color: #fa990c;
        }

        .toc-list li a::before {
            content: '';
            width: 12px;
            height: 2px;
            background: #fa990c;
            border-radius: 2px;
            flex-shrink: 0;
        }

.toc-ts {
    font-size: 10px;
    font-weight: 800;
    color: #fa990c;
    background: #fff0db;
    padding: 2px 6px;
    border-radius: 5px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Channel card */
.channel-mini {
    background: linear-gradient(135deg,#111,#1e1e1e);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    border: 1px solid #333;
}

.cm-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(250,153,12,.5);
    margin: 0 auto 10px;
}

    .cm-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.cm-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
}

.cm-handle {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-bottom: 14px;
}

.cm-stats {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
}

.cms-item {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.1);
}

    .cms-item:last-child {
        border-right: none;
    }

.cms-num {
    font-size: 14px;
    font-weight: 800;
    color: #fa990c;
}

.cms-lbl {
    font-size: 10px;
    color: rgba(255,255,255,.45);
}

.cm-sub-btn {
    display: block;
    padding: 9px 18px;
    background: #e02020;
    color: #fff;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

    .cm-sub-btn:hover {
        background: #c41f1f;
        color: #fff;
    }

/* Tags sidebar */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-item {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .tag-item:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ── RELATED VIDEOS ── */
.related-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

.rel-sec-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .rel-sec-title i {
        color: #fa990c;
        font-size: 24px;
    }

.related-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}
/* Reuse .video-card styles */
.video-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .3s;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    display: flex;
    flex-direction: column;
}

    .video-card:hover {
        border-color: #fa990c;
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(250,153,12,.1);
    }

.vc-thumb {
    position: relative;
    overflow: hidden;
    height: 176px;
}

    .vc-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .4s;
    }

.video-card:hover .vc-thumb img {
    transform: scale(1.05);
}

.vc-play {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .3s;
}

.video-card:hover .vc-play {
    opacity: 1;
}

.vc-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vc-play-btn i {
        color: #e02020;
        font-size: 18px;
        margin-left: 3px;
    }

.vc-cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(250,153,12,.92);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.vc-dur {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.vc-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vc-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
    margin-bottom: 7px;
}

.vc-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 10px;
}

.vc-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    color: #aaa;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .vc-meta i {
        color: #fa990c;
        font-size: 10px;
    }

.vc-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #fa990c;
    text-decoration: none;
    transition: .2s;
}

    .vc-link:hover {
        gap: 9px;
    }

    .vc-link i {
        font-size: 10px;
    }

/* ── RELATED SEARCHES ── */
.rs-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.rs-box {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    padding: 18px 22px;
}

.rs-box-title {
    font-size: 13px;
    font-weight: 800;
    color: #111;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rs-box-title i {
        color: #fa990c;
    }

.rs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rs-tag {
    display: inline-block;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #eaeaea;
    transition: .2s;
}

    .rs-tag:hover {
        background: #fff7ec;
        color: #fa990c;
        border-color: #fa990c;
    }

/* ════════════════════════════════════════
           SHARED UTILITIES
        ════════════════════════════════════════ */
.page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sec-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fa990c;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

    .sec-label::before {
        content: '';
        width: 26px;
        height: 2px;
        background: #fa990c;
        border-radius: 2px;
        flex-shrink: 0;
    }

.sec-h2 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(26px,3.5vw,42px);
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    margin-bottom: 14px;
}

    .sec-h2 em {
        color: #fa990c;
        font-style: normal;
    }

.sec-body {
    font-size: 15px;
    color: #555;
    line-height: 1.85;
}

    .sec-body p {
        margin-bottom: 14px;
    }

        .sec-body p:last-child {
            margin-bottom: 0;
        }

/* Primary CTA */
.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #111;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
}

    .btn-dark:hover {
        background: #fa990c;
        color: #fff;
        transform: translateY(-2px);
    }

.btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fa990c;
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    box-shadow: 0 6px 20px rgba(250,153,12,.3);
}

    .btn-orange:hover {
        background: #e8880a;
        color: #fff;
        transform: translateY(-2px);
    }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    color: #111;
    padding: 13px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1.5px solid #e8e8e8;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
}

    .btn-outline:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* ════════════════════════════════════════
           1. HERO
        ════════════════════════════════════════ */
.partner-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 55%,#2a1400 100%);
    padding: 72px 20px 64px;
    position: relative;
    overflow: hidden;
}

    .partner-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -60px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .partner-hero::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -50px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(34px,4.5vw,56px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
}

    .hero-title em {
        color: #fa990c;
        font-style: normal;
    }

.hero-desc {
    font-size: 15px;
    color: rgba(255,255,255,.7);
    line-height: 1.85;
    margin-bottom: 28px;
    max-width: 520px;
}

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Hero right — partner type selector */
.hero-right {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 32px;
}

.hr-heading {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.hr-sub {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-bottom: 24px;
}

.partner-type-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pt-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: .3s;
    text-decoration: none;
}

    .pt-item:hover {
        background: rgba(250,153,12,.15);
        border-color: rgba(250,153,12,.4);
    }

    .pt-item.active {
        background: rgba(250,153,12,.18);
        border-color: rgba(250,153,12,.6);
    }

.pt-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(250,153,12,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.pt-info {
}

.pt-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.pt-desc {
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

.pt-arrow {
    margin-left: auto;
    color: rgba(250,153,12,.7);
    font-size: 12px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════
           2. STATS STRIP
        ════════════════════════════════════════ */
.stats-strip {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    padding: 28px 20px;
}

.stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    text-align: center;
}

.stat-item {
    padding: 10px 16px;
    border-right: 1px solid #f0f0f0;
}

    .stat-item:last-child {
        border-right: none;
    }

.stat-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 32px;
    font-weight: 700;
    color: #fa990c;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #444;
}

.stat-sub {
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
}

/* ════════════════════════════════════════
           3. WHY PARTNER — benefits
        ════════════════════════════════════════ */
.why-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.why-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-grid {
    display: grid;
    gap: 48px;
    align-items: center;
    margin-top: 40px;
}

.why-text {
}

.why-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.wb-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #eaeaea;
    transition: .3s;
}

    .wb-item:hover {
        border-color: #fa990c;
        transform: translateX(4px);
    }

.wb-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #fff7ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fa990c;
    flex-shrink: 0;
    transition: .3s;
}

.wb-item:hover .wb-icon {
    background: #fa990c;
    color: #fff;
}

.wb-info {
}

.wb-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
}

.wb-body {
    font-size: 13px;
    color: #666;
    line-height: 1.65;
}

/* Why right — image with floating cards */
.why-visual {
    position: relative;
    padding: 16px;
}

.why-main-img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    height: 420px;
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
    display: block;
}

.why-float-1 {
    position: absolute;
    top: 28px;
    left: -12px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    border: 1px solid #f0f0f0;
    min-width: 150px;
}

.wf-num {
    font-size: 24px;
    font-weight: 800;
    color: #fa990c;
    line-height: 1;
}

.wf-lbl {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-top: 2px;
}

.why-float-2 {
    position: absolute;
    bottom: 28px;
    right: -12px;
    background: #111;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf2-icon {
    font-size: 22px;
}

.wf2-text {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.wf2-sub {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

/* ════════════════════════════════════════
           4. PARTNERSHIP TYPES
        ════════════════════════════════════════ */
.types-section {
    padding: 64px 0;
    background: #fff;
}

.types-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 40px;
}

.type-card {
    border-radius: 22px;
    border: 1.5px solid #eaeaea;
    overflow: hidden;
    transition: .35s;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
}

    .type-card:hover {
        border-color: #fa990c;
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(250,153,12,.12);
    }

    .type-card.featured {
        border-color: #fa990c;
        box-shadow: 0 8px 32px rgba(250,153,12,.15);
    }

.type-card-top {
    padding: 28px 24px 22px;
    position: relative;
}

.tc-featured-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.type-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.tc-green .type-icon {
    background: #ecfff0;
    color: #18a34a;
}

.tc-orange .type-icon {
    background: #fff7ec;
    color: #fa990c;
}

.tc-blue .type-icon {
    background: #eff6ff;
    color: #2563eb;
}

.tc-purple .type-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

.tc-red .type-icon {
    background: #fff5f5;
    color: #dc2626;
}

.tc-dark .type-icon {
    background: #1a1a1a;
    color: #fa990c;
}

.type-name {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.type-tagline {
    font-size: 13px;
    font-weight: 600;
    color: #fa990c;
    margin-bottom: 10px;
}

.type-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 16px;
}

.type-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .type-highlights li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        color: #444;
    }

        .type-highlights li i {
            color: #18a34a;
            margin-top: 2px;
            flex-shrink: 0;
            font-size: 11px;
        }

.type-card-bottom {
    padding: 16px 24px;
    margin-top: auto;
    border-top: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
}

.tc-invest {
    font-size: 12px;
    color: #888;
    font-weight: 600;
}

    .tc-invest strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: #111;
    }

.tc-btn {
    padding: 9px 18px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.type-card:hover .tc-btn {
    background: #fa990c;
}

.type-card.featured .tc-btn {
    background: #fa990c;
}

    .type-card.featured .tc-btn:hover {
        background: #e8880a;
    }

/* ════════════════════════════════════════
           5. HOW IT WORKS — steps
        ════════════════════════════════════════ */
.process-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.process-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    margin-top: 48px;
    position: relative;
}

    .process-steps::before {
        content: '';
        position: absolute;
        top: 30px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg,#fa990c,#e8880a);
        z-index: 0;
    }

.step-item {
    text-align: center;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fa990c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(250,153,12,.2);
    transition: .3s;
}

.step-item:hover .step-circle {
    background: #fa990c;
}

    .step-item:hover .step-circle .step-ico {
        color: #fff;
    }

.step-ico {
    color: #fa990c;
    font-size: 20px;
    transition: .3s;
}

.step-num-label {
    position: absolute;
    top: -6px;
    right: calc(50% - 40px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.step-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
}

/* ════════════════════════════════════════
           6. PARTNER SUCCESS STORIES
        ════════════════════════════════════════ */
.stories-section {
    padding: 64px 0;
    background: #fff;
}

.stories-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 40px;
}

.story-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .3s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .story-card:hover {
        border-color: #fa990c;
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(250,153,12,.1);
    }

.story-img {
    height: 160px;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}

    .story-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .35s;
    }

.story-card:hover .story-img img {
    transform: scale(1.04);
}

.story-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.story-body {
    padding: 18px;
}

.story-type {
    font-size: 10px;
    font-weight: 700;
    color: #fa990c;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 7px;
}

.story-name {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
}

.story-location {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .story-location i {
        color: #fa990c;
        font-size: 11px;
    }

.story-quote {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    font-style: italic;
    border-left: 3px solid #fa990c;
    padding-left: 12px;
    margin-bottom: 14px;
}

.story-stats {
    display: flex;
    gap: 16px;
}

.story-stat {
}

.ss-num {
    font-size: 18px;
    font-weight: 800;
    color: #fa990c;
}

.ss-lbl {
    font-size: 11px;
    color: #888;
    font-weight: 600;
}

/* ════════════════════════════════════════
           7. SUPPORT WE PROVIDE
        ════════════════════════════════════════ */
.support-section {
    padding: 64px 0;
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2a1400 100%);
    position: relative;
    overflow: hidden;
}

    .support-section::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -60px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.15),transparent 65%);
        pointer-events: none;
    }

.support-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-top: 40px;
}

.support-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 24px 18px;
    transition: .3s;
    text-align: center;
}

    .support-card:hover {
        background: rgba(250,153,12,.12);
        border-color: rgba(250,153,12,.4);
        transform: translateY(-4px);
    }

.support-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(250,153,12,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 22px;
    color: #fa990c;
}

.support-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.support-body {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
}

/* ════════════════════════════════════════
           8. TERRITORY MAP / EXPANSION
        ════════════════════════════════════════ */
.territory-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.territory-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.territory-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 40px;
}

.territory-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.territory-item {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .3s;
}

    .territory-item:hover {
        border-color: #fa990c;
        transform: translateX(4px);
    }

.t-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.t-green {
    background: #18a34a;
}

.t-orange {
    background: #fa990c;
}

.t-blue {
    background: #2563eb;
}

.t-info {
    flex: 1;
}

.t-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.t-detail {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.t-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

.ts-open {
    background: #ecfff0;
    color: #18a34a;
}

.ts-limited {
    background: #fff7ec;
    color: #fa990c;
}

.ts-coming {
    background: #eff6ff;
    color: #2563eb;
}

.expansion-visual {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 28px;
}

.ev-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ev-title i {
        color: #fa990c;
    }

.ev-map-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg,#f8f8f8,#f0f0f0);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #888;
    font-weight: 600;
    border: 1px dashed #ddd;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

    .ev-map-placeholder i {
        font-size: 32px;
        color: #fa990c;
    }

.ev-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.ev-stat {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.evs-num {
    font-size: 20px;
    font-weight: 800;
    color: #fa990c;
}

.evs-lbl {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    margin-top: 2px;
}

/* ════════════════════════════════════════
           9. PARTNER APPLICATION FORM
        ════════════════════════════════════════ */
.form-section {
    padding: 64px 0;
    background: #fff;
}

.form-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 40px;
}

.form-left {
}

    .form-left .sec-body {
        margin-top: 12px;
    }

.form-perks {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
}

.fp-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

    .fp-item i {
        color: #18a34a;
        font-size: 13px;
    }

.form-right {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #eaeaea;
    padding: 36px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.form-heading {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.form-subheading {
    font-size: 13px;
    color: #888;
    margin-bottom: 24px;
}

/* Form fields */
.f-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

    .f-row.full {
        grid-template-columns: 1fr;
    }

.f-group {
    display: flex;
    flex-direction: column;
}

    .f-group label {
        font-size: 11px;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 6px;
    }

        .f-group label .req {
            color: #fa990c;
            margin-left: 2px;
        }

.f-input {
    padding: 12px 14px;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    color: #111;
}

    .f-input:focus {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .f-input.err {
        border-color: #e02020;
        background: #fff5f5;
    }

    .f-input.ok {
        border-color: #18a34a;
        background: #f0fff4;
    }

    .f-input::placeholder {
        color: #c0c0c0;
    }

select.f-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    padding-right: 30px;
}

.f-hint {
    font-size: 11px;
    margin-top: 3px;
    min-height: 14px;
}

    .f-hint.e {
        color: #e02020;
    }

    .f-hint.s {
        color: #18a34a;
    }

textarea.f-input {
    resize: vertical;
    min-height: 96px;
}

/* Partner type checkboxes */
.partner-type-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.ptc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1.5px solid #e3e3e3;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    transition: .2s;
}

    .ptc-item:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .ptc-item.selected {
        border-color: #fa990c;
        background: #fff9f0;
        color: #fa990c;
    }

    .ptc-item input {
        accent-color: #fa990c;
        cursor: pointer;
    }

/* Terms */
.f-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 10px;
    border: 1.5px solid #e3e3e3;
    cursor: pointer;
    margin-bottom: 16px;
    transition: .2s;
}

    .f-terms:hover {
        border-color: #fa990c;
    }

    .f-terms input {
        width: 15px;
        height: 15px;
        accent-color: #fa990c;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .f-terms span {
        font-size: 12px;
        color: #555;
        line-height: 1.6;
    }

        .f-terms span a {
            color: #fa990c;
            font-weight: 700;
            text-decoration: none;
        }

/* Submit */
.f-submit {
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

    .f-submit:hover:not(:disabled) {
        background: #fa990c;
    }

    .f-submit:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .f-submit.loading {
        background: #fa990c;
        pointer-events: none;
    }

    .f-submit .btn-spin {
        display: none;
    }

    .f-submit.loading .btn-label {
        display: none;
    }

    .f-submit.loading .btn-spin {
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Success state */
.form-success {
    display: none;
    text-align: center;
    padding: 20px;
}

    .form-success.show {
        display: block;
    }

.fs-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg,#18a34a,#22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
    color: #fff;
    animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.form-success h3 {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.form-success p {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 16px;
}

.fs-ref {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 14px;
    font-size: 13px;
    color: #555;
    font-family: monospace;
    letter-spacing: 1px;
    font-weight: 700;
}

/* ════════════════════════════════════════
           10. FAQ
        ════════════════════════════════════════ */
.faq-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.faq-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.faq-list {
    margin-top: 36px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .2s;
    margin-bottom:10px;
}

    .faq-item.open {
        border-color: #fa990c;
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    gap: 12px;
}

.faq-qt {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    flex: 1;
    line-height: 1.4;
}

.faq-arr {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    transition: .3s;
}

.faq-item.open .faq-arr {
    background: #fa990c;
    color: #fff;
    border-color: #fa990c;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    padding: 0px 20px 20px;
}

.faq-item.open .faq-a {
    max-height: 300px;
}

.faq-ai {
    padding: 0 20px 18px;
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    border-top: 1px solid #f5f5f5;
    padding-top: 14px;
}

/* ════════════════════════════════════════
           11. CONTACT CTA STRIP
        ════════════════════════════════════════ */
.contact-strip {
    background: #fff;
    border-top: 1px solid #eaeaea;
    padding: 40px 20px;
    text-align: center;
}

.cs-inner {
    max-width: 700px;
    margin: 0 auto;
}

.cs-title {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.cs-sub {
    font-size: 14px;
    color: #888;
    margin-bottom: 24px;
    line-height: 1.7;
}

.cs-methods {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.cs-method {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    color: #333;
    background: #fff;
}

    .cs-method:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .cs-method i {
        font-size: 16px;
    }

    .cs-method.primary {
        background: #111;
        color: #fff;
        border-color: #111;
    }

        .cs-method.primary:hover {
            background: #fa990c;
            border-color: #fa990c;
            color: #fff;
        }

/* NOTIFICATION BELL + DROPDOWN */
.notif-bell-wrap {
    position: relative;
}

.notif-bell {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: .2s;
}

    .notif-bell:hover {
        background: #fff7ec;
    }

    .notif-bell.has-unread {
        animation: bellRing 2.5s ease-in-out infinite;
    }

@keyframes bellRing {
    0%,90%,100% {
        transform: rotate(0);
    }

    92% {
        transform: rotate(-12deg);
    }

    94% {
        transform: rotate(10deg);
    }

    96% {
        transform: rotate(-8deg);
    }

    98% {
        transform: rotate(4deg);
    }
}

.notif-bell .bdg {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e02020;
    color: #fff;
    font-size: 10px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    border: 2px solid #fff;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-height: 480px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    box-shadow: 0 16px 48px rgba(0,0,0,.14);
    overflow: hidden;
    display: none;
    z-index: 1000;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .22s ease,opacity .22s ease;
}

    .notif-dropdown.show {
        display: flex;
        flex-direction: column;
        transform: translateY(0);
        opacity: 1;
    }

.nd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #f5f5f5;
    flex-shrink: 0;
}

.nd-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .nd-title i {
        color: #fa990c;
    }

.nd-mark-all {
    font-size: 11px;
    font-weight: 700;
    color: #fa990c;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Outfit',sans-serif;
}

    .nd-mark-all:hover {
        text-decoration: underline;
    }

.nd-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #f5f5f5;
    flex-shrink: 0;
}

.nd-tab {
    padding: 5px 13px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #666;
}

    .nd-tab:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .nd-tab.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

.nd-list {
    overflow-y: auto;
    flex: 1;
}

    .nd-list::-webkit-scrollbar {
        width: 5px;
    }

    .nd-list::-webkit-scrollbar-thumb {
        background: #e0e0e0;
        border-radius: 10px;
    }

.nd-item {
    display: flex;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid #f7f7f7;
    cursor: pointer;
    transition: .15s;
    position: relative;
}

    .nd-item:hover {
        background: #fafafa;
    }

    .nd-item.unread {
        background: #fff9f0;
    }

        .nd-item.unread:hover {
            background: #fff5e6;
        }

        .nd-item.unread::before {
            content: '';
            position: absolute;
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #fa990c;
        }

.nd-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.nd-text {
    flex: 1;
    min-width: 0;
}

.nd-msg-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin-bottom: 2px;
}

.nd-msg-body {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nd-time {
    font-size: 10.5px;
    color: #bbb;
    margin-top: 4px;
    font-weight: 600;
}

.nd-footer {
    padding: 11px 16px;
    text-align: center;
    border-top: 1px solid #f5f5f5;
    flex-shrink: 0;
}

    .nd-footer a {
        font-size: 12.5px;
        font-weight: 700;
        color: #fa990c;
        text-decoration: none;
    }

        .nd-footer a:hover {
            text-decoration: underline;
        }

.nd-empty {
    padding: 50px 20px;
    text-align: center;
}

    .nd-empty .emoji {
        font-size: 38px;
        display: block;
        margin-bottom: 10px;
    }

    .nd-empty p {
        font-size: 13px;
        color: #999;
    }

@media(max-width:480px) {
    .notif-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 78vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

        .notif-dropdown.show {
            transform: translateY(0);
        }
}

/* FULL NOTIFICATIONS PAGE */
.notif-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 55%,#2a1400 100%);
    padding: 48px 20px 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .notif-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -80px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

.nh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.nh-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(26px,4vw,44px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

    .nh-title em {
        color: #fa990c;
        font-style: normal;
    }

.nh-sub {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    position: relative;
    z-index: 1;
}

.notif-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.np-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.np-tab {
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #666;
}

    .np-tab:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .np-tab.active {
        background: #fa990c;
        color: #fff;
        border-color: #fa990c;
    }

    .np-tab .np-tab-count {
        margin-left: 5px;
        font-size: 10px;
        background: rgba(255,255,255,.25);
        padding: 1px 6px;
        border-radius: 10px;
    }

    .np-tab:not(.active) .np-tab-count {
        background: #f0f0f0;
        color: #888;
    }

.np-mark-all-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    color: #555;
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .np-mark-all-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

.day-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px;
}

    .day-divider:first-child {
        margin-top: 0;
    }

    .day-divider span {
        font-size: 11.5px;
        font-weight: 800;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: .6px;
        white-space: nowrap;
    }

    .day-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #eee;
    }

.notif-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eaeaea;
    padding: 16px 18px;
    margin-bottom: 10px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    cursor: pointer;
    transition: .2s;
    position: relative;
    box-shadow: 0 1px 5px rgba(0,0,0,.03);
}

    .notif-card:hover {
        border-color: #e8d5b5;
        box-shadow: 0 5px 18px rgba(0,0,0,.06);
    }

    .notif-card.unread {
        background: #fffaf2;
        border-color: #fde4b2;
    }

        .notif-card.unread::before {
            content: '';
            position: absolute;
            left: 0;
            top: 18px;
            bottom: 18px;
            width: 3px;
            background: #fa990c;
            border-radius: 0 4px 4px 0;
        }

.nc-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.ic-order {
    background: #fff7ec;
    color: #fa990c;
}

.ic-delivery {
    background: #ecfff0;
    color: #18a34a;
}

.ic-offer {
    background: #fff0f5;
    color: #e02080;
}

.ic-payment {
    background: #eff6ff;
    color: #2563eb;
}

.ic-review {
    background: #fffbea;
    color: #ca8a04;
}

.ic-account {
    background: #f5f3ff;
    color: #7c3aed;
}

.ic-alert {
    background: #fff5f5;
    color: #e02020;
}

.nc-body {
    flex: 1;
    min-width: 0;
}

.nc-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.nc-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
}

.nc-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fa990c;
    flex-shrink: 0;
    margin-top: 5px;
}

.nc-msg {
    font-size: 13px;
    color: #666;
    line-height: 1.65;
    margin-top: 3px;
}

.nc-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    flex-wrap: wrap;
}

.nc-time {
    font-size: 11.5px;
    color: #bbb;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nc-tag {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}

.tag-order {
    background: #fff7ec;
    color: #fa990c;
}

.tag-delivery {
    background: #ecfff0;
    color: #18a34a;
}

.tag-offer {
    background: #fff0f5;
    color: #e02080;
}

.tag-payment {
    background: #eff6ff;
    color: #2563eb;
}

.tag-review {
    background: #fffbea;
    color: #ca8a04;
}

.tag-account {
    background: #f5f3ff;
    color: #7c3aed;
}

.tag-alert {
    background: #fff5f5;
    color: #e02020;
}

.nc-actions {
    display: flex;
    gap: 8px;
    margin-top: 11px;
}

.nc-act-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
    font-family: 'Outfit',sans-serif;
}

    .nc-act-btn:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .nc-act-btn.primary {
        background: #111;
        color: #fff;
        border-color: #111;
    }

        .nc-act-btn.primary:hover {
            background: #fa990c;
            border-color: #fa990c;
        }

.nc-dismiss {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #aaa;
    font-size: 11px;
    border: none;
    cursor: pointer;
    opacity: 0;
    transition: .2s;
}

.notif-card:hover .nc-dismiss {
    opacity: 1;
}

.nc-dismiss:hover {
    background: #ffe4e4;
    color: #e02020;
}

.notif-card.removing {
    opacity: 0;
    transform: translateX(40px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
    overflow: hidden;
}

.np-load-more {
    display: block;
    width: 100%;
    padding: 13px;
    margin-top: 8px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    transition: .2s;
    font-family: 'Outfit',sans-serif;
}

    .np-load-more:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

.np-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
}

    .np-empty .emoji {
        font-size: 48px;
        display: block;
        margin-bottom: 14px;
    }

    .np-empty h3 {
        font-size: 17px;
        font-weight: 800;
        color: #111;
        margin-bottom: 6px;
    }

    .np-empty p {
        font-size: 13px;
        color: #888;
    }

/* ──────────────────────────────────────────
   POPUP-SPECIFIC OVERRIDES
   Narrower container needs tighter sizing
────────────────────────────────────────── */
.modal-inner .step-title {
    font-size: 19px;
    margin-bottom: 4px;
}

.modal-inner .step-subtitle {
    font-size: 12px;
    margin-bottom: 16px;
}

.modal-inner .trust-strip {
    gap: 5px;
    margin-bottom: 14px;
}

.modal-inner .trust-chip {
    font-size: 10px;
    padding: 4px 8px;
}

.modal-inner .mobile-group-wrap {
    margin-bottom: 2px;
}

.modal-inner .field-label {
    margin-bottom: 6px;
}

.modal-inner .mobile-field {
    min-height: 48px;
}

    .modal-inner .mobile-field input[type="tel"] {
        font-size: 14px;
        padding: 12px 13px;
    }

.modal-inner .mob-prefix {
    font-size: 13px;
    padding: 0 10px;
    min-width: 68px;
}

    .modal-inner .mob-prefix .flag {
        font-size: 15px;
    }

.modal-inner .terms-row {
    padding: 9px 11px;
    margin-bottom: 14px;
}

    .modal-inner .terms-row span {
        font-size: 11px;
    }

.modal-inner .btn-primary {
    padding: 13px;
    font-size: 14px;
    margin-bottom: 12px;
}

.modal-inner .btn-green {
    padding: 13px;
    font-size: 14px;
    margin-bottom: 12px;
}

.modal-inner .or-divider {
    margin: 2px 0 12px;
}

.modal-inner .social-row {
    gap: 8px;
    margin-bottom: 14px;
}

.modal-inner .btn-social {
    padding: 9px;
    font-size: 12px;
    gap: 5px;
}

.modal-inner .benefit-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
}

.modal-inner .benefit-item {
    padding: 7px 9px;
    font-size: 11px;
    gap: 6px;
}

    .modal-inner .benefit-item i {
        font-size: 11px;
    }

.modal-inner .otp-boxes-row {
    gap: 9px;
    margin-bottom: 4px;
}

.modal-inner .otp-box {
    width: 56px;
    height: 60px;
    font-size: 22px;
    border-radius: 12px;
}

.modal-inner .resend-row {
    margin-bottom: 14px;
}

.modal-inner .mobile-confirm-chip {
    padding: 9px 12px;
    margin-bottom: 14px;
}

.modal-inner .mcc-number {
    font-size: 14px;
}

.modal-inner .otp-demo-hint {
    font-size: 11px;
    padding: 8px 11px;
    margin-bottom: 12px;
}

.modal-inner .field-msg {
    margin-bottom: 10px;
}

.modal-inner .login-footnote {
    font-size: 11px;
}
/* On very narrow popup screens */
@media(max-width:400px) {
    .modal-inner .otp-box {
        width: 50px;
        height: 54px;
        font-size: 20px;
    }

    .modal-inner .otp-boxes-row {
        gap: 7px;
    }
}

/* ========== CONFIRMATION PAGE ========== */
.confirm-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 40px 80px;
}

/* ========== SUCCESS CARD ========== */
.success-card {
    background: #fff;
    border-radius: 28px;
    border: 1px solid #e3e6eb;
    overflow: hidden;
    animation: slideUp 0.6s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

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

/* SUCCESS TOP BANNER */
.success-top {
    background: linear-gradient(135deg,#0e7c3a 0%,#18a34a 60%,#22c55e 100%);
    padding: 60px 40px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .success-top::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.success-icon-wrap {
    position: relative;
    z-index: 1;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.success-icon-bg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    animation: popIn 0.6s cubic-bezier(0.175,0.885,0.32,1.275) 0.3s both;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Confetti circles */
.confetti-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.4);
    animation: ringPulse 1.8s ease-out 0.4s infinite;
}
@keyframes ringPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.success-top h1 {
    position: relative;
    z-index: 1;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.success-top p {
    position: relative;
    z-index: 1;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
}

/* Floating confetti */
.confetti-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall 3s linear infinite;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ORDER ID BAND */
.order-id-band {
    background: #f0fff4;
    border-bottom: 1px solid #d1fae5;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.oid-left {
}

.oid-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.oid-value {
    font-size: 24px;
    font-weight: 800;
    color: #18a34a;
    letter-spacing: 2px;
    font-family: monospace;
}

.oid-copy {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #18a34a;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
}

    .oid-copy:hover {
        text-decoration: underline;
    }

.oid-date {
    text-align: right;
}

    .oid-date .oid-label {
        text-align: right;
    }

.oid-date-val {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.oid-time {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* SUCCESS BODY */
.confirm-body {
    padding: 32px 40px;
}

/* DELIVERY TIMELINE */
.sucesstimeline {
    margin-bottom: 36px;
}

.tl-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tl-title i {
        color: #fa990c;
    }

.tl-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tl-step {
    display: flex;
    gap: 16px;
    position: relative;
}

    .tl-step:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 32px;
        width: 2px;
        height: calc(100% - 8px);
        background: #e3e6eb;
    }

.tl-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

    .tl-dot.done {
        background: #18a34a;
        color: #fff;
    }

    .tl-dot.active {
        background: #fa990c;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(250,153,12,0.2);
    }

    .tl-dot.pending {
        background: #f0f0f0;
        color: #aaa;
    }

.tl-content {
    padding-bottom: 24px;
    flex: 1;
}

    .tl-content h4 {
        font-size: 14px;
        font-weight: 700;
        color: #111;
        margin-bottom: 2px;
    }

    .tl-content p {
        font-size: 12px;
        color: #888;
        line-height: 1.5;
    }

    .tl-content .eta {
        font-size: 12px;
        font-weight: 700;
        color: #fa990c;
        margin-top: 2px;
    }

/* ORDER DETAILS GRID */
.details-grid {
    display: grid;
/*    grid-template-columns: 1fr 1fr;
*/    gap: 20px;
    margin-bottom: 32px;
}

.detail-box {
    background: #fafafa;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #f0f0f0;
}

    .detail-box h3 {
        font-size: 13px;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .detail-box h3 i {
            color: #fa990c;
        }

    .detail-box p {
        font-size: 14px;
        color: #333;
        line-height: 1.8;
    }

    .detail-box strong {
        color: #111;
    }

/* ORDER ITEMS */
.order-items {
    margin-bottom: 32px;
}

.oi-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .oi-title i {
        color: #fa990c;
    }

.oi-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oi-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fafafa;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #f0f0f0;
}

.oi-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #eee;
}

    .oi-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.oi-info {
    flex: 1;
}

.oi-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin-bottom: 3px;
}

.oi-meta {
    font-size: 12px;
    color: #888;
}

.oi-price {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    flex-shrink: 0;
}

/* PRICE SUMMARY */
.price-summary {
    background: #fafafa;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    margin-bottom: 32px;
}

.ps-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}

    .ps-row:last-of-type {
        border-bottom: none;
    }

    .ps-row span:last-child {
        font-weight: 700;
        color: #111;
    }

    .ps-row.grn {
        color: #18a34a;
    }

        .ps-row.grn span:last-child {
            color: #18a34a;
        }

.ps-strike {
    text-decoration: line-through;
    color: #bbb;
    font-weight: 400 !important;
}

.ps-total {
    display: flex;
    justify-content: space-between;
    padding: 14px 0 0;
    margin-top: 8px;
    border-top: 2px solid #e0e0e0;
}

    .ps-total span:first-child {
        font-size: 16px;
        font-weight: 800;
        color: #111;
    }

    .ps-total span:last-child {
        font-size: 22px;
        font-weight: 800;
        color: #18a34a;
    }

/* CTA BUTTONS */
.cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.btn-primary {
    flex: 1;
    min-width: 160px;
    padding: 16px 20px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-primary:hover {
        background: #fa990c;
        color: #fff;
    }

.btn-outline {
    flex: 1;
    min-width: 160px;
    padding: 16px 20px;
    background: #fff;
    color: #111;
    border: 1.5px solid #e3e6eb;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-outline:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* WHAT NEXT */
.what-next {
    background: #fff7ec;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #fde4b2;
}

.wn-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .wn-title i {
        color: #fa990c;
    }

.wn-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wn-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: #555;
}

    .wn-item i {
        color: #fa990c;
        margin-top: 2px;
        flex-shrink: 0;
    }

/* HELP BAR */
.help-bar {
    margin-top: 24px;
    background: #f5f5f5;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .help-bar p {
        font-size: 13px;
        color: #666;
        flex: 1;
    }

        .help-bar p strong {
            color: #111;
        }

.help-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.help-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #fff;
    border: 1.5px solid #e3e6eb;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    transition: 0.2s;
}

    .help-link:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

/* ================================================================
                   FAILED CARD
                   ================================================================ */
.failed-card {
    background: #fff;
    border-radius: 28px;
    border: 1px solid #e3e6eb;
    overflow: hidden;
    animation: slideUp 0.6s cubic-bezier(0.22,1,0.36,1) both;
    display: none;
}

/* FAILED TOP BANNER */
.failed-top {
    background: linear-gradient(135deg,#991b1b 0%,#dc2626 60%,#ef4444 100%);
    padding: 60px 40px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .failed-top::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

.failed-icon-bg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 48px;
    animation: shakeIn 0.6s cubic-bezier(0.36,0.07,0.19,0.97) 0.3s both;
}

@keyframes shakeIn {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.1) rotate(5deg);
        opacity: 1;
    }

    70% {
        transform: scale(0.95) rotate(-3deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

.failed-top h1 {
    position: relative;
    z-index: 1;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.failed-top p {
    position: relative;
    z-index: 1;
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
}

/* FAILED ID BAND */
.failed-id-band {
    background: #fff5f5;
    border-bottom: 1px solid #fecaca;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.fid-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.fid-value {
    font-size: 18px;
    font-weight: 800;
    color: #dc2626;
    letter-spacing: 1px;
    font-family: monospace;
}

.fail-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffe4e4;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}

/* FAILED BODY */
.failed-body {
    padding: 32px 40px;
}

/* REASON CARD */
.reason-card {
    background: #fff5f5;
    border-radius: 16px;
    border: 1.5px solid #fecaca;
    padding: 20px 24px;
    margin-bottom: 28px;
}

.rc-title {
    font-size: 15px;
    font-weight: 800;
    color: #dc2626;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reason-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reason-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: #555;
    padding: 10px 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #fee2e2;
}

    .reason-item i {
        color: #dc2626;
        margin-top: 2px;
        flex-shrink: 0;
    }

/* RETRY STEPS */
.retry-steps {
    margin-bottom: 28px;
}

.rs-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rs-title i {
        color: #fa990c;
    }

.rs-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
}

.rs-step {
    background: #fff;
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
    border: 1px solid #e3e6eb;
    transition: 0.2s;
}

    .rs-step:hover {
        border-color: #fa990c;
        transform: translateY(-3px);
    }

.rs-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.rs-step h4 {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}

.rs-step p {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
}

/* FAILED CART PREVIEW */
.failed-cart {
    background: #fafafa;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    margin-bottom: 28px;
}

.fc-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .fc-title i {
        color: #fa990c;
    }

/* FAILED CTA */
.failed-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.btn-retry {
    flex: 1;
    min-width: 160px;
    padding: 16px 20px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-retry:hover {
        background: #b91c1c;
        color: #fff;
    }

.btn-support {
    flex: 1;
    min-width: 160px;
    padding: 16px 20px;
    background: #fff;
    color: #111;
    border: 1.5px solid #e3e6eb;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-support:hover {
        border-color: #dc2626;
        color: #dc2626;
    }

/* REFUND NOTE */
.refund-note {
    background: #eff6ff;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid #bfdbfe;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.7;
}

    .refund-note strong {
        display: block;
        margin-bottom: 4px;
        font-size: 14px;
    }

/* ================================================================
                   SHARED — RELATED PRODUCTS (bottom of both states)
                   ================================================================ */
.related-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.rel-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

    .rel-title-row h2 {
        font-size: 22px;
        font-weight: 800;
        color: #111;
    }

    .rel-title-row span {
        font-size: 12px;
        color: #fa990c;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        display: block;
        margin-bottom: 4px;
    }

.view-all-lnk {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: #fa990c;
    font-size: 14px;
    font-weight: 700;
    transition: 0.2s;
}

    .view-all-lnk:hover {
        gap: 11px;
    }

.rel-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.product-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e3e6eb;
    transition: 0.35s;
}

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(0,0,0,0.08);
    }

.prod-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

    .prod-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.4s;
    }

.product-card:hover .prod-img img {
    transform: scale(1.05);
}

.prod-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 700;
}

.pb-hot {
    background: #ff4d4d;
    color: #fff;
}

.pb-sale {
    background: #000;
    color: #fff;
}

.prod-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,136,0,0.35);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    opacity: 0;
    transition: 0.3s;
}

.product-card:hover .prod-overlay {
    opacity: 1;
}

.prod-atc {
    background: #fff;
    color: #ff7a00;
    border: none;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transform: translateY(60px);
    transition: 0.4s;
    font-family: 'Outfit',sans-serif;
}

.product-card:hover .prod-atc {
    transform: translateY(0);
}

.prod-atc:hover {
    background: #111;
    color: #fff;
}

.prod-body {
    padding: 14px 16px 16px;
}

.prod-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.4;
}

.prod-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.prod-price {
    font-size: 16px;
    font-weight: 800;
    color: #111;
}

.prod-old {
    font-size: 13px;
    color: #bbb;
    text-decoration: line-through;
}

.prod-disc {
    background: #ecfff0;
    color: #18a34a;
    border: 1px solid #18a34a;
    padding: 3px 7px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
}

.prod-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prod-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #666;
}

    .prod-rating i {
        color: #ffb400;
    }

.prod-tag {
    background: #f3e8ff;
    color: #7c3aed;
    padding: 4px 7px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
}

/* ================================================================
                   DEMO TOGGLE (for preview only)
                   ================================================================ */
.demo-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    padding: 14px 40px;
    border-bottom: 1px solid #eee;
}

    .demo-toggle span {
        font-size: 13px;
        font-weight: 700;
        color: #888;
    }

.toggle-pill {
    display: flex;
    background: #f0f0f0;
    border-radius: 50px;
    padding: 4px;
    gap: 4px;
}

.tp-btn {
    padding: 8px 20px;
    border-radius: 50px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: 0.2s;
    background: transparent;
    color: #888;
}

    .tp-btn.active.success {
        background: #18a34a;
        color: #fff;
    }

    .tp-btn.active.failed {
        background: #dc2626;
        color: #fff;
    }

/* ════════════════════════════════════════
   1. HERO
════════════════════════════════════════ */
.partner-hero {
    background: linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 55%,#2a1400 100%);
    padding: 72px 20px 64px;
    position: relative;
    overflow: hidden;
}

    .partner-hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -60px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.18),transparent 65%);
        pointer-events: none;
    }

    .partner-hero::after {
        content: '';
        position: absolute;
        bottom: -80px;
        left: -50px;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.1),transparent 65%);
        pointer-events: none;
    }

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(250,153,12,.15);
    color: #fa990c;
    border: 1px solid rgba(250,153,12,.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(34px,4.5vw,56px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
}

    .hero-title em {
        color: #fa990c;
        font-style: normal;
    }

.hero-desc {
    font-size: 15px;
    color: rgba(255,255,255,.7);
    line-height: 1.85;
    margin-bottom: 28px;
    max-width: 520px;
}

.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Hero right — partner type selector */
.hero-right {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 32px;
}

.hr-heading {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.hr-sub {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    margin-bottom: 24px;
}

.partner-type-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pt-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: .3s;
    text-decoration: none;
}

    .pt-item:hover {
        background: rgba(250,153,12,.15);
        border-color: rgba(250,153,12,.4);
    }

    .pt-item.active {
        background: rgba(250,153,12,.18);
        border-color: rgba(250,153,12,.6);
    }

.pt-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(250,153,12,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.pt-info {
}

.pt-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.pt-desc {
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

.pt-arrow {
    margin-left: auto;
    color: rgba(250,153,12,.7);
    font-size: 12px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════
   2. STATS STRIP
════════════════════════════════════════ */
.stats-strip {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    padding: 28px 20px;
}

.stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    text-align: center;
}

.stat-item {
    padding: 10px 16px;
    border-right: 1px solid #f0f0f0;
}

    .stat-item:last-child {
        border-right: none;
    }

.stat-num {
    font-family: 'Cormorant Garamond',serif;
    font-size: 32px;
    font-weight: 700;
    color: #fa990c;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #444;
}

.stat-sub {
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
}

/* ════════════════════════════════════════
   3. WHY PARTNER — benefits
════════════════════════════════════════ */
.why-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.why-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-grid {
    display: grid;
    gap: 48px;
    align-items: center;
    margin-top: 40px;
}

.why-text {
}

.why-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.wb-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #eaeaea;
    transition: .3s;
}

    .wb-item:hover {
        border-color: #fa990c;
        transform: translateX(4px);
    }

.wb-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #fff7ec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fa990c;
    flex-shrink: 0;
    transition: .3s;
}

.wb-item:hover .wb-icon {
    background: #fa990c;
    color: #fff;
}

.wb-info {
}

.wb-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
}

.wb-body {
    font-size: 13px;
    color: #666;
    line-height: 1.65;
}

/* Why right — image with floating cards */
.why-visual {
    position: relative;
    padding: 16px;
}

.why-main-img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    height: 420px;
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
    display: block;
}

.why-float-1 {
    position: absolute;
    top: 28px;
    left: -12px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    border: 1px solid #f0f0f0;
    min-width: 150px;
}

.wf-num {
    font-size: 24px;
    font-weight: 800;
    color: #fa990c;
    line-height: 1;
}

.wf-lbl {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-top: 2px;
}

.why-float-2 {
    position: absolute;
    bottom: 28px;
    right: -12px;
    background: #111;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf2-icon {
    font-size: 22px;
}

.wf2-text {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.wf2-sub {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

/* ════════════════════════════════════════
   4. PARTNERSHIP TYPES
════════════════════════════════════════ */
.types-section {
    padding: 64px 0;
    background: #fff;
}

.types-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 40px;
}

.type-card {
    border-radius: 22px;
    border: 1.5px solid #eaeaea;
    overflow: hidden;
    transition: .35s;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
}

    .type-card:hover {
        border-color: #fa990c;
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(250,153,12,.12);
    }

    .type-card.featured {
        border-color: #fa990c;
        box-shadow: 0 8px 32px rgba(250,153,12,.15);
    }

.type-card-top {
    padding: 28px 24px 22px;
    position: relative;
}

.tc-featured-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.type-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.tc-green .type-icon {
    background: #ecfff0;
    color: #18a34a;
}

.tc-orange .type-icon {
    background: #fff7ec;
    color: #fa990c;
}

.tc-blue .type-icon {
    background: #eff6ff;
    color: #2563eb;
}

.tc-purple .type-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

.tc-red .type-icon {
    background: #fff5f5;
    color: #dc2626;
}

.tc-dark .type-icon {
    background: #1a1a1a;
    color: #fa990c;
}

.type-name {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.type-tagline {
    font-size: 13px;
    font-weight: 600;
    color: #fa990c;
    margin-bottom: 10px;
}

.type-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 16px;
}

.type-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .type-highlights li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        color: #444;
    }

        .type-highlights li i {
            color: #18a34a;
            margin-top: 2px;
            flex-shrink: 0;
            font-size: 11px;
        }

.type-card-bottom {
    padding: 16px 24px;
    margin-top: auto;
    border-top: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
}

.tc-invest {
    font-size: 12px;
    color: #888;
    font-weight: 600;
}

    .tc-invest strong {
        display: block;
        font-size: 15px;
        font-weight: 800;
        color: #111;
    }

.tc-btn {
    padding: 9px 18px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.type-card:hover .tc-btn {
    background: #fa990c;
}

.type-card.featured .tc-btn {
    background: #fa990c;
}

    .type-card.featured .tc-btn:hover {
        background: #e8880a;
    }

/* ════════════════════════════════════════
   5. HOW IT WORKS — steps
════════════════════════════════════════ */
.process-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.process-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    margin-top: 48px;
    position: relative;
}

    .process-steps::before {
        content: '';
        position: absolute;
        top: 30px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg,#fa990c,#e8880a);
        z-index: 0;
    }

.step-item {
    text-align: center;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

.step-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fa990c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(250,153,12,.2);
    transition: .3s;
}

.step-item:hover .step-circle {
    background: #fa990c;
}

    .step-item:hover .step-circle .step-ico {
        color: #fff;
    }

.step-ico {
    color: #fa990c;
    font-size: 20px;
    transition: .3s;
}

.step-num-label {
    position: absolute;
    top: -6px;
    right: calc(50% - 40px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fa990c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
}

.step-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
}

/* ════════════════════════════════════════
   6. PARTNER SUCCESS STORIES
════════════════════════════════════════ */
.stories-section {
    padding: 64px 0;
    background: #fff;
}

.stories-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 40px;
}

.story-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .3s;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

    .story-card:hover {
        border-color: #fa990c;
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(250,153,12,.1);
    }

.story-img {
    height: 160px;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}

    .story-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .35s;
    }

.story-card:hover .story-img img {
    transform: scale(1.04);
}

.story-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.story-body {
    padding: 18px;
}

.story-type {
    font-size: 10px;
    font-weight: 700;
    color: #fa990c;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 7px;
}

.story-name {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
}

.story-location {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .story-location i {
        color: #fa990c;
        font-size: 11px;
    }

.story-quote {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    font-style: italic;
    border-left: 3px solid #fa990c;
    padding-left: 12px;
    margin-bottom: 14px;
}

.story-stats {
    display: flex;
    gap: 16px;
}

.story-stat {
}

.ss-num {
    font-size: 18px;
    font-weight: 800;
    color: #fa990c;
}

.ss-lbl {
    font-size: 11px;
    color: #888;
    font-weight: 600;
}

/* ════════════════════════════════════════
   7. SUPPORT WE PROVIDE
════════════════════════════════════════ */
.support-section {
    padding: 64px 0;
    background: linear-gradient(135deg,#111 0%,#1a1a1a 55%,#2a1400 100%);
    position: relative;
    overflow: hidden;
}

    .support-section::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -60px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(250,153,12,.15),transparent 65%);
        pointer-events: none;
    }

.support-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-top: 40px;
}

.support-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 24px 18px;
    transition: .3s;
    text-align: center;
}

    .support-card:hover {
        background: rgba(250,153,12,.12);
        border-color: rgba(250,153,12,.4);
        transform: translateY(-4px);
    }

.support-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(250,153,12,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 22px;
    color: #fa990c;
}

.support-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.support-body {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
}

/* ════════════════════════════════════════
   8. TERRITORY MAP / EXPANSION
════════════════════════════════════════ */
.territory-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.territory-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.territory-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 40px;
}

.territory-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.territory-item {
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .3s;
}

    .territory-item:hover {
        border-color: #fa990c;
        transform: translateX(4px);
    }

.t-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.t-green {
    background: #18a34a;
}

.t-orange {
    background: #fa990c;
}

.t-blue {
    background: #2563eb;
}

.t-info {
    flex: 1;
}

.t-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.t-detail {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.t-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}

.ts-open {
    background: #ecfff0;
    color: #18a34a;
}

.ts-limited {
    background: #fff7ec;
    color: #fa990c;
}

.ts-coming {
    background: #eff6ff;
    color: #2563eb;
}

.expansion-visual {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 28px;
}

.ev-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ev-title i {
        color: #fa990c;
    }

.ev-map-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg,#f8f8f8,#f0f0f0);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #888;
    font-weight: 600;
    border: 1px dashed #ddd;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

    .ev-map-placeholder i {
        font-size: 32px;
        color: #fa990c;
    }

.ev-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.ev-stat {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.evs-num {
    font-size: 20px;
    font-weight: 800;
    color: #fa990c;
}

.evs-lbl {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    margin-top: 2px;
}

/* ════════════════════════════════════════
   9. PARTNER APPLICATION FORM
════════════════════════════════════════ */
.form-section {
    padding: 64px 0;
    background: #fff;
}

.form-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 40px;
}

.form-left {
}

    .form-left .sec-body {
        margin-top: 12px;
    }

.form-perks {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
}

.fp-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

    .fp-item i {
        color: #18a34a;
        font-size: 13px;
    }

.form-right {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #eaeaea;
    padding: 36px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.form-heading {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 5px;
}

.form-subheading {
    font-size: 13px;
    color: #888;
    margin-bottom: 24px;
}

/* Form fields */
.f-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

    .f-row.full {
        grid-template-columns: 1fr;
    }

.f-group {
    display: flex;
    flex-direction: column;
}

    .f-group label {
        font-size: 11px;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 6px;
    }

        .f-group label .req {
            color: #fa990c;
            margin-left: 2px;
        }

.f-input {
    padding: 12px 14px;
    border: 1.5px solid #e3e3e3;
    border-radius: 11px;
    font-size: 14px;
    font-family: 'Outfit',sans-serif;
    outline: none;
    transition: .2s;
    background: #fafafa;
    color: #111;
}

    .f-input:focus {
        border-color: #fa990c;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(250,153,12,.08);
    }

    .f-input.err {
        border-color: #e02020;
        background: #fff5f5;
    }

    .f-input.ok {
        border-color: #18a34a;
        background: #f0fff4;
    }

    .f-input::placeholder {
        color: #c0c0c0;
    }

select.f-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    appearance: none;
    padding-right: 30px;
}

.f-hint {
    font-size: 11px;
    margin-top: 3px;
    min-height: 14px;
}

    .f-hint.e {
        color: #e02020;
    }

    .f-hint.s {
        color: #18a34a;
    }

textarea.f-input {
    resize: vertical;
    min-height: 96px;
}

/* Partner type checkboxes */
.partner-type-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.ptc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1.5px solid #e3e3e3;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    transition: .2s;
}

    .ptc-item:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .ptc-item.selected {
        border-color: #fa990c;
        background: #fff9f0;
        color: #fa990c;
    }

    .ptc-item input {
        accent-color: #fa990c;
        cursor: pointer;
    }

/* Terms */
.f-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 10px;
    border: 1.5px solid #e3e3e3;
    cursor: pointer;
    margin-bottom: 16px;
    transition: .2s;
}

    .f-terms:hover {
        border-color: #fa990c;
    }

    .f-terms input {
        width: 15px;
        height: 15px;
        accent-color: #fa990c;
        cursor: pointer;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .f-terms span {
        font-size: 12px;
        color: #555;
        line-height: 1.6;
    }

        .f-terms span a {
            color: #fa990c;
            font-weight: 700;
            text-decoration: none;
        }

/* Submit */
.f-submit {
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Outfit',sans-serif;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

    .f-submit:hover:not(:disabled) {
        background: #fa990c;
    }

    .f-submit:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .f-submit.loading {
        background: #fa990c;
        pointer-events: none;
    }

    .f-submit .btn-spin {
        display: none;
    }

    .f-submit.loading .btn-label {
        display: none;
    }

    .f-submit.loading .btn-spin {
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Success state */
.form-success {
    display: none;
    text-align: center;
    padding: 20px;
}

    .form-success.show {
        display: block;
    }

.fs-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg,#18a34a,#22c55e);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
    color: #fff;
    animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.form-success h3 {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.form-success p {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
    margin-bottom: 16px;
}

.fs-ref {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 14px;
    font-size: 13px;
    color: #555;
    font-family: monospace;
    letter-spacing: 1px;
    font-weight: 700;
}

/* ════════════════════════════════════════
   10. FAQ
════════════════════════════════════════ */
.faq-section {
    padding: 64px 0;
    background: #f4f5f7;
}

.faq-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.faq-list {
    margin-top: 36px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: .2s;
}

    .faq-item.open {
        border-color: #fa990c;
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    gap: 12px;
}

.faq-qt {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    flex: 1;
    line-height: 1.4;
}

.faq-arr {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    transition: .3s;
}

.faq-item.open .faq-arr {
    background: #fa990c;
    color: #fff;
    border-color: #fa990c;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-item.open .faq-a {
    max-height: 300px;
}

.faq-ai {
    padding: 0 20px 18px;
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    border-top: 1px solid #f5f5f5;
    padding-top: 14px;
}

/* ════════════════════════════════════════
   11. CONTACT CTA STRIP
════════════════════════════════════════ */
.contact-strip {
    background: #fff;
    border-top: 1px solid #eaeaea;
    padding: 40px 20px;
    text-align: center;
}

.cs-inner {
    max-width: 700px;
    margin: 0 auto;
}

.cs-title {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.cs-sub {
    font-size: 14px;
    color: #888;
    margin-bottom: 24px;
    line-height: 1.7;
}

.cs-methods {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.cs-method {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
    border: 1.5px solid #e8e8e8;
    color: #333;
    background: #fff;
}

    .cs-method:hover {
        border-color: #fa990c;
        color: #fa990c;
    }

    .cs-method i {
        font-size: 16px;
    }

    .cs-method.primary {
        background: #111;
        color: #fff;
        border-color: #111;
    }

        .cs-method.primary:hover {
            background: #fa990c;
            border-color: #fa990c;
            color: #fff;
        }

@media(max-width:768px) {
    .types-grid {
        grid-template-columns: repeat(1,1fr);
    }
}

.category-title a {
    color: #fa990c;
}

.footer-bottom span {
    color: red;
}

.cat-item img {
    height: 32px;
}

@media  (max-width: 768px)   {
    .category-section {
        padding: 10px 0px;
    }
}

.popular-post a {
    gap: 11px;
}

.cat-pill a {
    color: #fa990c;
}
.table-scroll-wrap{
    overflow-x: auto !important;
}
.contact-info-list {
    list-style: none;
    margin: 14px 0 18px;
    padding: 0;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
}

    .contact-info-list li {
        padding: 10px 14px;
        font-size: 13px;
        color: #444;
        border-bottom: 1px solid #eaeaea;
    }

        .contact-info-list li:last-child {
            border-bottom: none;
        }

        .contact-info-list li:nth-child(even) {
            background: #fafafa;
        }

    .contact-info-list strong {
        color: #111;
    }
.policy-cards-list {
    list-style: none;
    margin: 14px 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .policy-cards-list li {
        border: 1px solid #eaeaea;
        border-radius: 8px;
        padding: 12px 14px;
        background: #fff;
    }

.pc-title {
    font-weight: 700;
    font-size: 13px;
    color: #111;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.pc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #444;
    padding: 3px 0;
}

    .pc-row strong {
        color: #111;
    }
.pc-block {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .pc-block span {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #888;
        text-transform: uppercase;
        letter-spacing: .3px;
        margin-bottom: 4px;
    }

    .pc-block p {
        margin: 0;
        font-size: 13px;
        color: #444;
        line-height: 1.6;
    }
#ddlState,
select[name="state"] {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 42px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}