:root {
    --yellow: #FFD700;
    --black: #1a1a1a;
    --white: #ffffff;
    --gray-bg: #f8f9fa;
    --text-gray: #666666;
}

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

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    color: var(--black); 
    line-height: 1.6; 
}


/* Public page overflow guard */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* --- Navigation --- */
nav { 
    padding: 20px 0; 
    background: var(--yellow);
    border-bottom: none;
}

.site-topbar-shell {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.nav-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    position: relative;
}

.logo { 
    font-size: 1.5rem; 
    font-weight: 800; 
    letter-spacing: -0.5px; 
    text-decoration: none;
    color: var(--black);
    z-index: 10;
}

.brand-lockup {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1;
    text-decoration: none;
}

.brand-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.brand-subtitle {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
}

.navbar .nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navbar .nav-links a {
    text-decoration: none;
    color: var(--black);
    font-weight: 600;
    font-size: 0.9rem;
}

.navbar .nav-links a {
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar .nav-links a:hover,
.navbar .nav-links a:active {
    background: var(--black);
    color: var(--yellow) !important;
}

.navbar .nav-links a.active {
    background: transparent;
    color: var(--black) !important;
}

/* Nav actions (cart and login) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.btn-login { 
    background: var(--black); 
    color: var(--white) !important;
    padding: 10px 25px; 
    border-radius: 8px; 
    font-weight: 700; 
    text-decoration: none; 
    display: inline-block;
    min-width: 80px;
    text-align: center;
}

.btn-login:hover {
    background: #333;
}

.btn-cart {
    background: var(--black);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
    position: relative;
}

.btn-cart:hover {
    background: #333;
}

.btn-cart .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FFD700;
    color: #111;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navbar Toggler (Hamburger Icon) */
.navbar-toggler {
    border: 2px solid var(--black) !important;
    background: transparent !important;
    padding: 8px 12px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a1a1a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    height: 20px !important;
    width: 20px !important;
}

/* Fix navbar text colors on yellow background */
.navbar-dark .navbar-nav .nav-link {
    color: var(--black) !important;
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #333 !important;
}

/* Login Modal */
.login-links {
    text-align: center;
    margin-top: 15px;
    font-size: 0.85rem;
}

.login-links a {
    color: var(--black);
    text-decoration: none;
    font-weight: 600;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-links span {
    margin: 0 8px;
    color: #999;
}

.social-login {
    text-align: center;
    margin-top: 20px;
}

.social-login p {
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-google:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.auth-session-error {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.auth-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e8f0;
}

.auth-divider span {
    white-space: nowrap;
}

.google-auth-btn {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #d7dde8;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.google-auth-btn:hover {
    color: #111827;
    border-color: #f6b700;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.google-auth-btn i {
    color: #ea4335;
    font-size: 18px;
}

/* --- Hero Section --- */
.hero {
    padding: 88px 0 96px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fffdf2 0%, #ffffff 72%);
}

.hero .container {
    max-width: 1200px;
}

.hero .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
    margin-left: 0;
    margin-right: 0;
}

.hero .col-lg-6,
.hero .col-md-12 {
    flex: 1 1 calc(50% - 24px);
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.hero h1 {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero h1 span {
    color: var(--yellow);
}

.hero p {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 35px;
    max-width: 500px;
}

.hero-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 0;
}

.btn-shop {
    background: var(--yellow);
    color: var(--black);
    padding: 15px 30px;
    border-radius: 10px; 
    text-decoration: none; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    transition: 0.3s; 
}

.btn-rating { 
    background: var(--black); 
    color: var(--white); 
    padding: 15px 30px; 
    border-radius: 10px; 
    text-decoration: none; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    transition: 0.3s; 
}

.btn-rating:hover { 
    background: #333; 
    transform: translateY(-2px); 
}

.btn-learn { 
    border: 1px solid #ddd; 
    color: var(--black); 
    padding: 15px 30px; 
    border-radius: 10px; 
    text-decoration: none; 
    font-weight: 600; 
    transition: 0.3s; 
}

.hero-stats { 
    display: flex; 
    gap: 40px; 
}

.stat-item h3 { 
    font-size: 1.8rem; 
    font-weight: 800; 
}

.stat-item p { 
    font-size: 0.8rem; 
    margin: 0; 
}

.hero-image img { 
    width: 100%; 
    min-height: 360px;
    max-height: 480px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 24px 55px rgba(17, 17, 17, 0.16);
}

@media (max-width: 991px) {
    .hero .row {
        gap: 32px;
    }

    .hero .col-lg-6,
    .hero .col-md-12 {
        flex: 0 0 100%;
        width: 100%;
    }

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

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

    .hero-image {
        max-width: 560px;
        margin: 0 auto;
    }

    .hero-image img {
        min-height: 280px;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 48px 0 60px;
    }

    .hero .row {
        gap: 24px;
    }

    .hero-image img {
        min-height: 230px;
        border-radius: 14px;
    }
}

@media (max-width: 768px) {
    .hero-carousel {
        padding: 10px 0 48px !important;
    }

    .hero-carousel .carousel-container {
        border-radius: 14px !important;
    }

    .hero-carousel .carousel-slide img {
        height: 240px !important;
    }

    .hero-carousel .carousel-overlay {
        padding: 58px 18px 18px !important;
    }

    .hero-carousel .carousel-overlay h2 {
        font-size: 1.25rem !important;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 34px;
    }

    .cta-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-btns a {
        justify-content: center;
    }
}

/* --- Featured Products --- */
.products { 
    padding: 100px 0; 
    background: var(--gray-bg); 
    text-align: center; 
}

.section-header h2 { 
    font-size: 2.5rem; 
    font-weight: 800; 
    margin-bottom: 10px; 
}

.section-header p { 
    color: var(--text-gray); 
    margin-bottom: 50px; 
}

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

.product-card { 
    background: var(--white); 
    padding: 20px; 
    border-radius: 15px; 
    text-align: left; 
    transition: 0.3s; 
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 350px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #eee;
}

.products .row.g-4 {
    min-height: auto;
    justify-content: center;
}

.products .row.g-4 > div {
    display: flex;
    justify-content: center;
}

.products .row.g-4 .product-card {
    width: 100%;
    max-width: 300px;
}

/* Product Carousel */
.product-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 1100px;
    margin: 0 auto 40px;
}

.carousel-viewport {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease-in-out;
}

.carousel-track .product-card {
    flex: 0 0 clamp(250px, 31vw, 340px) !important;
    min-width: clamp(250px, 31vw, 340px) !important;
    max-width: clamp(250px, 31vw, 340px) !important;
    width: clamp(250px, 31vw, 340px) !important;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 15px;
    overflow: hidden;
    background: var(--white);
    min-height: 350px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    margin: 0;
}

.carousel-btn {
    background: var(--black);
    color: var(--white);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: 0.3s;
    flex-shrink: 0;
}

.carousel-btn:hover {
    background: var(--yellow);
    color: var(--black);
}

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

.product-image-container {
    margin-top: auto;
}

.product-card img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    margin-bottom: 12px;
}

.product-card h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.product-card .category {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 8px;
    min-height: auto;
}

.stars {
    color: var(--yellow);
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 0;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.product-card img {
    width: 100%; 
    height: 180px; 
    object-fit: contain; 
    margin-bottom: 20px; 
}

.product-card h4 { 
    font-size: 1rem; 
    margin-bottom: 5px; 
}

.product-card .category { 
    font-size: 0.8rem; 
    color: var(--text-gray); 
    margin-bottom: 10px;
    min-height: 38px;
}

.stars { 
    color: var(--yellow); 
    font-size: 0.8rem; 
    margin-bottom: 15px; 
}

.price-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.price { 
    font-weight: 800; 
    font-size: 1.2rem; 
}

.cart-btn { 
    background: var(--yellow); 
    border: none; 
    padding: 10px; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: 0.3s;
}

.cart-btn:hover { 
    background: #e6c200; 
}

/* Action Buttons - Buy and Add */
.action-buttons { 
    display: flex; 
    gap: 8px; 
}

.buy-btn { 
    background: var(--black); 
    color: var(--white); 
    border: none; 
    padding: 8px 12px; 
    border-radius: 6px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: 0.3s; 
    font-size: 0.75rem; 
}

.buy-btn:hover { 
    background: #333; 
}

/* Quick View Overlay */
.product-image-container { 
    position: relative; 
    overflow: hidden; 
}

.quick-view-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    transition: 0.3s; 
}

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

.quick-view-btn { 
    background: var(--white); 
    color: var(--black); 
    border: none; 
    padding: 12px 24px; 
    border-radius: 8px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: 0.3s; 
    font-size: 0.9rem; 
}

.quick-view-btn:hover { 
    background: var(--yellow); 
}

/* Quick View Modal */
#quickViewModal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); }
#quickViewModal.show { display: block; }
#quickViewModal .modal-content { background-color: var(--white); margin: 5% auto; padding: 30px; border-radius: 15px; width: 80%; max-width: 800px; position: relative; animation: slideDown 0.3s; }
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#quickViewModal .close-modal { position: absolute; right: 20px; top: 15px; font-size: 28px; font-weight: bold; color: #aaa; cursor: pointer; }
#quickViewModal .close-modal:hover { color: var(--black); }
#quickViewModal .modal-body { display: flex; gap: 30px; }
#quickViewModal .modal-image { flex: 1; }
#quickViewModal .modal-image img { width: 100%; border-radius: 10px; }
#quickViewModal .modal-details { flex: 1; padding: 10px 0; }
#quickViewModal .modal-details h3 { font-size: 1.8rem; margin-bottom: 10px; }
#quickViewModal .modal-details p { color: var(--text-gray); margin-bottom: 15px; line-height: 1.6; }
#quickViewModal .modal-stars { color: var(--yellow); margin-bottom: 15px; }
#quickViewModal .modal-price { font-size: 2rem; font-weight: 800; color: var(--black); margin-bottom: 20px; }
#quickViewModal .modal-quantity { margin-bottom: 20px; }
#quickViewModal .modal-quantity label { font-weight: 600; margin-right: 10px; }
#quickViewModal .modal-quantity input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 5px; width: 80px; }
#quickViewModal .modal-actions { display: flex; gap: 10px; }
#quickViewModal .modal-actions .buy-btn { padding: 12px 24px; font-size: 1rem; background: var(--black); color: var(--white); border: none; border-radius: 6px; font-weight: 700; cursor: pointer; transition: 0.3s; }
#quickViewModal .modal-actions .buy-btn:hover { background: #333; }
#quickViewModal .modal-actions .add-btn { padding: 12px 24px; font-size: 1rem; background: var(--yellow); border: none; border-radius: 6px; font-weight: 700; cursor: pointer; transition: 0.3s; }
#quickViewModal .modal-actions .add-btn:hover { background: #e6c200; }
#quickViewModal .quick-view-modal-header {
    margin: -30px -30px 24px;
    padding: 20px 54px 20px 24px;
    background: linear-gradient(135deg, #061126 0%, #111c31 100%);
    border-bottom: 3px solid #ffd700;
    border-radius: 15px 15px 0 0;
}
#quickViewModal .quick-view-modal-header h2 {
    margin: 0;
    color: #ffd700;
    font-size: 1.35rem;
    line-height: 1.25;
}

/* --- Why Choose Us --- */
.why-us { 
    padding: 100px 0; 
    text-align: center; 
}

.why-grid { 
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 280px));
    gap: 30px;
    margin-top: 60px;
    justify-content: center;
}

.why-card {
    background: var(--white);
    padding: 40px 25px;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.why-card i { 
    background: var(--yellow); 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 20px; 
    font-size: 1.2rem; 
}

.why-card h4 { 
    margin-bottom: 10px; 
    font-weight: 800; 
}

.why-card p { 
    font-size: 0.85rem; 
    color: var(--text-gray); 
    padding: 0 10px; 
}

/* --- CTA Section --- */
.cta { 
    background: var(--yellow); 
    padding: 80px 0; 
    text-align: center; 
}

.cta h2 { 
    font-size: 2.5rem; 
    font-weight: 800; 
    margin-bottom: 15px; 
}

.cta-btns { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-top: 30px; 
}

.btn-dark { 
    background: var(--black); 
    color: var(--white); 
    padding: 15px 35px; 
    border-radius: 8px; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.btn-white { 
    background: var(--white); 
    color: var(--black); 
    padding: 15px 35px; 
    border-radius: 8px; 
    font-weight: 700; 
}

/* --- Footer --- */
footer { 
    background: var(--black); 
    color: var(--white); 
    padding: 14px 0 10px; 
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; 
    max-width: 1120px;
    margin: 0 auto;
    align-items: start;
    justify-content: center;
}

.footer-logo { 
    font-size: 1.5rem; 
    font-weight: 800; 
    margin-bottom: 12px; 
    display: block; 
}

.footer-about p { 
    color: #999; 
    font-size: 0.9rem; 
    margin-bottom: 12px; 
    line-height: 1.6;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: 0.3s;
}

.footer-social a:hover {
    background: var(--yellow);
    color: var(--black);
}

.footer-col h4 { 
    margin-bottom: 8px; 
    font-size: 0.9rem; 
}

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

.footer-col ul li { 
    margin-bottom: 4px; 
}

.footer-col ul li a { 
    font-size: 0.8rem; 
}

.footer-col ul li a { 
    color: #999; 
    text-decoration: none; 
    font-size: 0.9rem; 
    transition: 0.3s; 
}

.footer-col ul li a:hover { 
    color: var(--yellow); 
}

.contact-info li { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    color: #999; 
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.contact-info i { 
    color: var(--yellow); 
}

.footer-newsletter {
    background: #222;
    border-radius: 15px;
    padding: 30px 40px;
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.newsletter-content h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.newsletter-content p {
    color: #999;
    font-size: 0.9rem;
}

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

.newsletter-form input {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    width: 280px;
    font-size: 0.9rem;
}

.newsletter-form button {
    background: var(--yellow);
    color: var(--black);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.newsletter-form button:hover {
    background: #e6c200;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #333;
    font-size: 0.85rem;
    color: #666;
}

.footer-bottom-links {
    display: flex;
    gap: 25px;
}

.footer-bottom-links a {
    color: #666;
    text-decoration: none;
    transition: 0.3s;
}

.footer-bottom-links a:hover {
    color: var(--yellow);
}

/* ====================================
   ABOUT US PAGE STYLES
   ==================================== */

.about-hero { text-align: center; padding: 80px 0; background-color: var(--white); }
.about-hero h1 { font-size: 3.5rem; margin-bottom: 20px; font-weight: 800; }
.about-hero p { max-width: 700px; margin: 0 auto 40px; color: #555; font-size: 1.1rem; }
.hero-image-circle { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 5px solid var(--yellow); }
.hero-image-circle img { width: 100%; height: 100%; object-fit: cover; }

.our-story { padding: 80px 0; background: var(--gray-bg); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-text h2 { font-size: 2.5rem; margin-bottom: 20px; }
.story-text p { margin-bottom: 15px; color: #444; }
.story-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.mission-values { padding: 100px 0; text-align: center; }
.section-title { margin-bottom: 60px; }
.section-title h2 { font-size: 2.5rem; margin-bottom: 10px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.value-card { padding: 40px; border-radius: 15px; background: white; border: 1px solid #eee; transition: 0.3s; }
.value-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.team-section { padding: 80px 0; background: var(--white); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card { text-align: center; }
.team-card img { width: 100%; height: 300px; object-fit: cover; border-radius: 15px; margin-bottom: 15px; }
.team-card h3 { margin-bottom: 5px; }
.team-card .role { color: #888; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; }
.team-card .desc { font-size: 0.85rem; color: #666; }

.cta-banner { background: var(--yellow); padding: 80px 0; text-align: center; }
.cta-banner h2 { font-size: 2.5rem; margin-bottom: 15px; }
.cta-buttons { margin-top: 30px; display: flex; justify-content: center; gap: 20px; }

/* ====================================
   CONTACT PAGE STYLES
   ==================================== */

.contact-header { text-align: center; padding: 80px 0; background: var(--white); }
.contact-header h1 { font-size: 3.5rem; margin-bottom: 20px; }
.contact-header p { max-width: 600px; margin: 0 auto; color: #666; font-size: 1.1rem; }

.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 80px; }
.info-card { background: var(--gray-bg); padding: 40px 20px; border-radius: 15px; text-align: center; }
.info-card h3 { margin-bottom: 10px; }
.info-card p { font-weight: 700; margin-bottom: 5px; }
.info-card span { font-size: 0.85rem; color: #888; }

.contact-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; padding-bottom: 80px; }
.contact-form-wrapper h2 { margin-bottom: 10px; }
.form-sub { color: #666; margin-bottom: 30px; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.input-group label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
.input-group input, .input-group select, .input-group textarea {
    width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit;
}
.btn-submit { background: var(--yellow); border: none; padding: 15px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 1rem; width: 100%; }

.sidebar-box { padding: 30px; border-radius: 15px; margin-bottom: 20px; }
.dark-box { background: #1a1a1a; color: white; }
.dark-box h3 { margin-bottom: 20px; }
.store-info { list-style: none; }
.store-info li { margin-bottom: 20px; font-size: 0.9rem; position: relative; padding-left: 30px; }
.store-info i { position: absolute; left: 0; color: var(--yellow); }
.map-placeholder { background: #c5cbd5; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #666; }
.map-placeholder i { font-size: 3rem; margin-bottom: 10px; }

.faq-section { padding: 80px 0; border-top: 1px solid #eee; }
.faq-section h2 { text-align: center; font-size: 2.2rem; margin-bottom: 10px; }
.faq-section p { text-align: center; color: #888; margin-bottom: 40px; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--gray-bg); padding: 20px; border-radius: 10px; margin-bottom: 15px; }
.faq-question { font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }

.social-strip { background: var(--yellow); padding: 60px 0; text-align: center; }
.social-strip h2 { margin-bottom: 10px; }
.social-icons { display: flex; justify-content: center; gap: 15px; margin-top: 25px; }
.social-icons a { background: var(--black); color: white; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ====================================
   PRODUCTS PAGE STYLES
   ==================================== */

.products-header { text-align: center; padding: 60px 0; background: var(--gray-bg); }
.products-header h1 { font-size: 3rem; margin-bottom: 15px; }
.products-header p { color: var(--text-gray); max-width: 600px; margin: 0 auto 30px; }

.search-bar-container { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.search-input { background: white; border: 1px solid #ddd; padding: 12px 20px; border-radius: 8px; width: 400px; display: flex; align-items: center; gap: 10px; }
.search-input input { border: none; outline: none; width: 100%; font-size: 1rem; }
.btn-filter { background: var(--black); color: var(--white); border: none; padding: 10px 25px; border-radius: 8px; font-weight: 600; cursor: pointer; }

.category-inline { display: flex; justify-content: center; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.category-strip { display: none; }

.main-layout { display: grid; grid-template-columns: 250px 1fr; gap: 30px; padding: 30px 20px; }

.sidebar { display: block; }
.sidebar h4 { margin-bottom: 10px; font-size: 0.95rem; }
.filter-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.filter-group label { font-size: 0.85rem; color: var(--text-gray); cursor: pointer; }

.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.content-header select { padding: 8px; border-radius: 5px; border: 1px solid #ddd; }

.pagination { margin-top: 50px; display: flex; justify-content: center; gap: 10px; }
.pagination button { padding: 10px 15px; border: 1px solid #eee; background: white; border-radius: 5px; cursor: pointer; }
.pagination button.active { background: var(--yellow); border-color: var(--yellow); font-weight: 700; }

/* ====================================
   PAGE SECTION DISPLAY
   ==================================== */

.page-section { display: none; }
.page-section.active { display: block; }

/* Password Strength Indicator */
.password-strength-container {
    margin-top: 8px;
}

.password-strength-bar {
    height: 6px;
    border-radius: 3px;
    background-color: #e5e5e5;
    overflow: hidden;
    transition: all 0.3s ease;
}

.password-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.password-strength-fill.weak {
    width: 25%;
    background-color: #dc3545;
}

.password-strength-fill.fair {
    width: 50%;
    background-color: #ffc107;
}

.password-strength-fill.good {
    width: 75%;
    background-color: #28a745;
}

.password-strength-fill.strong {
    width: 100%;
    background-color: #198754;
}

.password-strength-text {
    font-size: 12px;
    margin-top: 4px;
    color: #666;
}

.password-strength-text.weak { color: #dc3545; }
.password-strength-text.fair { color: #ffc107; }
.password-strength-text.good { color: #28a745; }
.password-strength-text.strong { color: #198754; }

/* Password Requirements Popup */
.password-field-wrapper {
    position: relative;
}

.password-toggle-wrapper input {
    padding-right: 44px;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.password-toggle-btn:hover {
    color: #111827;
}

.password-requirements-popup {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 280px;
    top: 100%;
    left: 0;
    margin-top: 5px;
}

.password-requirements-popup.show {
    display: block;
}

.password-requirements-popup h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.password-requirement {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.password-requirement:last-child {
    margin-bottom: 0;
}

.password-requirement i {
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5e5e5;
    color: #fff;
}

.password-requirement.met i {
    background: #198754;
}

.password-requirement.unmet i {
    background: #dc3545;
}

/* Name Field Error Messages */
.name-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

.name-error.show {
    display: block;
}

.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    padding: 24px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: white;
    margin: auto;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 450px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s;
}

/* Register Modal - Wider for more fields */
#registerModal .modal-content {
    max-width: 600px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}

/* Form inputs in modal */
#registerModal .form-input,
#registerModal textarea.form-input {
    width: 100%;
    box-sizing: border-box;
}

/* Forgot Password Modal */
#forgotPasswordModal .modal-content {
    max-width: 600px;
    max-height: min(700px, calc(100dvh - 48px));
    overflow-y: auto;
}

/* Reset Password Modal */
#resetPasswordModal .modal-content {
    max-width: 600px;
    max-height: min(700px, calc(100dvh - 48px));
    overflow-y: auto;
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
    border: 0;
    background: transparent;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.3s;
}

.close:hover {
    color: #333;
}

.modal-content h2 {
    font-size: 24px;
    margin-bottom: 6px;
    color: #111;
}

.modal-content p {
    color: #666;
    margin-bottom: 18px;
}

.auth-legal-note {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.auth-legal-note a,
.register-terms-label a {
    color: #b88700;
    font-weight: 800;
    text-decoration: none;
}

.auth-legal-note a:hover,
.register-terms-label a:hover {
    color: #07142a;
    text-decoration: underline;
}

.legal-summary-modal-content {
    max-width: 680px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, 0.24);
}

.legal-summary-header {
    padding: 28px 30px 18px;
    background: linear-gradient(135deg, #07142a 0%, #172236 100%);
    color: #ffffff;
}

.legal-summary-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.16);
    color: #fbbf24;
    font-size: 12px;
    font-weight: 800;
}

.legal-summary-header h2 {
    margin: 0 34px 8px 0;
    color: #ffffff;
    font-size: 1.55rem;
    line-height: 1.2;
}

.legal-summary-header p {
    margin: 0;
    color: rgba(226, 232, 240, 0.88);
    line-height: 1.55;
}

.legal-summary-modal-content .close {
    color: rgba(255, 255, 255, 0.74);
}

.legal-summary-modal-content .close:hover {
    color: #fbbf24;
}

.legal-summary-body {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    padding: 24px 30px 4px;
}

.legal-summary-section {
    padding-bottom: 18px;
}

.legal-summary-section + .legal-summary-section {
    padding-top: 18px;
    border-top: 1px solid #e7ebf2;
}

.legal-summary-section h3 {
    margin: 0 0 10px;
    color: #07142a;
    font-size: 1rem;
    font-weight: 900;
}

.legal-summary-section p,
.legal-summary-section li {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.65;
}

.legal-summary-section ul {
    margin: 0;
    padding-left: 18px;
}

.legal-summary-section li + li {
    margin-top: 6px;
}

.legal-summary-actions {
    padding: 18px 30px 28px;
    background: #ffffff;
}

.legal-summary-actions .btn-submit {
    background: #07142a;
    color: #ffffff;
    border: 1px solid rgba(251, 191, 36, 0.34);
}

.legal-summary-actions .btn-submit:hover {
    background: #fbbf24;
    color: #07142a;
}

.otp-modal-content {
    max-width: 430px;
    padding: 34px 30px 28px;
    text-align: center;
    border: 1px solid rgba(17, 17, 17, 0.08);
}

.otp-modal-header {
    margin-bottom: 20px;
}

.otp-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: #FFD700;
    color: #111;
    box-shadow: 0 12px 24px rgba(255, 215, 0, 0.24);
}

.otp-modal-icon i {
    font-size: 28px;
}

.otp-modal-header h2 {
    margin-bottom: 8px;
}

.otp-modal-header p {
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.45;
}

.otp-code-group {
    margin: 20px 0 14px;
}

.otp-code-group label {
    text-align: left;
    color: #111;
}

.otp-digit-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.form-group .otp-digit-input {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #111;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(17, 17, 17, 0.06);
}

.form-group .otp-digit-input:focus {
    border-color: #FFD700;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.18);
}

.form-group .otp-digit-input.is-filled {
    border-color: #111;
    background: #fffdf0;
}

.otp-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin-top: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #fff7c2;
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

.otp-timer strong {
    margin-left: 4px;
    color: #111;
    font-variant-numeric: tabular-nums;
}

.otp-timer.is-expired {
    background: #111;
    color: #FFD700;
}

#verifyEmailModal .login-links,
#otpLoginModal .login-links {
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #FFD700;
}

.optional-label {
    color: #666;
    font-weight: 500;
}

.error-message {
    color: #dc2626;
    font-size: 14px;
    margin-bottom: 16px;
}

.btn-submit {
    width: 100%;
    padding: 12px;
    background: #FFD700;
    color: #111;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-submit:hover {
    background: #e6c200;
}

.btn-submit:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

.register-terms-group {
    margin-top: -2px;
}

.register-terms-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}

.register-terms-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #FFD700;
    cursor: pointer;
}

.success-message {
    color: #16a34a;
    font-size: 14px;
    margin-bottom: 16px;
    padding: 10px;
    background-color: #dcfce7;
    border-radius: 6px;
}

@media (max-width: 420px) {
    .modal {
        padding: 16px;
    }

    .modal-content,
    #registerModal .modal-content,
    #forgotPasswordModal .modal-content,
    #resetPasswordModal .modal-content,
    .legal-summary-modal-content {
        width: 100%;
        max-height: calc(100dvh - 32px);
        padding: 26px 18px;
    }

    .legal-summary-modal-content {
        padding: 0;
    }

    .legal-summary-header,
    .legal-summary-body,
    .legal-summary-actions {
        padding-left: 18px;
        padding-right: 18px;
    }

    .legal-summary-body {
        max-height: 54vh;
    }

    .otp-modal-content {
        padding: 30px 18px 24px;
    }

    .otp-digit-row {
        gap: 6px;
    }

    .form-group .otp-digit-input {
        font-size: 18px;
        border-radius: 7px;
    }
}

/* Landing product carousel responsive reset */
.products {
    overflow: hidden;
}

.products .container {
    max-width: 1200px;
}

.products .section-header {
    margin-bottom: 2rem !important;
}

.products .section-header p {
    margin-bottom: 0;
}

.products .product-carousel {
    --landing-product-gap: 20px;
    --landing-product-span-gap: 40px;
    width: 100%;
    max-width: 1100px;
    padding: 0 4px;
}

.products .carousel-viewport {
    min-width: 0;
    overflow: hidden;
}

.products .carousel-track {
    gap: var(--landing-product-gap);
    align-items: stretch;
}

.products .carousel-track .product-card {
    flex: 0 0 calc((100% - var(--landing-product-span-gap)) / 3) !important;
    min-width: calc((100% - var(--landing-product-span-gap)) / 3) !important;
    max-width: calc((100% - var(--landing-product-span-gap)) / 3) !important;
    width: calc((100% - var(--landing-product-span-gap)) / 3) !important;
    min-height: 390px !important;
}

.products .product-card .product-image-container {
    margin-top: 0;
    flex-shrink: 0;
}

.products .product-card h4 {
    margin-top: 0;
    overflow-wrap: anywhere;
}

.products .product-card .category {
    overflow-wrap: anywhere;
}

.products .price-row {
    flex-wrap: wrap;
}

.products .action-buttons {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .products {
        padding: 72px 0;
    }

    .products .product-carousel {
        --landing-product-gap: 16px;
        --landing-product-span-gap: 16px;
        gap: 10px;
    }

    .products .carousel-track .product-card {
        flex-basis: calc((100% - var(--landing-product-gap)) / 2) !important;
        min-width: calc((100% - var(--landing-product-gap)) / 2) !important;
        max-width: calc((100% - var(--landing-product-gap)) / 2) !important;
        width: calc((100% - var(--landing-product-gap)) / 2) !important;
        min-height: 370px !important;
    }

    .products .product-card img {
        height: 150px;
    }
}

@media (max-width: 576px) {
    .products {
        padding: 56px 0;
    }

    .products .section-header h2 {
        font-size: 1.75rem;
    }

    .products .product-carousel {
        --landing-product-gap: 12px;
        --landing-product-span-gap: 0px;
        display: block;
        position: relative;
        padding: 0;
        margin-bottom: 20px;
    }

    .products .carousel-viewport {
        width: 100%;
        border-radius: 14px;
    }

    .products .carousel-track .product-card {
        flex-basis: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 360px !important;
        padding: 16px !important;
    }

    .products .carousel-btn {
        position: absolute;
        top: 50%;
        z-index: 5;
        width: 36px;
        height: 36px;
        transform: translateY(-50%);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    }

    .products .carousel-btn.prev-btn {
        left: 8px;
    }

    .products .carousel-btn.next-btn {
        right: 8px;
    }

    .products .product-card img {
        height: 140px;
        margin-bottom: 14px;
    }

    .products .price-row {
        align-items: stretch;
    }

    .products .action-buttons {
        width: 100%;
        margin-left: 0;
    }

    .products .buy-btn {
        flex: 1 1 auto;
    }

    .products .cart-btn {
        width: 42px;
        flex: 0 0 42px;
    }
}

.products .landing-top-product-card {
    cursor: pointer;
    position: relative;
}

.products .landing-rank-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    min-width: 42px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    color: #ffd700;
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.products .landing-product-desc {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 0 12px;
    min-height: 40px;
    overflow-wrap: anywhere;
}

.products .landing-star-muted {
    color: #d1d5db !important;
}

.products .landing-branch-tools {
    margin-top: 16px;
}

.products .landing-back-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s ease;
}

.products .landing-back-btn:hover {
    border-color: #ffd700;
    background: #fff8cf;
}

.products .landing-products-empty {
    width: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
}

.products .landing-products-empty i {
    font-size: 2rem;
    color: #111827;
}

/* Modern landing page UI refresh */
:root {
    --landing-dark: #111827;
    --landing-dark-2: #1a1a2e;
    --landing-yellow: #FFD700;
    --landing-page: #f4f7fb;
    --landing-border: rgba(17, 24, 39, 0.1);
    --landing-muted: #64748b;
}

body {
    background: var(--landing-page);
}

body nav.navbar {
    background: var(--landing-dark) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.16) !important;
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.18) !important;
}

body nav.navbar .brand-title,
body nav.navbar .brand-subtitle {
    color: var(--landing-yellow) !important;
}

body nav.navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    padding: 0.58rem 0.85rem;
    border-radius: 999px;
}

body nav.navbar .navbar-nav .nav-link:hover,
body nav.navbar .navbar-nav .nav-link.active {
    background: rgba(255, 215, 0, 0.14) !important;
    color: var(--landing-yellow) !important;
}

body nav.navbar .navbar-toggler {
    border-color: rgba(255, 215, 0, 0.75) !important;
}

body nav.navbar .navbar-toggler-icon {
    filter: invert(1);
}

body nav.navbar .btn-dark {
    background: var(--landing-yellow) !important;
    color: var(--landing-dark) !important;
    border-color: var(--landing-yellow) !important;
}

body nav.navbar .btn-outline-dark {
    color: var(--landing-yellow) !important;
    border-color: rgba(255, 215, 0, 0.55) !important;
}

.hero {
    padding: 42px 0 32px !important;
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 215, 0, 0.22), transparent 28%),
        linear-gradient(180deg, #edf2f7 0%, #f8fafc 100%) !important;
}

.hero .container {
    max-width: 1240px;
}

.hero .row {
    position: relative;
    min-height: 620px;
    padding: clamp(32px, 5vw, 66px);
    gap: 34px;
    border-radius: 22px;
    background:
        linear-gradient(112deg, rgba(17, 24, 39, 0.98) 0%, rgba(26, 26, 46, 0.96) 55%, rgba(255, 215, 0, 0.96) 55%, rgba(255, 215, 0, 0.9) 100%);
    box-shadow: 0 34px 80px rgba(17, 24, 39, 0.2);
    overflow: hidden;
}

.hero .row::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 54px 54px;
    opacity: 0.45;
    pointer-events: none;
}

.hero .row::after {
    content: "";
    position: absolute;
    right: -110px;
    top: -140px;
    width: 430px;
    height: 430px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
}

.hero .col-lg-6,
.hero .col-md-12,
.hero-text,
.hero-image {
    position: relative;
    z-index: 1;
}

.hero-text {
    max-width: 610px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.1);
    color: var(--landing-yellow);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 660px;
    color: #ffffff;
    font-size: clamp(3rem, 6vw, 5.4rem) !important;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
}

.hero h1 span {
    color: var(--landing-yellow);
}

.hero p {
    max-width: 540px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}

.hero-btns {
    flex-wrap: wrap;
}

.hero .btn-shop,
.hero .btn-learn {
    min-height: 50px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 900;
}

.hero .btn-shop {
    background: var(--landing-yellow);
    color: var(--landing-dark);
    box-shadow: 0 16px 34px rgba(255, 215, 0, 0.25);
}

.hero .btn-learn {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

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

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 560px;
}

.stat-item {
    min-width: 0;
    padding: 16px 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
}

.stat-item h3 {
    color: var(--landing-yellow);
    font-size: 1.08rem;
    margin-bottom: 3px;
}

.stat-item p {
    color: rgba(255, 255, 255, 0.68);
    font-weight: 700;
}

.hero-image {
    max-width: 520px;
    margin-left: auto;
    padding: 18px;
    border-radius: 48px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow: 0 28px 60px rgba(17, 24, 39, 0.22);
}

.hero-image img {
    width: 100%;
    min-height: 440px;
    max-height: 500px;
    border-radius: 34px;
    object-fit: cover;
    box-shadow: none;
}

.hero-service-card {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 230px;
    padding: 12px 14px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--landing-dark);
    font-size: 0.82rem;
    font-weight: 900;
    box-shadow: 0 20px 38px rgba(17, 24, 39, 0.18);
}

.hero-service-card i {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--landing-yellow);
    color: var(--landing-dark);
}

.hero-service-card-top {
    left: -18px;
    top: 46px;
}

.hero-service-card-bottom {
    right: -14px;
    bottom: 52px;
}

.hero-carousel {
    padding: 28px 0 84px !important;
    background: #f8fafc !important;
}

.hero-carousel .carousel-container {
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 22px;
    box-shadow: 0 26px 60px rgba(17, 24, 39, 0.16);
}

.hero-carousel .carousel-overlay {
    background: linear-gradient(transparent, rgba(17, 24, 39, 0.86));
}

.products {
    padding: 90px 0 !important;
    background: #ffffff !important;
}

.section-header h2,
.why-us h2,
.cta h2 {
    color: var(--landing-dark);
    font-weight: 900;
    letter-spacing: 0;
}

.section-header p,
.why-us > .container > p {
    color: var(--landing-muted);
}

.products .product-carousel {
    max-width: 1160px;
    padding: 22px;
    border: 1px solid var(--landing-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.09);
}

.products .carousel-track .product-card {
    border: 1px solid var(--landing-border);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(17, 24, 39, 0.08);
}

.products .carousel-track .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 54px rgba(17, 24, 39, 0.15);
}

.products .product-card img {
    height: 178px;
    border-radius: 16px;
    background: #f8fafc;
}

.products .landing-rank-badge,
.products .carousel-btn {
    background: var(--landing-dark);
    color: var(--landing-yellow);
}

.products .carousel-btn:hover {
    background: var(--landing-yellow);
    color: var(--landing-dark);
}

.products .price {
    color: var(--landing-dark);
}

.products .cart-btn {
    border-radius: 12px;
}

.products .landing-back-btn:hover {
    border-color: var(--landing-yellow);
    background: #fff8cf;
}

.why-us {
    padding: 90px 0 !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.why-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 22px;
}

.why-card {
    min-height: 250px;
    border: 1px solid var(--landing-border);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
}

.why-card i {
    color: var(--landing-dark);
    box-shadow: 0 14px 30px rgba(255, 215, 0, 0.28);
}

.why-card h4 {
    color: var(--landing-dark);
}

.cta {
    padding: 34px 0 96px !important;
    background: #f8fafc !important;
}

.cta .container {
    max-width: 1120px;
    padding: 56px 32px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, var(--landing-dark) 0%, var(--landing-dark-2) 62%, var(--landing-yellow) 62%, var(--landing-yellow) 100%);
    color: #ffffff;
    box-shadow: 0 28px 70px rgba(17, 24, 39, 0.2);
}

.cta h2 {
    color: #ffffff;
}

.cta p {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.76);
}

.cta .btn-dark {
    background: var(--landing-yellow);
    color: var(--landing-dark);
}

.cta .btn-white {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

@media (max-width: 991px) {
    .hero {
        padding: 18px 0 24px !important;
    }

    .hero .row {
        min-height: 0;
        padding: 30px;
        background: linear-gradient(180deg, var(--landing-dark) 0%, var(--landing-dark-2) 58%, var(--landing-yellow) 58%, var(--landing-yellow) 100%);
        text-align: center;
    }

    .hero-text,
    .hero p,
    .hero-stats {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image {
        margin: 10px auto 0;
    }

    .hero-image img {
        min-height: 330px;
    }
}

@media (max-width: 576px) {
    .hero .row {
        padding: 24px 16px 18px;
        border-radius: 16px;
    }

    .hero h1 {
        font-size: clamp(2.18rem, 12vw, 3.2rem) !important;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .hero-image {
        padding: 10px;
        border-radius: 26px;
    }

    .hero-image img {
        min-height: 250px;
        border-radius: 20px;
    }

    .hero-service-card {
        position: static;
        width: 100%;
        max-width: none;
        justify-content: center;
        margin-top: 10px;
    }

    .products .product-carousel {
        padding: 14px;
        border-radius: 18px;
    }

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

    .cta .container {
        padding: 38px 20px;
        background: linear-gradient(180deg, var(--landing-dark) 0%, var(--landing-dark-2) 72%, var(--landing-yellow) 72%, var(--landing-yellow) 100%);
    }
}

/* Ascone-inspired landing composition */
:root {
    --ascone-dark: #111827;
    --ascone-ink: #070b1d;
    --ascone-yellow: #FFD700;
    --ascone-cream: #fff9df;
    --ascone-soft: #eef4f6;
    --ascone-line: rgba(17, 24, 39, 0.09);
    --ascone-muted: #5f6b7a;
}

body {
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 215, 0, 0.16), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(17, 24, 39, 0.12), transparent 26%),
        #dce8ef;
}

body nav.navbar {
    width: min(100% - 32px, 1320px);
    margin: 24px auto 0;
    border: 1px solid var(--ascone-line) !important;
    border-radius: 26px 26px 0 0;
    background: rgba(255, 249, 223, 0.96) !important;
    box-shadow: 0 26px 58px rgba(17, 24, 39, 0.14) !important;
}

body nav.navbar .container {
    max-width: 1240px;
}

body nav.navbar .brand-title {
    color: var(--ascone-ink) !important;
    font-size: 1.35rem;
    letter-spacing: 0;
}

body nav.navbar .brand-subtitle {
    color: rgba(17, 24, 39, 0.62) !important;
}

body nav.navbar .navbar-nav .nav-link {
    color: rgba(17, 24, 39, 0.74) !important;
    border-radius: 999px;
    padding: 0.58rem 0.9rem;
}

body nav.navbar .navbar-nav .nav-link:hover,
body nav.navbar .navbar-nav .nav-link.active {
    background: var(--ascone-dark) !important;
    color: var(--ascone-yellow) !important;
}

body nav.navbar .btn-dark {
    background: var(--ascone-dark) !important;
    border-color: var(--ascone-dark) !important;
    color: #ffffff !important;
}

body nav.navbar #globalCartLink {
    background: var(--ascone-dark) !important;
    border-color: var(--ascone-dark) !important;
    color: var(--ascone-yellow) !important;
}

body nav.navbar .navbar-toggler {
    border-color: var(--ascone-dark) !important;
}

body nav.navbar .navbar-toggler-icon {
    filter: none;
}

.hero,
.hero-carousel,
.products,
.why-us,
.cta {
    width: min(100% - 32px, 1320px);
    margin-left: auto;
    margin-right: auto;
}

.hero {
    padding: 0 0 34px !important;
    background:
        linear-gradient(var(--ascone-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ascone-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--ascone-cream) 0%, #ffffff 78%) !important;
    background-size: 128px 128px, 128px 128px, auto;
    border-left: 1px solid var(--ascone-line);
    border-right: 1px solid var(--ascone-line);
}

.hero .container {
    max-width: 1240px;
    padding-top: 42px;
}

.hero .row {
    min-height: 570px;
    padding: 0 !important;
    gap: 54px;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
}

.hero .row::before,
.hero .row::after {
    display: none;
}

.hero-text {
    max-width: 630px;
}

.hero-eyebrow {
    margin-bottom: 18px;
    padding: 8px 13px;
    border-color: rgba(17, 24, 39, 0.13);
    background: #ffffff;
    color: var(--ascone-dark);
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
}

.hero h1 {
    color: var(--ascone-ink);
    font-size: clamp(3rem, 6.4vw, 5.65rem) !important;
    line-height: 1.02;
    letter-spacing: 0;
}

.hero h1 span {
    display: inline-block;
    color: var(--ascone-yellow);
    text-shadow: 0 1px 0 rgba(17, 24, 39, 0.18);
}

.hero p {
    max-width: 575px;
    color: var(--ascone-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.hero .btn-shop {
    min-height: 48px;
    border-radius: 999px;
    background: var(--ascone-dark);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(17, 24, 39, 0.18);
}

.hero .btn-shop:hover {
    color: var(--ascone-yellow);
}

.hero .btn-learn {
    min-height: 48px;
    padding: 15px 28px;
    border-color: rgba(17, 24, 39, 0.14);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ascone-dark);
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.stat-item {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.stat-item:not(:last-child) {
    padding-right: 16px;
    border-right: 1px solid rgba(17, 24, 39, 0.12);
}

.stat-item h3 {
    color: var(--ascone-ink);
    font-size: 1.1rem;
    font-weight: 900;
}

.stat-item p {
    color: var(--ascone-muted);
    font-size: 0.78rem;
}

.hero-image {
    width: min(100%, 530px);
    max-width: 530px;
    margin-left: auto;
    padding: 16px;
    border: 0;
    border-radius: 999px 999px 42px 999px;
    background:
        linear-gradient(135deg, rgba(255, 215, 0, 0.7), rgba(238, 244, 246, 0.92));
    box-shadow: none;
}

.hero-image::before {
    content: "";
    position: absolute;
    inset: 52px -30px -20px 72px;
    z-index: -1;
    border-radius: 999px;
    background: var(--ascone-dark);
}

.hero-image img {
    min-height: 430px;
    max-height: 510px;
    border-radius: 999px 999px 30px 999px;
    object-position: center;
}

.hero-service-card {
    border-color: rgba(17, 24, 39, 0.1);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ascone-dark);
    box-shadow: 0 18px 36px rgba(17, 24, 39, 0.14);
}

.hero-service-card i {
    border-radius: 999px;
    background: var(--ascone-yellow);
    color: var(--ascone-dark);
}

.hero-service-card-top {
    left: -30px;
    top: 72px;
}

.hero-service-card-bottom {
    right: -24px;
    bottom: 70px;
}

.hero-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vw, 42px);
    padding: 30px 0 4px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    color: rgba(17, 24, 39, 0.72);
    flex-wrap: wrap;
}

.hero-brand-row span {
    color: var(--ascone-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-brand-row strong {
    color: var(--ascone-dark);
    font-size: 0.95rem;
    font-weight: 900;
}

.hero-carousel {
    padding: 42px 0 76px !important;
    border-left: 1px solid var(--ascone-line);
    border-right: 1px solid var(--ascone-line);
    background: #ffffff !important;
}

.hero-carousel .carousel-container {
    max-width: 1180px;
    border-radius: 30px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 24px 55px rgba(17, 24, 39, 0.13);
}

.hero-carousel .carousel-slide img {
    height: 360px;
}

.products {
    padding: 84px 0 !important;
    border-left: 1px solid var(--ascone-line);
    border-right: 1px solid var(--ascone-line);
    background:
        linear-gradient(var(--ascone-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ascone-line) 1px, transparent 1px),
        #f9fbfc !important;
    background-size: 128px 128px, 128px 128px, auto;
}

.products .section-header h2,
.why-us h2 {
    color: var(--ascone-ink);
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.products .product-carousel {
    max-width: 1180px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.products .carousel-track .product-card {
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
}

.products .product-card img {
    border-radius: 18px;
    background: linear-gradient(135deg, #eef4f6, #fff7cc);
}

.products .landing-rank-badge {
    background: var(--ascone-dark);
    color: var(--ascone-yellow);
}

.products .carousel-btn {
    background: #ffffff;
    color: var(--ascone-dark);
    border: 1px solid rgba(17, 24, 39, 0.1);
    box-shadow: 0 12px 26px rgba(17, 24, 39, 0.12);
}

.products .carousel-btn:hover {
    background: var(--ascone-dark);
    color: var(--ascone-yellow);
}

.products .cart-btn {
    background: var(--ascone-yellow);
    color: var(--ascone-dark);
}

.why-us {
    padding: 86px 0 !important;
    border-left: 1px solid var(--ascone-line);
    border-right: 1px solid var(--ascone-line);
    background: #ffffff !important;
}

.why-grid {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.why-card {
    align-items: flex-start;
    min-height: 235px;
    padding: 34px;
    border-radius: 28px;
    text-align: left;
    box-shadow: none;
}

.why-card:nth-child(1) {
    background: var(--ascone-dark);
    color: #ffffff;
}

.why-card:nth-child(1) h4,
.why-card:nth-child(1) p {
    color: #ffffff;
}

.why-card:nth-child(2) {
    background: var(--ascone-soft);
}

.why-card:nth-child(3) {
    background: var(--ascone-cream);
}

.why-card i {
    margin: 0 0 24px;
}

.cta {
    padding: 0 0 90px !important;
    border-left: 1px solid var(--ascone-line);
    border-right: 1px solid var(--ascone-line);
    border-radius: 0 0 26px 26px;
    background: #ffffff !important;
}

.cta .container {
    max-width: 1180px;
    padding: 54px 42px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 215, 0, 0.34), transparent 28%),
        var(--ascone-dark);
}

.cta h2 {
    color: #ffffff;
}

.cta .btn-dark {
    background: var(--ascone-yellow);
    color: var(--ascone-dark);
}

.cta .btn-white {
    background: #ffffff;
    color: var(--ascone-dark);
}

@media (max-width: 991px) {
    body nav.navbar,
    .hero,
    .hero-carousel,
    .products,
    .why-us,
    .cta {
        width: min(100% - 16px, 1320px);
    }

    body nav.navbar #navbarNav {
        background: var(--ascone-cream) !important;
    }

    body nav.navbar #navbarNav .navbar-nav.nav-links .nav-link {
        color: var(--ascone-dark) !important;
    }

    body nav.navbar #navbarNav .navbar-nav.nav-links .nav-link:hover,
    body nav.navbar #navbarNav .navbar-nav.nav-links .nav-link.active {
        background: var(--ascone-dark) !important;
        color: var(--ascone-yellow) !important;
    }

    .hero .row {
        gap: 34px;
        background: transparent !important;
        text-align: center;
    }

    .hero h1,
    .hero p,
    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image {
        margin: 8px auto 0;
    }

    .hero-image img {
        min-height: 330px;
    }
}

@media (max-width: 576px) {
    body nav.navbar {
        margin-top: 8px;
        border-radius: 18px 18px 0 0;
    }

    .hero .container {
        padding-top: 28px;
    }

    .hero h1 {
        font-size: clamp(2.25rem, 13vw, 3.4rem) !important;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .stat-item:not(:last-child) {
        border-right: 0;
    }

    .hero-image {
        border-radius: 34px;
    }

    .hero-image::before {
        display: none;
    }

    .hero-image img {
        min-height: 260px;
        border-radius: 24px;
    }

    .hero-service-card {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 10px;
        justify-content: center;
    }

    .hero-brand-row {
        padding-left: 12px;
        padding-right: 12px;
        gap: 14px;
    }

    .hero-carousel .carousel-slide img {
        height: 245px;
    }

    .products .carousel-track .product-card {
        border-radius: 20px;
    }

    .why-card {
        text-align: center;
        align-items: center;
    }

    .cta .container {
        padding: 38px 20px;
        border-radius: 22px;
    }
}

/* Full-width correction: keep the Ascone-inspired style without boxing the whole website */
body nav.navbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

.hero,
.hero-carousel,
.products,
.why-us,
.cta {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.hero {
    padding-top: 0 !important;
}

.hero .container,
.hero-carousel .container,
.products .container,
.why-us .container,
.cta .container {
    max-width: 1240px;
}

.hero .row {
    border-radius: 0 !important;
}

.cta {
    border-radius: 0 !important;
}

@media (max-width: 991px) {
    body nav.navbar,
    .hero,
    .hero-carousel,
    .products,
    .why-us,
    .cta {
        width: 100% !important;
    }
}

/* Landing alignment cleanup: one shared grid for the full home page */
body {
    overflow-x: hidden;
}

body nav.navbar .container,
.hero .container,
.hero-carousel .container,
.products .container,
.why-us .container,
.cta .container {
    width: 100%;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.hero {
    padding: 0 !important;
    background:
        linear-gradient(var(--ascone-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ascone-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--ascone-cream) 0%, #ffffff 82%) !important;
    background-size: 128px 128px, 128px 128px, auto !important;
}

.hero .container {
    padding-top: 64px !important;
    padding-bottom: 30px !important;
}

.hero .row {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 56px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hero .row > [class*="col-"] {
    flex: 1 1 calc(50% - 28px) !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hero-text {
    max-width: 610px !important;
    padding: 16px 0 !important;
    text-align: left !important;
}

.hero h1 {
    max-width: 620px;
    font-size: clamp(3.25rem, 5.6vw, 5.15rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 18px !important;
}

.hero p {
    max-width: 530px !important;
    margin-bottom: 24px !important;
}

.hero-stats {
    width: 100%;
    max-width: 540px;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    margin-top: 24px !important;
}

.hero-image {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 0 0 auto !important;
    padding: 14px !important;
}

.hero-image::before {
    inset: 40px -18px -18px 56px !important;
}

.hero-image img {
    width: 100% !important;
    min-height: 370px !important;
    max-height: 430px !important;
}

.hero-service-card-top {
    left: -10px !important;
    top: 54px !important;
}

.hero-service-card-bottom {
    right: -10px !important;
    bottom: 54px !important;
}

.hero-brand-row {
    max-width: 1240px !important;
    margin: 28px auto 0 !important;
    padding: 22px 0 0 !important;
    justify-content: center !important;
}

.hero-carousel {
    padding: 38px 0 66px !important;
}

.hero-carousel .carousel-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px !important;
}

.hero-carousel .carousel-slide img {
    height: clamp(260px, 22vw, 350px) !important;
}

.products {
    padding: 68px 0 78px !important;
}

.products .section-header {
    margin-bottom: 34px !important;
}

.products .section-header h2 {
    margin-bottom: 10px !important;
}

.products .product-carousel {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 auto !important;
}

.products .product-carousel > .carousel-btn {
    position: static !important;
    transform: none !important;
    z-index: 2 !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
}

.products .carousel-viewport {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.products .carousel-track {
    gap: 24px !important;
}

.products .carousel-track .product-card {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    min-width: calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3) !important;
    width: calc((100% - 48px) / 3) !important;
    min-height: 360px !important;
}

.why-us {
    padding: 76px 0 !important;
}

.why-grid {
    width: 100% !important;
    max-width: 100% !important;
}

.cta {
    padding: 0 0 78px !important;
}

.cta .container {
    max-width: 1240px !important;
}

@media (max-width: 991px) {
    body nav.navbar .container,
    .hero .container,
    .hero-carousel .container,
    .products .container,
    .why-us .container,
    .cta .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .hero .container {
        padding-top: 44px !important;
    }

    .hero .row {
        gap: 34px !important;
        text-align: center !important;
        flex-wrap: wrap !important;
    }

    .hero .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    .hero-text {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero p,
    .hero-stats {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-image {
        margin: 0 auto !important;
        max-width: 470px !important;
    }

    .products .carousel-track .product-card {
        flex-basis: calc((100% - 24px) / 2) !important;
        min-width: calc((100% - 24px) / 2) !important;
        max-width: calc((100% - 24px) / 2) !important;
        width: calc((100% - 24px) / 2) !important;
    }

    .why-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    body nav.navbar .container,
    .hero .container,
    .hero-carousel .container,
    .products .container,
    .why-us .container,
    .cta .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero .container {
        padding-top: 36px !important;
        padding-bottom: 22px !important;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.35rem) !important;
    }

    .hero-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .stat-item:not(:last-child) {
        padding-right: 0 !important;
        padding-bottom: 10px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(17, 24, 39, 0.12) !important;
    }

    .hero-image img {
        min-height: 250px !important;
        max-height: 310px !important;
    }

    .hero-brand-row {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 18px !important;
    }

    .hero-brand-row > * {
        flex: 0 0 auto;
    }

    .hero-carousel {
        padding: 28px 0 52px !important;
    }

    .hero-carousel .carousel-slide img {
        height: 230px !important;
    }

    .products {
        padding: 52px 0 62px !important;
    }

    .products .product-carousel {
        display: block !important;
        position: relative !important;
        padding: 0 !important;
    }

    .products .product-carousel > .carousel-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 38px !important;
        height: 38px !important;
    }

    .products .product-carousel > .prev-btn {
        left: 8px !important;
    }

    .products .product-carousel > .next-btn {
        right: 8px !important;
    }

    .products .carousel-track .product-card {
        flex-basis: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Home visual cleanup: no grid, continuous background, ad media in hero */
.hero,
.products,
.why-us,
.cta {
    background: #fff9df !important;
    background-image: none !important;
}

.hero {
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
}

.hero .container {
    padding-top: 70px !important;
    padding-bottom: 72px !important;
}

.hero .row {
    gap: 48px !important;
}

.hero-ad-panel {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border-radius: 30px !important;
    background: transparent !important;
    box-shadow: 0 24px 58px rgba(17, 24, 39, 0.16) !important;
    overflow: hidden !important;
}

.hero-ad-panel::before,
.hero-ad-panel .hero-service-card {
    display: none !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    border-radius: 30px !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

.hero-ad-panel .carousel-slide img {
    width: 100% !important;
    height: clamp(300px, 31vw, 420px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

.hero-ad-panel .carousel-overlay {
    display: none !important;
}

.hero-ad-panel .carousel-btn {
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--ascone-dark) !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.16) !important;
}

.hero-ad-panel .carousel-btn:hover {
    background: var(--ascone-dark) !important;
    color: var(--ascone-yellow) !important;
}

.hero-ad-panel .carousel-indicators {
    bottom: 18px !important;
}

.hero-ad-panel .carousel-indicator {
    background: rgba(255, 255, 255, 0.72) !important;
}

.hero-ad-panel .carousel-indicator.active {
    background: var(--ascone-yellow) !important;
}

.hero-brand-row,
.hero-carousel {
    display: none !important;
}

.products {
    padding-top: 76px !important;
}

.products .product-carousel,
.why-grid,
.cta .container {
    background-color: transparent !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-top: 48px !important;
        padding-bottom: 54px !important;
    }

    .hero-ad-panel {
        margin: 0 auto !important;
        max-width: 640px !important;
    }
}

@media (max-width: 576px) {
    .hero .container {
        padding-top: 36px !important;
        padding-bottom: 42px !important;
    }

    .hero-ad-panel {
        border-radius: 22px !important;
    }

    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel {
        border-radius: 22px !important;
    }

    .hero-ad-panel .carousel-slide img {
        height: 230px !important;
    }
}

/* Home polish: darker contrast, tighter top spacing, balanced hero ad */
.hero,
.products,
.why-us,
.cta {
    background: #fff9df !important;
    background-image: none !important;
}

.hero .container {
    padding-top: 46px !important;
    padding-bottom: 64px !important;
}

.hero .row {
    align-items: stretch !important;
}

.hero-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.hero h1 {
    margin-top: 0 !important;
}

.hero-ad-panel {
    align-self: stretch !important;
    display: flex !important;
    min-height: 100% !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel,
.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide {
    height: 100% !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    min-height: clamp(470px, 39vw, 610px) !important;
    border: 1px solid rgba(17, 24, 39, 0.14) !important;
    background: var(--ascone-dark) !important;
}

.hero-ad-panel .carousel-slide img {
    height: 100% !important;
    min-height: clamp(470px, 39vw, 610px) !important;
    object-fit: cover !important;
}

.products .carousel-track .product-card {
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.12) !important;
}

.products .product-card img,
.products .product-card .product-image-container {
    background: linear-gradient(135deg, #ffffff 0%, #fff6bf 100%) !important;
}

.products .product-card h4,
.products .price {
    color: var(--ascone-dark) !important;
}

.products .product-card .category,
.products .stars {
    color: var(--ascone-muted) !important;
}

.products .quick-view-overlay {
    background: rgba(17, 24, 39, 0.7) !important;
}

.products .quick-view-btn,
.products .cart-btn {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
    border: 0 !important;
}

.products .quick-view-btn:hover,
.products .cart-btn:hover {
    background: var(--ascone-dark) !important;
    color: var(--ascone-yellow) !important;
}

.why-card {
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
}

.cta {
    padding-top: 8px !important;
}

.cta .container {
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 215, 0, 0.35), transparent 30%),
        linear-gradient(135deg, var(--ascone-dark) 0%, #151c33 62%, #3f3a13 100%) !important;
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.2) !important;
}

.cta h2,
.cta p {
    color: #ffffff !important;
}

.cta .btn-dark {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

.cta .btn-white {
    background: #ffffff !important;
    color: var(--ascone-dark) !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-top: 34px !important;
        padding-bottom: 48px !important;
    }

    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel,
    .hero-ad-panel .carousel-slide img {
        min-height: 340px !important;
    }
}

@media (max-width: 576px) {
    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel,
    .hero-ad-panel .carousel-slide img {
        min-height: 230px !important;
    }
}

/* Hero spacing trim after removing stats */
.hero .container {
    padding-top: 40px !important;
    padding-bottom: 46px !important;
}

.hero .row {
    align-items: center !important;
}

.hero-ad-panel {
    align-self: center !important;
    min-height: 0 !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    min-height: clamp(330px, 30vw, 430px) !important;
}

.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide {
    height: clamp(330px, 30vw, 430px) !important;
}

.hero-ad-panel .carousel-slide img {
    height: clamp(330px, 30vw, 430px) !important;
    min-height: 0 !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-top: 32px !important;
        padding-bottom: 42px !important;
    }
}

@media (max-width: 576px) {
    .hero .container {
        padding-top: 28px !important;
        padding-bottom: 34px !important;
    }

    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 230px !important;
        min-height: 230px !important;
    }
}

/* Premium storefront palette based on the final UI audit */
:root {
    --ascone-dark: #0F172A;
    --ascone-ink: #1F2937;
    --ascone-yellow: #FBBF24;
    --ascone-cream: #FFFFFF;
    --ascone-soft: #F8FAFC;
    --ascone-line: #E5E7EB;
    --ascone-muted: #64748B;
}

html,
body {
    background: #ffffff !important;
    color: var(--ascone-ink) !important;
}

body nav.navbar {
    min-height: 80px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--ascone-line) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(12px);
}

body nav.navbar .brand-title {
    color: var(--ascone-dark) !important;
}

body nav.navbar .brand-subtitle,
body nav.navbar .navbar-nav .nav-link {
    color: var(--ascone-ink) !important;
}

body nav.navbar .navbar-nav .nav-link:hover,
body nav.navbar .navbar-nav .nav-link.active {
    background: var(--ascone-dark) !important;
    color: var(--ascone-yellow) !important;
}

body nav.navbar .btn-dark,
body nav.navbar #globalCartLink {
    background: var(--ascone-dark) !important;
    border-color: var(--ascone-dark) !important;
    color: #ffffff !important;
}

body nav.navbar .btn-dark:hover,
body nav.navbar #globalCartLink:hover {
    background: #1E293B !important;
    border-color: #1E293B !important;
    color: var(--ascone-yellow) !important;
}

.hero,
.why-us {
    background: #ffffff !important;
    background-image: none !important;
}

.products,
.cta {
    background: var(--ascone-soft) !important;
    background-image: none !important;
}

.hero .container {
    padding-top: 72px !important;
    padding-bottom: 96px !important;
}

.hero h1 {
    color: var(--ascone-dark) !important;
}

.hero h1 span {
    color: var(--ascone-yellow) !important;
    text-shadow: none !important;
}

.hero p {
    max-width: 550px !important;
    color: var(--ascone-muted) !important;
}

.hero .btn-shop {
    background: var(--ascone-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18) !important;
}

.hero .btn-shop:hover {
    background: #1E293B !important;
    color: var(--ascone-yellow) !important;
}

.hero .btn-learn {
    background: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    color: var(--ascone-dark) !important;
}

.hero .btn-learn:hover {
    background: var(--ascone-soft) !important;
    color: var(--ascone-dark) !important;
}

.hero-ad-panel {
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15) !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    min-height: clamp(360px, 34vw, 480px) !important;
    border-radius: 24px !important;
    border: 1px solid var(--ascone-line) !important;
    background: #ffffff !important;
}

.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide {
    height: clamp(360px, 34vw, 480px) !important;
}

.hero-ad-panel .carousel-slide img {
    height: clamp(360px, 34vw, 480px) !important;
    object-fit: cover !important;
}

.hero-ad-panel .carousel-indicator.active,
.products .landing-rank-badge {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

.products {
    padding: 96px 0 !important;
}

.products .section-header h2,
.why-us h2 {
    color: var(--ascone-dark) !important;
}

.products .section-header p,
.why-us > .container > p {
    color: var(--ascone-muted) !important;
}

.products .carousel-track .product-card {
    border-radius: 18px !important;
    border: 1px solid var(--ascone-line) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.products .carousel-track .product-card:hover {
    border-color: rgba(251, 191, 36, 0.65) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-6px) !important;
}

.products .product-card .product-image-container,
.products .product-card img {
    background: #ffffff !important;
}

.products .product-card img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: 190px !important;
    object-fit: contain !important;
    padding: 10px !important;
}

.products .product-card h4,
.products .price {
    color: var(--ascone-dark) !important;
}

.products .product-card .category,
.products .stars,
.products .landing-product-desc {
    color: var(--ascone-muted) !important;
}

.products .cart-btn,
.products .quick-view-btn {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

.products .cart-btn:hover,
.products .quick-view-btn:hover {
    background: var(--ascone-dark) !important;
    color: var(--ascone-yellow) !important;
}

.products .carousel-btn {
    background: #ffffff !important;
    color: var(--ascone-dark) !important;
    border: 1px solid #CBD5E1 !important;
}

.products .carousel-btn:hover {
    background: var(--ascone-dark) !important;
    color: var(--ascone-yellow) !important;
}

.why-us {
    padding: 110px 0 !important;
}

.why-card,
.why-card:nth-child(1),
.why-card:nth-child(2),
.why-card:nth-child(3) {
    background: #ffffff !important;
    color: var(--ascone-dark) !important;
    border: 1px solid var(--ascone-line) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease !important;
}

.why-card h4,
.why-card p,
.why-card:nth-child(1) h4,
.why-card:nth-child(1) p {
    color: inherit !important;
}

.why-card p {
    color: var(--ascone-muted) !important;
}

.why-card i {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

.why-card:hover {
    background: var(--ascone-dark) !important;
    color: #ffffff !important;
    transform: translateY(-6px) !important;
}

.why-card:hover p {
    color: rgba(255, 255, 255, 0.82) !important;
}

.cta {
    padding: 0 0 96px !important;
}

.cta .container {
    background: linear-gradient(135deg, var(--ascone-dark), #1E293B) !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18) !important;
}

.cta h2,
.cta p {
    color: #ffffff !important;
}

.cta .btn-dark {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

.cta .btn-dark:hover {
    background: #F59E0B !important;
    color: var(--ascone-dark) !important;
}

.cta .btn-white {
    background: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    color: var(--ascone-dark) !important;
}

.cta .btn-white:hover {
    background: var(--ascone-soft) !important;
}

footer {
    background: var(--ascone-dark) !important;
}

footer a:hover,
.footer-col ul li a:hover,
.footer-bottom-links a:hover {
    color: var(--ascone-yellow) !important;
}

/* Dark navy storefront header */
body nav.navbar {
    background: var(--ascone-dark) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18) !important;
}

body nav.navbar .brand-title,
body nav.navbar .brand-subtitle,
body nav.navbar .navbar-nav .nav-link {
    color: #ffffff !important;
}

body nav.navbar .navbar-nav .nav-link:hover,
body nav.navbar .navbar-nav .nav-link.active {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

body nav.navbar .btn-dark,
body nav.navbar #globalCartLink {
    background: var(--ascone-yellow) !important;
    border-color: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

body nav.navbar .btn-dark:hover,
body nav.navbar #globalCartLink:hover {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: var(--ascone-dark) !important;
}

body nav.navbar .navbar-toggler {
    background: var(--ascone-yellow) !important;
    border-color: var(--ascone-yellow) !important;
}

body nav.navbar .nav-actions {
    gap: 14px !important;
}

body nav.navbar #globalCartLink {
    min-width: 58px !important;
    overflow: visible !important;
}

body nav.navbar #globalCartLink #cartCount {
    top: -7px !important;
    right: -7px !important;
    left: auto !important;
    transform: none !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--ascone-dark) !important;
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-top: 52px !important;
        padding-bottom: 72px !important;
    }

    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 340px !important;
        min-height: 340px !important;
    }

    .products,
    .why-us {
        padding: 78px 0 !important;
    }
}

@media (max-width: 576px) {
    .hero .container {
        padding-top: 40px !important;
        padding-bottom: 56px !important;
    }

    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 240px !important;
        min-height: 240px !important;
    }

    .products,
    .why-us {
        padding: 62px 0 !important;
    }
}

/* Dark premium hero inspired by the final reference */
.hero {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 86% 18%, rgba(251, 191, 36, 0.16), transparent 26%),
        linear-gradient(110deg, #0F172A 0%, #111827 58%, #18223A 100%) !important;
    color: #ffffff !important;
    border-bottom: 0 !important;
}

.hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 0.12 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px) !important;
    background-size: 86px 86px !important;
}

.hero .container {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 44px !important;
    padding-bottom: 62px !important;
}

.hero .row {
    min-height: 560px !important;
    align-items: center !important;
    gap: 54px !important;
}

.hero-text::before {
    content: "HOT DEALS  •  PET SUPPLIES  •  BRANCH STOCK" !important;
    width: fit-content !important;
    max-width: 100% !important;
    display: inline-flex !important;
    margin-bottom: 28px !important;
    padding: 11px 18px !important;
    border-radius: 999px !important;
    background: rgba(251, 191, 36, 0.14) !important;
    border: 1px solid rgba(251, 191, 36, 0.38) !important;
    color: var(--ascone-yellow) !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
}

.hero h1 {
    max-width: 680px !important;
    color: #ffffff !important;
    font-size: clamp(3.35rem, 6vw, 5.35rem) !important;
    line-height: 1.02 !important;
}

.hero h1 span {
    color: var(--ascone-yellow) !important;
}

.hero p {
    max-width: 600px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 1.04rem !important;
}

.hero .btn-shop {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
    box-shadow: 0 18px 42px rgba(251, 191, 36, 0.18) !important;
}

.hero .btn-shop:hover {
    background: #F59E0B !important;
    color: var(--ascone-dark) !important;
}

.hero .btn-learn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--ascone-dark) !important;
}

.hero .btn-learn:hover {
    background: #F8FAFC !important;
    border-color: #F8FAFC !important;
}

.hero-ad-panel {
    width: 100% !important;
    max-width: 590px !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32) !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    height: 430px !important;
    min-height: 430px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: #ffffff !important;
}

.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide,
.hero-ad-panel .carousel-slide img {
    height: 430px !important;
    min-height: 430px !important;
}

.hero-ad-panel .carousel-slide img {
    object-fit: cover !important;
}

.hero-ad-panel .carousel-btn {
    background: #ffffff !important;
    color: var(--ascone-dark) !important;
}

.hero-ad-panel .carousel-btn:hover {
    background: var(--ascone-yellow) !important;
    color: var(--ascone-dark) !important;
}

.hero-ad-panel .carousel-indicator {
    background: rgba(255, 255, 255, 0.7) !important;
}

.hero-ad-panel .carousel-indicator.active {
    background: var(--ascone-yellow) !important;
}

.products {
    background: #F8FAFC !important;
    padding-top: 82px !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-top: 34px !important;
        padding-bottom: 54px !important;
    }

    .hero .row {
        min-height: auto !important;
        gap: 36px !important;
    }

    .hero-text::before {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 340px !important;
        min-height: 340px !important;
    }
}

@media (max-width: 576px) {
    .hero .container {
        padding-top: 28px !important;
        padding-bottom: 42px !important;
    }

    .hero-text::before {
        font-size: 0.66rem !important;
        white-space: normal !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .hero-ad-panel .carousel-container,
    .hero-ad-panel .hero-ad-carousel,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 240px !important;
        min-height: 240px !important;
    }
}

/* Compact landing vertical rhythm */
.hero .container {
    padding-top: 28px !important;
    padding-bottom: 38px !important;
}

.hero .row {
    min-height: 455px !important;
    gap: 42px !important;
}

.hero-text::before {
    margin-bottom: 18px !important;
}

.hero h1 {
    margin-bottom: 14px !important;
}

.hero p {
    margin-bottom: 20px !important;
}

.hero-btns {
    margin-bottom: 0 !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel,
.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide,
.hero-ad-panel .carousel-slide img {
    height: 360px !important;
    min-height: 360px !important;
}

.products {
    padding-top: 54px !important;
    padding-bottom: 58px !important;
}

.products .section-header {
    margin-bottom: 24px !important;
}

.why-us {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
}

.why-us > .container > p {
    margin-bottom: 28px !important;
}

.why-card {
    min-height: 205px !important;
}

.cta {
    padding-top: 0 !important;
    padding-bottom: 56px !important;
}

.cta .container {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-top: 26px !important;
        padding-bottom: 34px !important;
    }

    .hero .row {
        gap: 28px !important;
    }

    .products,
    .why-us {
        padding-top: 46px !important;
        padding-bottom: 48px !important;
    }

    .cta {
        padding-bottom: 46px !important;
    }
}

@media (max-width: 576px) {
    .hero .container {
        padding-top: 22px !important;
        padding-bottom: 30px !important;
    }

    .products,
    .why-us {
        padding-top: 38px !important;
        padding-bottom: 40px !important;
    }

    .cta {
        padding-bottom: 38px !important;
    }
}

/* Hero scale and carousel controls refinement */
.hero .row {
    min-height: 420px !important;
    align-items: center !important;
}

.hero h1 {
    font-size: clamp(2.55rem, 4.4vw, 4.05rem) !important;
    line-height: 1.06 !important;
}

.hero p {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    max-width: 560px !important;
}

.hero-text::before {
    padding: 9px 15px !important;
    font-size: 0.68rem !important;
    margin-bottom: 16px !important;
}

.hero .btn-shop,
.hero .btn-learn {
    min-height: 44px !important;
    padding: 12px 24px !important;
}

.hero-ad-panel {
    overflow: visible !important;
    box-shadow: none !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 54px !important;
    border: 0 !important;
    background: transparent !important;
}

.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide,
.hero-ad-panel .carousel-slide img {
    height: clamp(295px, 28vw, 370px) !important;
    min-height: clamp(295px, 28vw, 370px) !important;
}

.hero-ad-panel .carousel-slide {
    overflow: hidden !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3) !important;
}

.hero-ad-panel .carousel-slide img {
    border-radius: 24px !important;
}

.hero-ad-panel .carousel-btn {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
}

.hero-ad-panel .carousel-btn.prev {
    left: calc(50% - 74px) !important;
}

.hero-ad-panel .carousel-btn.next {
    right: calc(50% - 74px) !important;
}

.hero-ad-panel .carousel-indicators {
    bottom: 11px !important;
}

@media (max-width: 991px) {
    .hero .row {
        min-height: auto !important;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 8vw, 3.35rem) !important;
    }

    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 300px !important;
        min-height: 300px !important;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: clamp(2.05rem, 10vw, 2.85rem) !important;
    }

    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 220px !important;
        min-height: 220px !important;
    }
}

/* Hero carousel containment fix */
.hero .row {
    overflow: visible !important;
}

.hero-text {
    position: relative !important;
    z-index: 2 !important;
}

.hero-ad-panel {
    position: relative !important;
    z-index: 1 !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    position: relative !important;
    overflow: visible !important;
}

.hero-ad-panel .hero-carousel-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(295px, 28vw, 370px) !important;
    min-height: clamp(295px, 28vw, 370px) !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3) !important;
}

.hero-ad-panel .carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

.hero-ad-panel .carousel-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hero-ad-panel .carousel-slide img {
    width: 100% !important;
    display: block !important;
    border-radius: 0 !important;
}

.hero-ad-panel .carousel-btn {
    z-index: 4 !important;
}

.hero-ad-panel .carousel-indicators {
    z-index: 3 !important;
}

@media (max-width: 991px) {
    .hero-ad-panel .hero-carousel-viewport {
        height: 300px !important;
        min-height: 300px !important;
    }
}

@media (max-width: 576px) {
    .hero-ad-panel .hero-carousel-viewport {
        height: 220px !important;
        min-height: 220px !important;
    }
}

/* Hero carousel controls: centered and evenly spaced below image */
.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    padding-bottom: 48px !important;
}

.hero-ad-panel .carousel-btn {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
}

.hero-ad-panel .carousel-btn.prev {
    left: calc(50% - 108px) !important;
    right: auto !important;
}

.hero-ad-panel .carousel-btn.next {
    left: calc(50% + 70px) !important;
    right: auto !important;
}

.hero-ad-panel .carousel-indicators {
    left: 50% !important;
    bottom: 13px !important;
    transform: translateX(-50%) !important;
    gap: 10px !important;
}

.hero-ad-panel .carousel-indicator {
    width: 12px !important;
    height: 12px !important;
}

/* Final carousel control layout: no overlap, perfectly centered */
.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 0 !important;
}

.hero-carousel-controls {
    width: 100% !important;
    height: 48px !important;
    margin-top: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
}

.hero-carousel-controls .carousel-btn {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
}

.hero-carousel-controls .carousel-btn.prev,
.hero-carousel-controls .carousel-btn.next {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

.hero-carousel-controls .carousel-indicators {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.hero-carousel-controls .carousel-indicator {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
}

/* Remove excess dark hero bottom space */
.hero .container {
    padding-bottom: 24px !important;
}

.hero .row {
    min-height: 380px !important;
}

.products {
    padding-top: 36px !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-bottom: 28px !important;
    }

    .products {
        padding-top: 32px !important;
    }
}

@media (max-width: 576px) {
    .hero .container {
        padding-bottom: 24px !important;
    }

    .products {
        padding-top: 28px !important;
    }
}

/* Tighten transition from hero to Featured Products */
.hero .container {
    padding-bottom: 12px !important;
}

.products {
    padding-top: 12px !important;
}

.products .section-header {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

.products .section-header h2 {
    margin-top: 0 !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-bottom: 14px !important;
    }

    .products {
        padding-top: 12px !important;
    }
}

@media (max-width: 576px) {
    .hero .container {
        padding-bottom: 12px !important;
    }

    .products {
        padding-top: 10px !important;
    }
}

/* Navy borders for featured product cards and images */
.products .carousel-track .product-card {
    border: 1px solid var(--ascone-dark) !important;
}

.products .product-card .product-image-container,
.products .product-card img {
    border: 1px solid var(--ascone-dark) !important;
    border-radius: 16px !important;
}

.products .product-card .product-image-container img {
    border: 0 !important;
}

/* Compact featured product card internals */
.products .carousel-track .product-card {
    min-height: 365px !important;
    padding: 18px 18px 16px !important;
}

.products .product-card .product-image-container {
    height: 190px !important;
    min-height: 190px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.products .product-card img {
    max-height: 170px !important;
    margin-bottom: 0 !important;
}

.products .product-card h4 {
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
}

.products .product-card .category {
    margin: 0 0 12px !important;
    line-height: 1.35 !important;
}

.products .landing-product-desc {
    margin: 0 0 14px !important;
    line-height: 1.35 !important;
}

.products .stars {
    margin: 0 0 12px !important;
    line-height: 1 !important;
}

.products .price-row {
    margin-top: auto !important;
    padding-top: 0 !important;
}

.products .price {
    line-height: 1.1 !important;
}

/* Exact text-stack spacing inside featured cards */
.products .landing-top-product-card h4 {
    margin: 0 0 5px !important;
    padding: 0 !important;
    line-height: 1.18 !important;
}

.products .landing-top-product-card .category {
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

.products .landing-top-product-card .landing-product-desc {
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    line-height: 1.32 !important;
}

.products .landing-top-product-card .stars {
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.products .landing-top-product-card .price-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: center !important;
}

.products .landing-top-product-card .price {
    margin: 0 !important;
    line-height: 1.05 !important;
}

/* Featured card proportions */
.products .carousel-track {
    justify-content: center !important;
}

.products .carousel-track .product-card {
    flex: 0 0 calc((100% - 72px) / 3) !important;
    min-width: calc((100% - 72px) / 3) !important;
    max-width: calc((100% - 72px) / 3) !important;
    width: calc((100% - 72px) / 3) !important;
    min-height: 405px !important;
}

.products .product-card .product-image-container {
    border: 0 !important;
    background: #ffffff !important;
}

.products .product-card img {
    border: 0 !important;
}

@media (max-width: 991px) {
    .products .carousel-track .product-card {
        flex-basis: calc((100% - 24px) / 2) !important;
        min-width: calc((100% - 24px) / 2) !important;
        max-width: calc((100% - 24px) / 2) !important;
        width: calc((100% - 24px) / 2) !important;
    }
}

@media (max-width: 576px) {
    .products .carousel-track .product-card {
        flex-basis: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Exactly 3 cards per featured-products slide on desktop */
.products .carousel-track {
    gap: 24px !important;
    justify-content: flex-start !important;
}

.products .carousel-track .product-card {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    min-width: calc((100% - 48px) / 3) !important;
    max-width: calc((100% - 48px) / 3) !important;
    width: calc((100% - 48px) / 3) !important;
}

@media (max-width: 991px) {
    .products .carousel-track {
        gap: 20px !important;
    }

    .products .carousel-track .product-card {
        flex-basis: calc((100% - 20px) / 2) !important;
        min-width: calc((100% - 20px) / 2) !important;
        max-width: calc((100% - 20px) / 2) !important;
        width: calc((100% - 20px) / 2) !important;
    }
}

@media (max-width: 576px) {
    .products .carousel-track {
        gap: 0 !important;
    }

    .products .carousel-track .product-card {
        flex-basis: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Reference hero layout: navy primary, yellow accent, white wave footer */
body nav.navbar {
    min-height: 72px !important;
    background: #061126 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body nav.navbar .container {
    max-width: 1240px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body nav.navbar .brand-title {
    color: #ffffff !important;
    font-size: 1.25rem !important;
}

body nav.navbar .brand-subtitle {
    color: #FBBF24 !important;
    font-size: 0.66rem !important;
}

body nav.navbar .navbar-nav {
    gap: 18px !important;
}

body nav.navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    padding: 0.58rem 1.05rem !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
}

body nav.navbar .navbar-nav .nav-link:hover,
body nav.navbar .navbar-nav .nav-link.active {
    background: transparent !important;
    border-color: #FBBF24 !important;
    color: #FBBF24 !important;
}

body nav.navbar .nav-actions {
    gap: 10px !important;
}

body nav.navbar .nav-actions .btn,
body nav.navbar #globalCartLink {
    min-height: 42px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

body nav.navbar #globalCartLink {
    color: #FBBF24 !important;
}

body nav.navbar .nav-actions .btn:hover,
body nav.navbar #globalCartLink:hover {
    background: #FBBF24 !important;
    border-color: #FBBF24 !important;
    color: #061126 !important;
}

.hero {
    min-height: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 94% 34%, rgba(255, 255, 255, 0.08) 0 2px, transparent 3px),
        radial-gradient(circle at 8% 46%, rgba(255, 255, 255, 0.08) 0 2px, transparent 3px),
        linear-gradient(135deg, #061126 0%, #0F172A 54%, #07142C 100%) !important;
}

.hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.18 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 6% 42%, rgba(255, 255, 255, 0.18) 0 8px, transparent 9px),
        radial-gradient(circle at 8% 39%, rgba(255, 255, 255, 0.18) 0 5px, transparent 6px),
        radial-gradient(circle at 4% 39%, rgba(255, 255, 255, 0.18) 0 5px, transparent 6px),
        radial-gradient(circle at 95% 36%, rgba(255, 255, 255, 0.16) 0 8px, transparent 9px),
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) !important;
    background-size: auto, auto, auto, auto, 96px 96px, 96px 96px !important;
}

.hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 110px !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='130' viewBox='0 0 1440 130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50C145 145 325 118 507 80C690 42 793 118 979 107C1165 96 1280 24 1440 0V130H0V50Z' fill='%23FBBF24'/%3E%3Cpath d='M0 64C145 150 312 130 507 96C695 63 795 126 980 118C1170 110 1292 38 1440 18V130H0V64Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

.hero .container {
    max-width: 1240px !important;
    padding-top: 24px !important;
    padding-bottom: 110px !important;
}

.hero .row {
    min-height: 455px !important;
    gap: 64px !important;
    align-items: center !important;
}

.hero-text {
    max-width: 560px !important;
}

.hero-text::before {
    content: "HOT DEALS  •  PET SUPPLIES  •  BRANCH STOCK" !important;
    margin-bottom: 18px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(251, 191, 36, 0.55) !important;
    background: rgba(251, 191, 36, 0.08) !important;
    color: #FBBF24 !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
}

.hero h1 {
    max-width: 560px !important;
    color: #ffffff !important;
    font-size: clamp(2.7rem, 4.25vw, 4.15rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
}

.hero h1 span {
    color: #FBBF24 !important;
}

.hero p {
    max-width: 540px !important;
    margin-bottom: 20px !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
}

.hero .btn-shop,
.hero .btn-learn {
    min-height: 44px !important;
    padding: 12px 24px !important;
    border-radius: 999px !important;
    font-size: 0.92rem !important;
}

.hero .btn-shop {
    background: #FBBF24 !important;
    border-color: #FBBF24 !important;
    color: #061126 !important;
}

.hero .btn-learn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #061126 !important;
}

.hero-ad-panel {
    max-width: 520px !important;
    margin-left: auto !important;
}

.hero-ad-panel .hero-carousel-viewport {
    height: 315px !important;
    min-height: 315px !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.36) !important;
}

.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide,
.hero-ad-panel .carousel-slide img {
    height: 315px !important;
    min-height: 315px !important;
}

.hero-ad-panel .carousel-slide,
.hero-ad-panel .carousel-slide img {
    border-radius: 18px !important;
}

.hero-carousel-controls {
    height: 42px !important;
    margin-top: 12px !important;
    gap: 18px !important;
}

.hero-carousel-controls .carousel-btn {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
}

.products {
    background: #ffffff !important;
    padding-top: 42px !important;
}

@media (max-width: 991px) {
    .hero .container {
        padding-top: 22px !important;
        padding-bottom: 86px !important;
    }

    .hero .row {
        gap: 34px !important;
    }

    .hero h1 {
        font-size: clamp(2.35rem, 8vw, 3.4rem) !important;
    }

    .hero-ad-panel {
        margin-right: auto !important;
    }
}

@media (max-width: 576px) {
    body nav.navbar .nav-actions {
        gap: 8px !important;
    }

    .hero .container {
        padding-bottom: 74px !important;
    }

    .hero h1 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
    }

    .hero-ad-panel .hero-carousel-viewport,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 220px !important;
        min-height: 220px !important;
    }
}

/* Final home hero polish based on the provided reference */
html body {
    background: #ffffff !important;
}

body nav.navbar {
    background: #061126 !important;
    min-height: 70px !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body nav.navbar .container {
    max-width: 1240px !important;
    min-height: 70px !important;
    padding: 0 18px !important;
}

body nav.navbar .navbar-brand {
    gap: 8px !important;
}

body nav.navbar .brand-title {
    color: #ffffff !important;
    font-size: 1.22rem !important;
    font-weight: 900 !important;
}

body nav.navbar .brand-subtitle {
    color: #fbbf24 !important;
    font-size: 0.6rem !important;
    font-weight: 900 !important;
}

body nav.navbar .navbar-nav {
    gap: 16px !important;
}

body nav.navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    padding: 0.48rem 1rem !important;
    font-size: 0.9rem !important;
}

body nav.navbar .navbar-nav .nav-link:hover,
body nav.navbar .navbar-nav .nav-link.active {
    background: rgba(251, 191, 36, 0.08) !important;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
}

body nav.navbar .nav-actions {
    align-items: center !important;
    gap: 10px !important;
}

body nav.navbar .nav-actions .btn,
body nav.navbar #globalCartLink {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body nav.navbar #globalCartLink {
    width: 48px !important;
    padding: 0 !important;
    color: #fbbf24 !important;
}

body nav.navbar #globalCartLink #cartCount {
    top: -10px !important;
    right: -8px !important;
    background: #fbbf24 !important;
    color: #061126 !important;
}

.hero {
    position: relative !important;
    min-height: 520px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 6% 45%, rgba(255, 255, 255, 0.08) 0 9px, transparent 10px),
        radial-gradient(circle at 94% 38%, rgba(255, 255, 255, 0.07) 0 9px, transparent 10px),
        linear-gradient(120deg, rgba(251, 191, 36, 0.08) 0 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, #061126 0%, #0f172a 58%, #07142c 100%) !important;
    background-size: auto, auto, 100% 100%, 96px 96px, 96px 96px, auto !important;
}

.hero::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -5% -42px -5% !important;
    height: 170px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='170' viewBox='0 0 1440 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 47C153 156 315 126 498 85C674 46 789 127 982 111C1184 94 1277 25 1440 1V170H0V47Z' fill='%23FBBF24'/%3E%3Cpath d='M0 64C151 157 320 138 503 101C684 65 794 135 986 124C1174 113 1296 43 1440 26V170H0V64Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}

.hero::after {
    display: none !important;
}

.hero .container {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1240px !important;
    padding: 18px 18px 92px !important;
}

.hero .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px) !important;
    align-items: center !important;
    gap: 72px !important;
    min-height: 430px !important;
    margin: 0 !important;
}

.hero .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hero-text {
    max-width: 565px !important;
    padding: 0 !important;
    text-align: left !important;
}

.hero-text::before {
    content: "HOT DEALS  •  PET SUPPLIES  •  BRANCH STOCK" !important;
    display: inline-flex !important;
    width: auto !important;
    margin: 0 0 16px !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(251, 191, 36, 0.55) !important;
    background: rgba(251, 191, 36, 0.08) !important;
    color: #fbbf24 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
}

.hero h1 {
    max-width: 560px !important;
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: clamp(2.55rem, 4.05vw, 3.95rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
}

.hero h1 span {
    color: #fbbf24 !important;
}

.hero p {
    max-width: 510px !important;
    margin: 0 0 18px !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
}

.hero .hero-btns {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

.hero .btn-shop,
.hero .btn-learn {
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: 11px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
}

.hero .btn-shop {
    background: #fbbf24 !important;
    border-color: #fbbf24 !important;
    color: #061126 !important;
}

.hero .btn-learn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #061126 !important;
}

.hero-ad-panel {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 0 0 auto !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    width: 100% !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hero-ad-panel .hero-carousel-viewport {
    width: 100% !important;
    height: 285px !important;
    min-height: 285px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.34) !important;
}

.hero-ad-panel .carousel-wrapper {
    display: flex !important;
    width: 100% !important;
    height: 285px !important;
    min-height: 285px !important;
}

.hero-ad-panel .carousel-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    height: 285px !important;
    min-height: 285px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.hero-ad-panel .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    min-height: 285px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    display: block !important;
}

.hero-ad-panel .hero-carousel-controls {
    position: static !important;
    width: 100% !important;
    height: 42px !important;
    margin: 14px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

.hero-ad-panel .carousel-btn {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #061126 !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
}

.hero-ad-panel .carousel-btn:hover {
    background: #fbbf24 !important;
    color: #061126 !important;
}

.hero-ad-panel .carousel-indicators {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
}

.hero-ad-panel .carousel-indicator {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.58) !important;
    border: 0 !important;
}

.hero-ad-panel .carousel-indicator.active {
    background: #fbbf24 !important;
}

.products {
    background: #ffffff !important;
    padding-top: 34px !important;
}

@media (max-width: 991px) {
    .hero {
        min-height: 0 !important;
    }

    .hero .container {
        padding-top: 26px !important;
        padding-bottom: 86px !important;
    }

    .hero .row {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        min-height: 0 !important;
    }

    .hero-text {
        max-width: 680px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .hero p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero .hero-btns {
        justify-content: center !important;
    }

    .hero-ad-panel {
        max-width: 620px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 576px) {
    body nav.navbar .container {
        padding: 0 14px !important;
    }

    .hero .container {
        padding-top: 22px !important;
        padding-bottom: 72px !important;
    }

    .hero-text::before {
        font-size: 0.58rem !important;
        padding: 8px 11px !important;
    }

    .hero h1 {
        font-size: clamp(2rem, 12vw, 2.85rem) !important;
    }

    .hero .hero-btns {
        flex-wrap: wrap !important;
    }

    .hero-ad-panel .hero-carousel-viewport,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 220px !important;
        min-height: 220px !important;
    }
}

/* Full-width reference hero correction */
body nav.navbar .container {
    max-width: 1500px !important;
}

.hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.hero .container {
    max-width: 1500px !important;
}

.hero .row {
    grid-template-columns: minmax(0, 600px) minmax(460px, 640px) !important;
    justify-content: space-between !important;
    gap: 86px !important;
}

.hero::before {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    inset-inline: 0 !important;
    transform: none !important;
}

.hero-ad-panel {
    max-width: 640px !important;
}

.hero-ad-panel .hero-carousel-viewport,
.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide,
.hero-ad-panel .carousel-slide img {
    height: 320px !important;
    min-height: 320px !important;
}

.hero-ad-panel .carousel-slide img {
    object-fit: contain !important;
    background: #ffffff !important;
}

@media (max-width: 991px) {
    .hero {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero .row {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

@media (max-width: 576px) {
    .hero-ad-panel .hero-carousel-viewport,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 220px !important;
        min-height: 220px !important;
    }
}

/* Keep the bottom wave full-bleed, not limited to the content container */
.hero {
    background-image:
        url("data:image/svg+xml,%3Csvg width='1440' height='170' viewBox='0 0 1440 170' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 47C153 156 315 126 498 85C674 46 789 127 982 111C1184 94 1277 25 1440 1V170H0V47Z' fill='%23FBBF24'/%3E%3Cpath d='M0 64C151 157 320 138 503 101C684 65 794 135 986 124C1174 113 1296 43 1440 26V170H0V64Z' fill='%23FFFFFF'/%3E%3C/svg%3E"),
        radial-gradient(circle at 6% 45%, rgba(255, 255, 255, 0.08) 0 9px, transparent 10px),
        radial-gradient(circle at 94% 38%, rgba(255, 255, 255, 0.07) 0 9px, transparent 10px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, #061126 0%, #0f172a 58%, #07142c 100%) !important;
    background-position:
        bottom center,
        center,
        center,
        top left,
        top left,
        center !important;
    background-size:
        100% 150px,
        auto,
        auto,
        96px 96px,
        96px 96px,
        cover !important;
    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat,
        no-repeat !important;
}

.hero::before,
.hero::after {
    display: none !important;
    content: none !important;
}

/* Exact reference structure: real full-width wave layer */
.hero {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 488px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 9% 43%, rgba(255, 255, 255, 0.1) 0 10px, transparent 11px),
        radial-gradient(circle at 91% 40%, rgba(255, 255, 255, 0.09) 0 10px, transparent 11px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(135deg, #061126 0%, #0f172a 58%, #07142c 100%) !important;
    background-size:
        auto,
        auto,
        108px 108px,
        108px 108px,
        cover !important;
    background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat !important;
    background-position: center, center, top left, top left, center !important;
}

.hero .container {
    position: relative !important;
    z-index: 3 !important;
    max-width: 1080px !important;
    padding: 20px 18px 70px !important;
}

.hero .row {
    display: grid !important;
    grid-template-columns: minmax(0, 430px) minmax(360px, 400px) !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 385px !important;
    gap: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.hero .row::before,
.hero .row::after {
    display: none !important;
    content: none !important;
}

.hero .row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-wave {
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    right: auto !important;
    bottom: -1px !important;
    width: 100vw !important;
    height: 136px !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='136' viewBox='0 0 1440 136' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 39C143 151 302 124 500 82C681 44 789 116 981 104C1177 92 1278 30 1440 0V136H0V39Z' fill='%23FBBF24'/%3E%3Cpath d='M0 61C145 155 304 134 501 99C686 66 793 127 986 119C1171 111 1299 47 1440 27V136H0V61Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
    background-size: 100% 100% !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
}

.hero-text {
    max-width: 430px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.hero-text::before {
    content: "HOT DEALS  •  PET SUPPLIES  •  BRANCH STOCK" !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 0 14px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(251, 191, 36, 0.62) !important;
    border-radius: 999px !important;
    background: rgba(251, 191, 36, 0.08) !important;
    color: #fbbf24 !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

.hero h1 {
    max-width: 430px !important;
    margin: 0 0 12px !important;
    color: #ffffff !important;
    font-size: clamp(2.3rem, 4.1vw, 3.55rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.hero h1 span {
    color: #fbbf24 !important;
}

.hero p {
    max-width: 420px !important;
    margin: 0 0 16px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.76rem !important;
    line-height: 1.55 !important;
}

.hero .hero-btns {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

.hero .btn-shop,
.hero .btn-learn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
}

.hero .btn-shop {
    background: #fbbf24 !important;
    border-color: #fbbf24 !important;
    color: #061126 !important;
}

.hero .btn-learn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #061126 !important;
}

.hero-ad-panel {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 !important;
}

.hero-ad-panel .carousel-container,
.hero-ad-panel .hero-ad-carousel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hero-ad-panel .hero-carousel-viewport {
    width: 100% !important;
    height: 276px !important;
    min-height: 276px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #e52525 !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32) !important;
}

.hero-ad-panel .carousel-wrapper,
.hero-ad-panel .carousel-slide,
.hero-ad-panel .carousel-slide img {
    height: 276px !important;
    min-height: 276px !important;
}

.hero-ad-panel .carousel-wrapper {
    display: flex !important;
    width: 100% !important;
}

.hero-ad-panel .carousel-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.hero-ad-panel .carousel-slide img {
    width: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
}

.hero-ad-panel .hero-carousel-controls {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    margin: 14px 0 0 !important;
    gap: 16px !important;
}

.hero-ad-panel .carousel-btn {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    background: #ffffff !important;
    color: #061126 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
}

.hero-ad-panel .carousel-btn:hover {
    background: #fbbf24 !important;
    color: #061126 !important;
}

.hero-ad-panel .carousel-indicators {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: auto !important;
    margin: 0 !important;
}

.hero-ad-panel .carousel-indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.55) !important;
}

.hero-ad-panel .carousel-indicator.active {
    background: #fbbf24 !important;
}

.products {
    padding-top: 36px !important;
    margin-top: 0 !important;
    background: #ffffff !important;
}

@media (min-width: 1280px) {
    .hero .container {
        max-width: 1320px !important;
    }

    .hero .row {
        grid-template-columns: minmax(0, 520px) minmax(430px, 500px) !important;
    }

    .hero-text,
    .hero h1 {
        max-width: 520px !important;
    }

    .hero p {
        max-width: 500px !important;
    }

    .hero-ad-panel {
        max-width: 500px !important;
    }
}

@media (max-width: 991px) {
    .hero .container {
        padding: 24px 18px 96px !important;
    }

    .hero .row {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        min-height: 0 !important;
    }

    .hero-text {
        max-width: 680px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .hero p,
    .hero h1 {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero .hero-btns {
        justify-content: center !important;
    }

    .hero-ad-panel {
        max-width: 560px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 576px) {
    .hero {
        min-height: 0 !important;
    }

    .hero .container {
        padding: 22px 16px 82px !important;
    }

    .hero h1 {
        font-size: clamp(2rem, 11vw, 2.8rem) !important;
    }

    .hero-ad-panel .hero-carousel-viewport,
    .hero-ad-panel .carousel-wrapper,
    .hero-ad-panel .carousel-slide,
    .hero-ad-panel .carousel-slide img {
        height: 220px !important;
        min-height: 220px !important;
    }

    .hero-wave {
        height: 92px !important;
    }
}

/* Final full-width home hero correction */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body .hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

body .hero-wave {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
    background-size: 100vw 136px !important;
}

body .hero-ad-panel .hero-carousel-viewport {
    overflow: hidden !important;
    position: relative !important;
    contain: paint !important;
}

body .hero-ad-panel #heroCarousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
}

body .hero-ad-panel #heroCarousel .carousel-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Straight-line hero reset */
body .hero {
    min-height: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body .hero .container {
    max-width: 1320px !important;
    padding: 34px 18px 54px !important;
}

body .hero .row {
    min-height: 0 !important;
    align-items: center !important;
}

body .hero-wave {
    display: none !important;
    content: none !important;
    background: none !important;
}

body .hero-ad-panel .hero-carousel-viewport,
body .hero-ad-panel .carousel-wrapper,
body .hero-ad-panel .carousel-slide,
body .hero-ad-panel .carousel-slide img {
    height: 290px !important;
    min-height: 290px !important;
}

body .hero-ad-panel .carousel-slide {
    background: #061126 !important;
}

body .hero-ad-panel .carousel-slide img {
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
}

body .products {
    margin-top: 0 !important;
    padding-top: 52px !important;
}

/* Restore clean pre-wave hero details */
body .hero .hero-text::before {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    white-space: nowrap !important;
    align-self: flex-start !important;
    padding: 8px 14px !important;
}

body .hero-ad-panel {
    max-width: 520px !important;
}

body .hero-ad-panel .hero-carousel-viewport,
body .hero-ad-panel .carousel-wrapper,
body .hero-ad-panel .carousel-slide,
body .hero-ad-panel .carousel-slide img {
    height: 255px !important;
    min-height: 255px !important;
}

body .hero-ad-panel .hero-carousel-viewport,
body .hero-ad-panel .carousel-slide,
body .hero-ad-panel .carousel-slide img {
    border-radius: 16px !important;
}

body .hero-ad-panel .carousel-slide {
    background: #fff !important;
}

body nav.navbar .nav-actions {
    gap: 10px !important;
}

body nav.navbar #globalCartLink {
    width: 52px !important;
    min-width: 52px !important;
    height: 42px !important;
    min-height: 42px !important;
    position: relative !important;
    border-radius: 10px !important;
    padding: 0 !important;
}

body nav.navbar .nav-actions .btn {
    height: 42px !important;
    min-height: 42px !important;
    width: auto !important;
    min-width: 92px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
}

body nav.navbar #globalCartLink #cartCount {
    top: -9px !important;
    right: -6px !important;
    width: 24px !important;
    height: 24px !important;
    font-size: .78rem !important;
    line-height: 24px !important;
}

/* Stop stretched-looking ad/nav controls */
body .hero-ad-panel {
    max-width: 560px !important;
}

body .hero-ad-panel .hero-carousel-viewport,
body .hero-ad-panel .carousel-wrapper,
body .hero-ad-panel .carousel-slide,
body .hero-ad-panel .carousel-slide img {
    height: 250px !important;
    min-height: 250px !important;
}

body .hero-ad-panel .hero-carousel-viewport,
body .hero-ad-panel .carousel-slide {
    background: #fff !important;
}

body .hero-ad-panel .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #e52525 !important;
}

/* Match the clean straight hero reference */
body .hero {
    min-height: 580px !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(251,191,36,.14) 0, rgba(251,191,36,.08) 18%, transparent 38%),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(135deg, #061126 0%, #0f172a 62%, #111827 100%) !important;
    background-size: auto, 96px 96px, 96px 96px, cover !important;
    background-repeat: no-repeat, repeat, repeat, no-repeat !important;
    border-bottom: 0 !important;
}

body .hero .container {
    max-width: 1340px !important;
    padding: 44px 24px 76px !important;
}

body .hero .row {
    display: grid !important;
    grid-template-columns: minmax(0, 540px) minmax(480px, 600px) !important;
    gap: 110px !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 460px !important;
}

body .hero .hero-text {
    max-width: 540px !important;
}

body .hero .hero-text::before {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    white-space: nowrap !important;
    margin-bottom: 20px !important;
    padding: 9px 16px !important;
}

body .hero h1 {
    max-width: 540px !important;
    font-size: clamp(3.15rem, 4.4vw, 4.7rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 18px !important;
}

body .hero p {
    max-width: 540px !important;
    font-size: .95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
}

body .hero .btn-shop,
body .hero .btn-learn {
    min-height: 48px !important;
    padding: 12px 28px !important;
    font-size: .95rem !important;
}

body .hero-ad-panel {
    max-width: 600px !important;
}

body .hero-ad-panel .hero-carousel-viewport,
body .hero-ad-panel .carousel-wrapper,
body .hero-ad-panel .carousel-slide,
body .hero-ad-panel .carousel-slide img {
    height: 360px !important;
    min-height: 360px !important;
}

body .hero-ad-panel .hero-carousel-viewport,
body .hero-ad-panel .carousel-slide,
body .hero-ad-panel .carousel-slide img {
    border-radius: 24px !important;
}

body .hero-ad-panel .carousel-slide {
    background: #e52525 !important;
}

body .hero-ad-panel .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #e52525 !important;
}

body .hero-ad-panel .hero-carousel-controls {
    margin-top: 24px !important;
    gap: 18px !important;
}

body .hero-wave {
    display: none !important;
}

body .products {
    background: #ffffff !important;
    padding-top: 68px !important;
}

body .products::before,
body .products::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

body .products .section-header h2 {
    color: #061126 !important;
}

body .products .section-header p {
    color: #64748b !important;
}

/* Landing/auth popup modal navy theme */
.modal-content h2 {
    margin: -30px -30px 22px !important;
    padding: 24px 54px 18px 30px !important;
    background: linear-gradient(135deg, #061126 0%, #111c31 100%) !important;
    color: #ffd700 !important;
    border-bottom: 3px solid #ffd700 !important;
    border-radius: 12px 12px 0 0;
}

.modal-content .close,
.modal-content .close-modal {
    color: #ffffff !important;
}

.modal-content .close:hover,
.modal-content .close-modal:hover {
    color: #ffd700 !important;
}

.legal-summary-header,
.otp-modal-header {
    background: linear-gradient(135deg, #061126 0%, #111c31 100%) !important;
    color: #ffffff !important;
    border-bottom: 3px solid #ffd700 !important;
}

.legal-summary-header h2,
.otp-modal-header h2 {
    margin: 0 34px 8px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #ffd700 !important;
}

.otp-modal-header {
    margin: -34px -30px 22px;
    padding: 28px 30px 22px;
    border-radius: 12px 12px 0 0;
}

.otp-modal-header h2 {
    margin: 0 0 8px !important;
}

.otp-modal-header p,
.legal-summary-header p {
    color: rgba(255, 255, 255, 0.82) !important;
}

#quickViewModal .quick-view-modal-header h2,
.modal-content .modal-header h2 {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #ffd700 !important;
}