/* ==========================================
   VASU ADIVASI HAIR OIL - Main Styles
   ========================================== */

:root {
    --primary-color: #244B2F;
    --primary-dark-color: #132A1B;
    --primary-deep-color: #0B1E12;
    --secondary-color: #D4A017;
    --secondary-dark-color: #B8870F;
    --dark-color: #17261A;
    --light-color: #F6F1E7;
    --page-background: #F7F3E9;
    --primary-rgb: 36, 75, 47;
    --secondary-rgb: 212, 160, 23;
    --danger: #E53935;
    --success: #43A047;
    --info: #1E88E5;
    --accent: #8B5E34;
}

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

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
    background: var(--page-background);
}

/* ==========================================
   HERO SECTION & SLIDER
   ========================================== */

.hero-section {
    position: relative;
    height: 500px;
    overflow: hidden;
    background: linear-gradient(135deg, #edf1e7 0%, #d8e2cf 100%);
}

.hero-carousel {
    height: 100%;
}

.hero-slide {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.28;
}

.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--dark-color);
    background: rgba(255, 255, 255, 0.9);
    padding: 60px 40px;
    border-radius: 15px;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 14px 36px rgba(var(--primary-rgb), 0.18);
    max-width: 600px;
    margin: 0 auto;
}

.hero-text h1 {
    font-weight: 700;
    text-shadow: none;
    margin-bottom: 20px;
    font-size: 3rem;
    color: var(--accent);
}

.hero-text p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    text-shadow: none;
    color: var(--dark-color);
}

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

.navbar {
    padding: 15px 0 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%) !important;
}

.navbar-brand {
    font-size: 1.5rem;
    color: var(--secondary-color) !important;
    font-weight: 700;
    transition: 0.3s ease;
}

.navbar-brand:hover {
    transform: scale(1.05);
    color: #fff !important;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 10px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: var(--secondary-color) !important;
    transform: translateY(-2px);
}

.navbar .btn-warning {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--dark-color) !important;
    font-weight: 600;
    padding: 8px 15px;
}

.navbar .btn-warning:hover {
    background-color: var(--secondary-dark-color) !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

/* ==========================================
   PAGE HEADER
   ========================================== */

.page-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%) !important;
    color: white;
    padding: 60px 0 !important;
    margin-bottom: 30px;
}

.page-header .container {
    text-align: center;
}

.page-header h1 {
    color: var(--secondary-color);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 12px !important;
}

.page-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* ==========================================
   CATEGORY CARDS
   ========================================== */

.category-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(27, 94, 32, 0.2);
    border-color: var(--secondary-color);
}

.category-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
}

.category-card h5 {
    color: var(--primary-color);
    font-weight: 700;
    padding-top: 15px;
}

.category-card .btn {
    background: var(--secondary-color);
    color: var(--dark-color);
    border: none;
    font-weight: 600;
}

/* ==========================================
   PRODUCT CARDS
   ========================================== */

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 28px rgba(27, 94, 32, 0.2);
    border-color: var(--secondary-color);
}

.product-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

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

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

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--primary-rgb), 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

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

.product-overlay .btn {
    background: var(--secondary-color);
    color: var(--dark-color);
    font-weight: 600;
    padding: 12px 30px;
    border: none;
}

.product-info {
    background: white;
    padding: 20px;
}

.product-info h6 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 10px;
}

.product-category {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 8px;
    background: rgba(var(--secondary-rgb), 0.12);
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
}

.product-rating {
    color: var(--secondary-color);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.product-rating i {
    margin-right: 2px;
}

.price {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* ==========================================
   FEATURES SECTION
   ========================================== */

.features {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    padding: 80px 0 !important;
}

.features i {
    color: var(--secondary-color);
    margin-bottom: 15px;
    transition: 0.3s ease;
}

.features h5 {
    margin: 15px 0;
    font-weight: 700;
    color: white;
}

.features p {
    color: rgba(255, 255, 255, 0.9);
}

.features .col-md-3:hover i {
    transform: scale(1.2) rotateY(10deg);
    color: #fff;
}

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

footer {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 50%, var(--primary-deep-color) 100%) !important;
    margin-top: 60px !important;
}

footer h5 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

footer a {
    transition: all 0.3s ease;
}

footer a:hover {
    color: var(--secondary-color) !important;
    transform: translateX(5px);
}

.social-links a {
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    transition: all 0.3s ease;
    color: var(--secondary-color);
}

.social-links a:hover {
    background: var(--secondary-color);
    color: var(--primary-color) !important;
    transform: translateY(-5px);
}

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

.btn-warning {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--dark-color) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background-color: var(--secondary-dark-color) !important;
    border-color: var(--secondary-dark-color) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(255, 159, 0, 0.4);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    border: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(var(--primary-rgb), 0.4);
}

/* ==========================================
   FORMS
   ========================================== */

.form-control, .form-select {
    border-radius: 8px;
    border: 2px solid #ddd;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.3rem rgba(var(--secondary-rgb), 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

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

.cart-item {
    background: white;
    border-left: 4px solid var(--secondary-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(44, 95, 45, 0.1);
}

.cart-item:hover {
    box-shadow: 0 6px 16px rgba(44, 95, 45, 0.15);
    transform: translateY(-3px);
}

.cart-item-image {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--secondary-color);
}

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

.cart-item-details {
    flex: 1;
}

.cart-item-details h6 {
    color: var(--primary-color);
    margin-bottom: 5px;
    font-weight: 700;
}

.cart-price {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 1.2rem;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.quantity-control button {
    width: 35px;
    height: 35px;
    border: 2px solid var(--secondary-color);
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 700;
    color: var(--primary-color);
}

.quantity-control button:hover {
    background: var(--secondary-color);
    color: var(--dark-color);
}

/* ==========================================
   ALERTS & MESSAGES
   ========================================== */

.alert {
    border-radius: 10px;
    border-left: 5px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alert-success {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.alert-danger {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.alert-warning {
    border-left-color: var(--secondary-color);
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

.alert-info {
    border-left-color: #17a2b8;
    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
    color: #0c5460;
}

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

.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.15);
}

.card-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark-color) 100%) !important;
    color: var(--dark-color) !important;
    font-weight: 700;
    border-radius: 12px 12px 0 0 !important;
    padding: 15px 20px !important;
}

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

@media (max-width: 768px) {
    .hero-section {
        height: 350px;
    }

    .hero-slide {
        height: 350px;
    }

    .hero-text {
        padding: 30px 20px;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }

    .page-header {
        padding: 40px 0 !important;
    }

    .page-header h1 {
        font-size: 1.8rem;
    }

    .features {
        padding: 40px 0 !important;
    }

    .features .col-md-3 {
        margin-bottom: 20px;
    }

    .category-card, .product-card {
        margin-bottom: 20px;
    }

    .cart-item {
        flex-direction: column;
        text-align: center;
    }

    .cart-item-image {
        width: 150px;
        height: 150px;
    }

    footer h5 {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        height: 280px;
    }

    .hero-slide {
        height: 280px;
    }

    .hero-text h1 {
        font-size: 1.4rem;
    }

    .hero-text p {
        font-size: 0.9rem;
    }

    .hero-text .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .navbar {
        padding: 10px 0 !important;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .navbar-nav .nav-link {
        margin: 5px 0;
        font-size: 0.9rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .product-image {
        height: 200px;
    }

    .page-header h1 {
        font-size: 1.5rem;
    }
}

/* ==========================================
   ANIMATION
   ========================================== */

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

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

.product-card, .category-card {
    animation: slideIn 0.5s ease-out;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

/* ==========================================
   CUSTOMER ACCOUNT & ORDERS PORTAL
   ========================================== */

.customer-portal-page {
    color: #23372a;
    background: #f7f4eb;
}

.customer-portal-hero {
    padding: 46px 16px 48px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 15%, rgba(var(--secondary-rgb), .15), transparent 27%),
        linear-gradient(115deg, var(--primary-color), #112c1b 72%);
    text-align: center;
}

.customer-portal-hero span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f5c33b;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
}

.customer-portal-hero h1 {
    margin: 9px 0 6px;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
}

.customer-portal-hero p {
    max-width: 590px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .76);
    font-size: .9rem;
}

.customer-portal-main {
    min-height: 55vh;
    padding: 42px 0 62px;
}

.customer-portal-main > .container { max-width: 1400px; }

.portal-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px;
}

.portal-topline > a,
.portal-text-link {
    color: var(--primary-color);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.portal-topline > a i { margin-right: 5px; color: var(--secondary-color); }

.portal-order-filters {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 7px;
}

.portal-order-filters a {
    padding: 7px 12px;
    color: #68746b;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.portal-order-filters a.active,
.portal-order-filters a:hover {
    color: #fff;
    background: var(--primary-color);
}

.portal-stats,
.account-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 20px;
}

.portal-stats > div,
.account-stat-grid > div {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), .1);
    border-radius: 7px;
    box-shadow: 0 7px 22px rgba(20, 53, 31, .045);
}

.portal-stats > div > i,
.account-stat-grid > div > i {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--primary-color);
    background: #f4ecd3;
    border-radius: 5px;
}

.portal-stats span,
.account-stat-grid span { min-width: 0; }
.portal-stats strong,
.account-stat-grid strong { display: block; color: var(--primary-color); font-size: 1.12rem; line-height: 1.15; }
.portal-stats small,
.account-stat-grid small { display: block; margin-top: 3px; color: #7a847c; font-size: .73rem; }

.portal-orders-list { display: grid; gap: 14px; }

.portal-order-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), .12);
    border-radius: 8px;
    box-shadow: 0 9px 28px rgba(19, 55, 31, .055);
}

.portal-order-head {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .6fr) auto;
    align-items: center;
    gap: 18px;
    padding: 13px 17px;
    background: #f2f5ef;
    border-bottom: 1px solid #e2e8df;
}

.portal-order-head small,
.portal-order-total small {
    display: block;
    margin-bottom: 2px;
    color: #89928b;
    font-size: .65rem;
    letter-spacing: .08em;
}

.portal-order-head strong { color: var(--primary-color); font-size: .86rem; }

.portal-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: max-content;
    padding: 6px 9px;
    color: #755707;
    background: #fff1bd;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.portal-status.status-delivered { color: #24603a; background: #e3f3e8; }
.portal-status.status-cancelled { color: #a23c36; background: #fbe8e5; }
.portal-status.status-shipped { color: #245a78; background: #e4f1f8; }
.portal-status.status-processing { color: #654b8a; background: #eee8f8; }

.portal-order-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 17px;
}

.portal-order-product {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.portal-order-image {
    width: 72px;
    height: 82px;
    padding: 3px;
    overflow: hidden;
    background: #f3f1e4;
    border: 1px solid #e3e6da;
    border-radius: 6px;
}

.portal-order-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.portal-order-product h2 { max-width: 650px; margin: 0 0 5px; overflow: hidden; color: var(--primary-color); font-size: 1rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.portal-order-product p { margin: 0 0 4px; color: #6f7b72; font-size: .76rem; }
.portal-order-product p i { color: var(--secondary-color); }
.portal-order-product > div > span { color: #919890; font-size: .68rem; text-transform: capitalize; }
.portal-order-total { min-width: 125px; text-align: right; }
.portal-order-total strong { display: block; color: var(--primary-color); font-size: 1.15rem; }
.portal-order-total span { display: block; margin-top: 5px; color: #707d74; font-size: .67rem; }
.portal-order-total span i { color: var(--secondary-color); }

.portal-order-progress {
    display: flex;
    align-items: flex-start;
    padding: 13px 20px;
    background: #fbfcf9;
    border-top: 1px solid #edf0eb;
    border-bottom: 1px solid #edf0eb;
}

.portal-order-progress span { display: grid; flex: 0 0 65px; justify-items: center; gap: 4px; color: #9aa29b; text-align: center; }
.portal-order-progress span i { display: grid; width: 28px; height: 28px; place-items: center; background: #eaeee8; border-radius: 50%; font-size: .65rem; }
.portal-order-progress span small { font-size: .64rem; }
.portal-order-progress span.done { color: var(--primary-color); }
.portal-order-progress span.done i { color: #fff; background: #3e7d4e; }
.portal-order-progress b { flex: 1 1 auto; height: 2px; margin-top: 12px; background: #e1e6df; }
.portal-order-progress b.done { background: #70a079; }

.portal-cancelled-note { padding: 11px 17px; color: #a4413a; background: #fff2f0; border-block: 1px solid #f5d8d4; font-size: .74rem; }
.portal-order-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 17px; }
.portal-order-actions > span { color: #879087; font-size: .7rem; }
.portal-order-actions > span i { color: #3e7d4e; }
.portal-order-actions > div { display: flex; gap: 7px; }

.portal-primary-btn,
.portal-secondary-btn {
    padding: 8px 13px;
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 600;
}

.portal-primary-btn { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }
.portal-primary-btn:hover { color: #172b1b; background: #e5b126; border-color: #e5b126; }
.portal-secondary-btn { color: var(--primary-color); background: #fff; border-color: #cad5cc; }
.portal-secondary-btn:hover { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }

.portal-empty-state {
    padding: 65px 20px;
    background: #fff;
    border: 1px dashed rgba(var(--primary-rgb), .25);
    border-radius: 8px;
    text-align: center;
}

.portal-empty-state > span { display: grid; width: 62px; height: 62px; margin: 0 auto 14px; place-items: center; color: var(--primary-color); background: #f5edcf; border-radius: 50%; font-size: 1.35rem; }
.portal-empty-state h2 { margin-bottom: 7px; color: var(--primary-color); font-size: 1.2rem; }
.portal-empty-state p { max-width: 500px; margin: 0 auto 16px; color: #7a847c; font-size: .75rem; }
.portal-empty-state.compact { padding: 44px 20px; }

.portal-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid #dfe6de;
    border-left: 3px solid #3e7d4e;
    border-radius: 5px;
    font-size: .7rem;
}

.portal-alert.success { color: #25623a; }
.portal-alert.error { color: #9e3b36; border-left-color: #b84640; }

.account-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); align-items: start; gap: 24px; }
.account-sidebar,
.account-content { background: #fff; border: 1px solid rgba(var(--primary-rgb), .11); border-radius: 8px; box-shadow: 0 9px 28px rgba(19, 55, 31, .05); }
.account-sidebar { position: sticky; top: 98px; overflow: hidden; }
.account-identity { display: flex; align-items: center; gap: 13px; padding: 22px 18px; color: #fff; background: linear-gradient(120deg, var(--primary-color), #173722); }
.account-avatar { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; color: #18321f; background: #f1bd31; border: 2px solid rgba(255,255,255,.18); border-radius: 50%; font-size: 1rem; font-weight: 700; }
.account-identity > div:last-child { min-width: 0; }
.account-identity strong,
.account-identity small,
.account-identity span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity strong { font-size: .95rem; }
.account-identity small { margin: 3px 0 6px; color: rgba(255,255,255,.72); font-size: .7rem; }
.account-identity span { color: #b9d9c0; font-size: .68rem; }
.account-identity span i { margin-right: 3px; color: #f1bd31; }
.account-menu { padding: 9px 13px; }
.account-menu a { display: grid; grid-template-columns: 22px minmax(0,1fr) 12px; align-items: center; gap: 9px; padding: 14px 9px; color: #5f6e63; border-bottom: 1px solid #edf0eb; font-size: .81rem; font-weight: 600; text-decoration: none; }
.account-menu a:last-child { border-bottom: 0; }
.account-menu a > i:first-child { color: #c9950c; text-align: center; }
.account-menu a > i:last-child { color: #aeb6af; font-size: .48rem; }
.account-menu a.active,
.account-menu a:hover { color: var(--primary-color); background: #f3f6f1; }
.account-sidebar-actions { display: grid; gap: 1px; padding: 10px 14px; background: #f7f8f5; border-top: 1px solid #e8ece6; }
.account-sidebar-actions a { padding: 8px 3px; color: #647068; font-size: .76rem; text-decoration: none; }
.account-sidebar-actions a i { width: 18px; color: var(--secondary-color); }
.account-content { min-height: 570px; padding: 30px; }

.account-panel-head,
.account-section-title,
.account-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.account-panel-head { margin-bottom: 19px; padding-bottom: 17px; border-bottom: 1px solid #e7ebe5; }
.account-panel-head > div > span { color: #b58405; font-size: .67rem; font-weight: 600; letter-spacing: .12em; }
.account-panel-head h2 { margin: 4px 0 5px; color: var(--primary-color); font-size: 1.62rem; }
.account-panel-head p { margin: 0; color: #7d877f; font-size: .83rem; }
.account-head-icon { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; color: var(--primary-color); background: #f4ecd3; border-radius: 6px; font-size: 1.05rem; }
.portal-text-link i { margin-left: 4px; color: var(--secondary-color); }
.account-stat-grid { margin-bottom: 23px; }
.account-stat-grid > div { padding: 16px; }
.account-stat-grid > div > i { flex-basis: 40px; width: 40px; height: 40px; }
.account-stat-grid strong { font-size: 1.08rem; }
.account-section-title { margin-bottom: 10px; }
.account-section-title > div { display: flex; align-items: center; gap: 9px; }
.account-section-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--primary-color); background: #f4ecd3; border-radius: 5px; }
.account-section-title h3 { margin: 0; color: var(--primary-color); font-size: 1rem; }
.account-section-title p { margin: 2px 0 0; color: #858e87; font-size: .7rem; }
.account-section-title > a { color: #9a7108; font-size: .74rem; font-weight: 600; text-decoration: none; }

.account-recent-orders { border: 1px solid #e4e9e2; border-radius: 6px; }
.account-recent-orders article { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 17px; border-bottom: 1px solid #e9ede7; }
.account-recent-orders article:last-child { border-bottom: 0; }
.account-recent-orders article > div { min-width: 0; }
.account-recent-orders article > div:first-child small,
.account-recent-orders article > div:first-child strong,
.account-recent-orders article > div:first-child span { display: block; }
.account-recent-orders article > div:first-child small { color: #909991; font-size: .66rem; }
.account-recent-orders article > div:first-child strong { margin: 3px 0; color: var(--primary-color); font-size: .84rem; }
.account-recent-orders article > div:first-child span { color: #7a857d; font-size: .7rem; }
.account-recent-orders article > div:last-child { display: flex; align-items: center; gap: 11px; }
.account-recent-orders article > div:last-child > strong { min-width: 82px; color: var(--primary-color); font-size: .86rem; text-align: right; }
.account-recent-orders article > div:last-child > a { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: var(--primary-color); border-radius: 4px; font-size: .66rem; text-decoration: none; }
.account-mini-empty { display: flex; align-items: center; gap: 11px; padding: 17px; background: #f8faf6; border: 1px dashed #ccd8cd; border-radius: 6px; }
.account-mini-empty > i { color: #c9950c; font-size: 1.3rem; }
.account-mini-empty div { flex: 1; }
.account-mini-empty strong,
.account-mini-empty small { display: block; }
.account-mini-empty strong { color: var(--primary-color); font-size: .84rem; }
.account-mini-empty small { color: #828c84; font-size: .7rem; }
.account-mini-empty a { color: var(--primary-color); font-size: .74rem; font-weight: 600; }
.account-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 17px; }
.account-shortcuts a { display: grid; grid-template-columns: 40px minmax(0,1fr) 15px; align-items: center; gap: 11px; padding: 15px; color: var(--primary-color); background: #f8faf6; border: 1px solid #e2e8df; border-radius: 6px; text-decoration: none; }
.account-shortcuts a > i:first-child { display: grid; width: 40px; height: 40px; place-items: center; color: var(--primary-color); background: #f3e9c7; border-radius: 5px; }
.account-shortcuts strong,
.account-shortcuts small { display: block; }
.account-shortcuts strong { font-size: .81rem; }
.account-shortcuts small { margin-top: 2px; color: #818b83; font-size: .66rem; }
.account-shortcuts a > i:last-child { color: #c9950c; font-size: .57rem; }

.account-form { max-width: 850px; }
.account-form .form-label { color: var(--primary-color); font-size: .76rem; }
.account-input { position: relative; }
.account-input > i:first-child { position: absolute; z-index: 2; top: 50%; left: 13px; color: #a77d10; font-size: .67rem; transform: translateY(-50%); }
.account-input .form-control { min-height: 47px; padding-left: 39px; color: #304137; background: #fbfcfa; border-color: #dce3da; border-radius: 5px; font-size: .82rem; }
.account-input .form-control:focus { background: #fff; border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb),.1); }
.account-input.is-readonly .form-control { padding-right: 80px; background: #f2f4f0; }
.account-input.is-readonly > span { position: absolute; top: 50%; right: 11px; color: #36724a; font-size: .66rem; font-weight: 600; transform: translateY(-50%); }
.account-field-note { display: block; margin-top: 5px; color: #8b948d; font-size: .66rem; }
.account-form-footer { margin-top: 19px; padding-top: 15px; border-top: 1px solid #e8ece6; }
.account-form-footer > span { color: #818b83; font-size: .7rem; }
.account-form-footer > span i { color: #c9950c; }
.password-toggle { position: absolute; z-index: 3; top: 50%; right: 8px; display: grid; width: 30px; height: 30px; place-items: center; color: #77837a; background: transparent; border: 0; transform: translateY(-50%); }
.security-form { max-width: 760px; }
.account-security-tip { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding: 14px; color: #5d6b61; background: #f8f4e7; border-left: 3px solid var(--secondary-color); font-size: .74rem; }
.account-security-tip > i { color: #bd8907; }
.account-security-tip strong,
.account-security-tip small { display: block; }
.account-security-tip small { margin-top: 2px; color: #838b84; }

.account-address-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.account-address-grid article { padding: 15px; background: #fbfcfa; border: 1px solid #dfe6dc; border-radius: 6px; }
.account-address-grid header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid #e6ebe4; }
.account-address-grid header span { color: var(--primary-color); font-size: .76rem; font-weight: 600; }
.account-address-grid header span i { margin-right: 5px; color: #c9950c; }
.account-address-grid header b { padding: 4px 7px; color: #2f6b43; background: #e2f1e6; border-radius: 15px; font-size: .5rem; }
.account-address-grid h3 { margin-bottom: 6px; color: var(--primary-color); font-size: .9rem; }
.account-address-grid p { margin: 0; color: #69766d; font-size: .76rem; line-height: 1.65; }
.account-address-grid footer { display: grid; gap: 4px; margin-top: 12px; color: #79847c; font-size: .68rem; }
.account-address-grid footer i { width: 16px; color: #bd8907; }
.account-info-strip { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 13px; color: #66746a; background: #f4f6f1; border-radius: 5px; font-size: .74rem; }
.account-info-strip i { color: #bd8907; }

@media (max-width: 991.98px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .account-menu { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; padding: 7px; }
    .account-menu a { display: flex; justify-content: center; padding: 10px 5px; border: 0; border-radius: 4px; text-align: center; }
    .account-menu a > i:last-child { display: none; }
    .account-sidebar-actions { display: flex; justify-content: flex-end; gap: 14px; }
    .account-content { min-height: 0; }
}

@media (max-width: 767.98px) {
    .customer-portal-hero { padding: 32px 12px 34px; }
    .customer-portal-hero h1 { font-size: 1.8rem; }
    .customer-portal-hero p { font-size: .75rem; }
    .customer-portal-main { padding: 24px 0 38px; }
    .portal-topline { align-items: flex-start; flex-direction: column; }
    .portal-order-filters { width: 100%; overflow-x: auto; }
    .portal-order-filters a { flex: 1 0 auto; text-align: center; }
    .portal-stats,
    .account-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .portal-stats > div,
    .account-stat-grid > div { gap: 7px; padding: 10px 8px; }
    .portal-stats > div > i,
    .account-stat-grid > div > i { flex-basis: 30px; width: 30px; height: 30px; font-size: .7rem; }
    .portal-stats strong,
    .account-stat-grid strong { font-size: .92rem; }
    .portal-order-head { grid-template-columns: 1fr auto; gap: 8px; padding: 11px; }
    .portal-order-date { display: none; }
    .portal-order-body { grid-template-columns: 1fr; gap: 10px; padding: 11px; }
    .portal-order-product { grid-template-columns: 62px minmax(0,1fr); gap: 9px; }
    .portal-order-image { width: 62px; height: 73px; }
    .portal-order-product h2 { font-size: .83rem; }
    .portal-order-product p { font-size: .69rem; }
    .portal-order-product > div > span { font-size: .62rem; }
    .portal-order-total { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid #edf0eb; text-align: left; }
    .portal-order-total small { margin: 0; }
    .portal-order-total strong { font-size: .88rem; }
    .portal-order-total span { display: none; }
    .portal-order-progress { padding: 11px 8px; }
    .portal-order-progress span { flex-basis: 42px; }
    .portal-order-progress span small { font-size: .52rem; }
    .portal-order-progress span i { width: 22px; height: 22px; }
    .portal-order-progress b { margin-top: 10px; }
    .portal-order-actions { padding: 10px 11px; }
    .portal-order-actions > span { display: none; }
    .portal-order-actions > div { width: 100%; }
    .portal-order-actions .btn { flex: 1; white-space: nowrap; }
    .account-menu { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .account-menu a { justify-content: flex-start; padding: 11px 8px; font-size: .7rem; }
    .account-content { padding: 18px 14px; }
    .account-panel-head { align-items: flex-start; }
    .account-panel-head h2 { font-size: 1.25rem; }
    .account-panel-head p { font-size: .75rem; }
    .account-head-icon { width: 37px; height: 37px; flex-basis: 37px; }
    .account-shortcuts,
    .account-address-grid { grid-template-columns: 1fr; }
    .account-recent-orders article { align-items: flex-start; flex-direction: column; padding: 14px; }
    .account-recent-orders article > div:last-child { justify-content: space-between; width: 100%; }
    .account-recent-orders article > div:last-child > strong { margin-left: auto; }
    .account-form-footer { align-items: stretch; flex-direction: column; }
    .account-form-footer .btn { width: 100%; }
    .account-mini-empty { align-items: flex-start; flex-wrap: wrap; }
    .account-mini-empty a { width: 100%; }
}

.bg-light {
    background-color: var(--light-color) !important;
}

.text-warning {
    color: var(--secondary-color) !important;
}

.border-warning {
    border-color: var(--secondary-color) !important;
}

.btn-outline-warning {
    color: var(--primary-color);
    border-color: var(--secondary-color);
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    color: var(--dark-color);
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    color: var(--dark-color);
    background-color: rgba(var(--secondary-rgb), 0.16);
}

.table-dark {
    --bs-table-bg: var(--primary-color);
    --bs-table-border-color: rgba(255, 255, 255, 0.16);
}

main a:not(.btn) {
    color: #8a6508;
}

main a:not(.btn):hover {
    color: var(--primary-color);
}

.badge {
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.shadow-sm {
    box-shadow: 0 2px 8px rgba(44, 95, 45, 0.1) !important;
}

.shadow {
    box-shadow: 0 4px 12px rgba(44, 95, 45, 0.15) !important;
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================
   2026 RESPONSIVE THEME REFINEMENTS
   ========================================== */

body {
    overflow-x: hidden;
    color: var(--dark-color);
}

/* Header */
.site-navbar {
    min-height: 76px;
    padding: 10px 0 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%) !important;
}

.site-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 24px;
    font-size: clamp(1rem, 2vw, 1.45rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: #4e8b57;
    border-radius: 50% 50% 50% 12px;
    transform: rotate(-8deg);
}

.brand-mark i {
    transform: rotate(8deg);
}

.site-navbar .navbar-nav {
    gap: 4px;
}

.site-navbar .navbar-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 5px;
    padding: 10px 11px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.nav-menu-icon {
    width: 18px;
    color: #e8b93f;
    text-align: center;
    font-size: 0.86rem;
}

.site-navbar .dropdown-toggle::after {
    margin-left: 1px;
}

.site-navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.site-navbar .dropdown-item i {
    width: 16px;
    color: var(--secondary-color);
    text-align: center;
}

.site-navbar .dropdown-divider {
    margin: 8px -7px;
    border-top: 1px solid #d9ded8;
    opacity: 1;
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link.active {
    color: #e8b93f !important;
    background: rgba(255, 255, 255, 0.06);
    transform: none;
}

.site-navbar .cart-link,
.site-navbar .account-link {
    color: #fff !important;
    font-weight: 700;
}

.site-navbar .badge {
    min-width: 25px;
    margin-left: 3px;
    padding: 6px 8px;
}

.nav-login-btn {
    margin-left: 8px;
    padding: 10px 18px;
    color: var(--primary-dark-color);
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.nav-login-btn:hover {
    color: var(--primary-dark-color);
    background: #e8b93f;
    border-color: #e8b93f;
    transform: translateY(-1px);
}

.mobile-header-actions {
    gap: 8px;
    margin-left: auto;
}

.mobile-cart-link {
    position: relative;
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    font-size: 1.05rem;
    text-decoration: none;
}

.mobile-cart-link:hover {
    color: #e8b93f;
    border-color: rgba(232, 185, 63, 0.5);
}

.site-navbar .mobile-cart-link .badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    margin: 0;
    padding: 3px 5px;
    border: 2px solid #173b22;
    border-radius: 50%;
    font-size: 0.62rem;
}

.mobile-header-actions .navbar-toggler {
    width: 43px;
    height: 43px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    box-shadow: none;
}

/* Hero slider: same teal and gold visual language as the header */
.hero-section,
.hero-slide {
    height: 510px;
}

.hero-section {
    isolation: isolate;
    background: var(--primary-dark-color);
}

.hero-slide {
    padding: 40px 20px;
    background:
        radial-gradient(circle at 13% 18%, rgba(35, 148, 84, 0.25) 0 7%, transparent 7.5%),
        radial-gradient(circle at 88% 75%, rgba(var(--secondary-rgb), 0.2) 0 9%, transparent 9.5%),
        linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 62%, var(--primary-deep-color) 100%);
}

.hero-slide-two {
    background:
        radial-gradient(circle at 80% 20%, rgba(var(--secondary-rgb), 0.2) 0 9%, transparent 9.5%),
        radial-gradient(circle at 18% 82%, rgba(35, 148, 84, 0.25) 0 8%, transparent 8.5%),
        linear-gradient(135deg, var(--primary-dark-color) 0%, var(--primary-color) 58%, #1b3824 100%);
}

.hero-slide-three {
    background:
        radial-gradient(circle at 16% 72%, rgba(var(--secondary-rgb), 0.18) 0 8%, transparent 8.5%),
        radial-gradient(circle at 86% 22%, rgba(35, 148, 84, 0.24) 0 7%, transparent 7.5%),
        linear-gradient(145deg, var(--primary-color) 0%, var(--primary-dark-color) 70%, var(--primary-deep-color) 100%);
}

.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.16;
    background-image: linear-gradient(30deg, transparent 48%, rgba(255, 255, 255, 0.2) 49%, transparent 50%);
    background-size: 42px 42px;
    pointer-events: none;
}

.hero-slide img {
    opacity: 0.14;
    filter: saturate(0.75) contrast(1.05);
}

.hero-text {
    width: min(760px, 92%);
    max-width: 760px;
    padding: 52px 44px;
    color: #fff;
    background: rgba(var(--primary-deep-rgb), 0.76);
    border: 1px solid rgba(var(--secondary-rgb), 0.48);
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(7px);
}

.hero-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: #e8b93f;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-text h1 {
    margin-bottom: 16px;
    color: #e8b93f;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.08;
}

.hero-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
}

.hero-text .btn {
    min-width: 150px;
    padding: 12px 24px;
    border-radius: 10px;
}

.hero-carousel .owl-dots {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
}

.hero-carousel .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, 0.45);
}

.hero-carousel .owl-dots .owl-dot.active span {
    width: 25px;
    background: var(--secondary-color);
}

/* Compact footer */
.site-footer {
    margin-top: 42px !important;
    padding: 34px 0 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 55%, var(--primary-deep-color) 100%) !important;
}

.site-footer .footer-main {
    padding-bottom: 28px;
}

.site-footer h5 {
    margin-bottom: 14px;
    color: #e8b93f;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.site-footer p,
.site-footer li,
.site-footer a {
    color: rgba(255, 255, 255, 0.83);
    font-size: 0.94rem;
    line-height: 1.6;
}

.site-footer .footer-brand p {
    max-width: 360px;
    margin-bottom: 14px;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li {
    margin-bottom: 7px;
}

.site-footer li i {
    width: 20px;
    color: #e8b93f;
}

.site-footer a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

.site-footer a:hover {
    color: #e8b93f !important;
    transform: translateX(3px);
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #e8b93f;
    border: 1px solid rgba(232, 185, 63, 0.8);
    border-radius: 50%;
    line-height: 1;
}

.footer-socials a:hover {
    color: var(--primary-dark-color) !important;
    background: #e8b93f;
    transform: translateY(-2px);
}

.footer-contact span {
    overflow-wrap: anywhere;
}

.footer-bottom {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    padding: 16px 0;
    border-top: 1px solid rgba(232, 185, 63, 0.2);
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.82rem;
}

.footer-bottom .credit {
    color: #e8b93f;
}

/* Keep contact-page text buttons from inheriting circular footer icon sizing */
.card-body .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card-body .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 13px;
    border: 1px solid var(--secondary-color);
    border-radius: 9px;
    line-height: 1.2;
    color: var(--primary-color);
}

/* Contact page spacing and alignment */
.contact-page .contact-hero {
    margin-bottom: 0;
}

.contact-section {
    padding: 0 0 32px;
}

.contact-section .contact-form-card,
.contact-section .contact-sidebar {
    height: 100%;
}

.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-info-card {
    flex: 1;
}

.contact-detail {
    padding: 0 0 15px;
    margin: 0 0 15px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
}

.contact-detail:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.contact-detail h6 {
    margin-bottom: 7px;
    color: var(--primary-color);
    font-weight: 700;
}

.contact-detail h6 i {
    width: 24px;
    text-align: center;
}

.contact-detail p {
    margin: 0 0 0 29px;
    color: #5d6860 !important;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.follow-card .card-header,
.follow-card .social-links {
    justify-content: center;
    text-align: center;
}

.contact-page .site-footer {
    margin-top: 0 !important;
}

/* Premium contact page */
.contact-premium-page {
    background: var(--page-background);
}

.contact-premium-hero {
    position: relative;
    overflow: hidden;
    padding: 62px 0 99px;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(30deg, transparent 48%, rgba(255, 255, 255, 0.025) 49%, transparent 50%) 0 0 / 52px 52px,
        linear-gradient(130deg, var(--primary-color) 0%, #173b22 56%, var(--primary-deep-color) 100%);
}

.contact-hero-orb {
    position: absolute;
    border: 1px solid rgba(232, 185, 63, 0.23);
    border-radius: 50%;
}

.contact-hero-orb-one {
    top: -135px;
    right: -70px;
    width: 340px;
    height: 340px;
    box-shadow: inset 0 0 0 45px rgba(var(--secondary-rgb), 0.045);
}

.contact-hero-orb-two {
    bottom: -165px;
    left: 5%;
    width: 270px;
    height: 270px;
}

.contact-hero-icon {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    color: var(--primary-dark-color);
    background: #e8b93f;
    border-radius: 16px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    font-size: 1.16rem;
}

.contact-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #e8b93f;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.contact-premium-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.contact-premium-hero h1::after {
    content: '.';
    color: #e8b93f;
}

.contact-premium-hero p {
    max-width: 660px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1rem;
    line-height: 1.7;
}

.contact-premium-main {
    padding-bottom: 34px;
}

.contact-quick-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: -43px;
}

.contact-quick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(var(--primary-dark-rgb), 0.09);
    text-decoration: none;
}

a.contact-quick-card:hover {
    color: inherit;
    transform: translateY(-3px);
    border-color: rgba(var(--secondary-rgb), 0.45);
}

.contact-quick-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: #9a7009;
    background: rgba(var(--secondary-rgb), 0.13);
    border-radius: 12px;
}

.contact-quick-card div {
    min-width: 0;
}

.contact-quick-card small,
.contact-quick-card strong {
    display: block;
}

.contact-quick-card small {
    color: #788078;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.contact-quick-card strong {
    margin-top: 2px;
    overflow-wrap: anywhere;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.contact-shell {
    overflow: hidden;
    margin-top: 30px;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.09);
    border-radius: 21px;
    box-shadow: 0 16px 40px rgba(var(--primary-dark-rgb), 0.09);
}

.contact-form-panel {
    height: 100%;
    padding: 43px 45px;
}

.contact-section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    color: #9b710b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-form-panel h2 {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: clamp(1.55rem, 3vw, 2.05rem);
    font-weight: 800;
}

.contact-form-intro {
    margin-bottom: 27px;
    color: #6a756d;
    font-size: 0.9rem;
}

.contact-modern-form .form-label {
    margin-bottom: 7px;
    color: #314d38;
    font-size: 0.82rem;
}

.contact-modern-form .form-label span {
    color: #bb3c39;
}

.contact-input-wrap {
    position: relative;
}

.contact-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: #829085;
    font-size: 0.82rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.contact-input-wrap .form-control {
    min-height: 49px;
    padding: 11px 14px 11px 42px;
    color: #25352a;
    background: #fbfcf8;
    border: 1px solid #dce4d9;
    border-radius: 10px;
    font-size: 0.88rem;
}

.contact-input-wrap .form-control::placeholder {
    color: #9aa29c;
}

.contact-input-wrap .form-control:focus {
    background: #fff;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.22rem rgba(var(--secondary-rgb), 0.13);
}

.contact-textarea-wrap > i {
    top: 17px;
    transform: none;
}

.contact-textarea-wrap textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

.contact-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 5px;
}

.contact-form-footer p {
    margin: 0;
    color: #7c857e;
    font-size: 0.74rem;
}

.contact-form-footer p i {
    margin-right: 4px;
    color: #4e8b57;
}

.contact-form-footer p a {
    color: #8a6508;
    font-weight: 700;
}

.contact-submit-btn {
    min-width: 164px;
    padding: 12px 18px;
    border-radius: 10px;
    white-space: nowrap;
}

.contact-submit-btn i {
    margin-left: 6px;
}

.contact-support-panel {
    position: relative;
    min-height: 100%;
    padding: 43px 39px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--secondary-rgb), 0.15), transparent 16rem),
        linear-gradient(145deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
}

.contact-support-leaf {
    position: absolute;
    right: -22px;
    bottom: -42px;
    color: rgba(255, 255, 255, 0.035);
    font-size: 13rem;
    transform: rotate(-22deg);
}

.contact-support-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    padding: 6px 10px;
    color: #dbe9dc;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-support-badge i {
    color: #78c78a;
    font-size: 0.48rem;
}

.contact-support-panel > h2 {
    position: relative;
    margin-bottom: 12px;
    color: #fff;
    font-size: 1.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.contact-support-panel > p {
    position: relative;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.88rem;
    line-height: 1.7;
}

.contact-support-list {
    position: relative;
    display: grid;
    gap: 12px;
}

.contact-support-list > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-support-list > div > span {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: #e8b93f;
    background: rgba(232, 185, 63, 0.1);
    border-radius: 10px;
}

.contact-support-list p,
.contact-support-list small,
.contact-support-list strong {
    display: block;
    margin: 0;
}

.contact-support-list small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.contact-support-list strong,
.contact-support-panel .contact-support-list a {
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.55;
    text-decoration: none;
}

.contact-support-panel .contact-support-list a:hover {
    color: #e8b93f;
}

.contact-social-block {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 24px;
}

.contact-social-block > span {
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.contact-socials {
    display: flex;
    gap: 7px;
}

.contact-support-panel .contact-socials a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #e8b93f;
    border: 1px solid rgba(232, 185, 63, 0.5);
    border-radius: 50%;
    text-decoration: none;
}

.contact-support-panel .contact-socials a:hover {
    color: var(--primary-dark-color);
    background: #e8b93f;
    transform: translateY(-2px);
}

/* Product catalog and filters */
.products-page {
    background: var(--page-background);
}

.products-catalog-hero {
    position: relative;
    overflow: hidden;
    padding: 46px 0;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 12% 20%, rgba(78, 139, 87, 0.25), transparent 14rem),
        radial-gradient(circle at 90% 80%, rgba(var(--secondary-rgb), 0.15), transparent 15rem),
        linear-gradient(130deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
}

.products-catalog-hero span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #e8b93f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.products-catalog-hero h1 {
    margin-bottom: 9px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.products-catalog-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
}

.products-catalog-main {
    padding: 36px 0 44px;
}

.product-filter-card {
    position: sticky;
    top: 94px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 17px;
    box-shadow: 0 10px 30px rgba(var(--primary-dark-rgb), 0.07);
}

.filter-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 19px;
    color: #fff;
    background: linear-gradient(130deg, var(--primary-color), #173b22);
}

.filter-card-heading > span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    color: var(--primary-dark-color);
    background: #e8b93f;
    border-radius: 11px;
}

.filter-card-heading strong,
.filter-card-heading small {
    display: block;
}

.filter-card-heading strong {
    font-size: 0.94rem;
}

.filter-card-heading small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.68rem;
}

.filter-block {
    padding: 17px 18px;
    border-bottom: 1px solid #edf0ea;
}

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

.filter-label-row small {
    color: #8b958d;
    font-size: 0.68rem;
}

.filter-label-row strong {
    color: #8a6508;
    font-size: 0.8rem;
}

.filter-label {
    display: block;
    margin-bottom: 9px;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filter-label-row .filter-label {
    margin: 0;
}

.filter-search {
    position: relative;
}

.filter-search i {
    position: absolute;
    top: 50%;
    left: 12px;
    color: #859087;
    font-size: 0.76rem;
    transform: translateY(-50%);
}

.filter-search input {
    width: 100%;
    height: 42px;
    padding: 8px 11px 8px 34px;
    color: #2c3d31;
    background: #fafbf7;
    border: 1px solid #dce3d9;
    border-radius: 9px;
    outline: none;
    font-size: 0.8rem;
}

.filter-search input:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.12);
}

.filter-categories {
    display: grid;
    gap: 4px;
}

.filter-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    color: #5e6a61 !important;
    border-radius: 8px;
    font-size: 0.76rem;
    text-decoration: none;
}

.filter-categories a > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.filter-categories a i {
    width: 14px;
    color: #b48612;
    text-align: center;
}

.filter-categories a b {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    height: 21px;
    color: #768078;
    background: #f0f2ec;
    border-radius: 12px;
    font-size: 0.64rem;
}

.filter-categories a:hover,
.filter-categories a.active {
    color: var(--primary-color) !important;
    background: #f6f2e7;
}

.filter-categories a.active {
    font-weight: 800;
    box-shadow: inset 3px 0 var(--secondary-color);
}

.filter-categories a.active b {
    color: #fff;
    background: var(--primary-color);
}

.product-filter-card .form-range {
    height: 17px;
    padding: 0;
    accent-color: var(--secondary-color);
}

.product-filter-card .form-range::-webkit-slider-thumb {
    background: var(--secondary-color);
}

.filter-range-labels {
    display: flex;
    justify-content: space-between;
    color: #8a938c;
    font-size: 0.68rem;
}

.product-filter-card .form-select {
    min-height: 43px;
    padding: 8px 34px 8px 11px;
    background-color: #fafbf7;
    border: 1px solid #dce3d9;
    border-radius: 9px;
    font-size: 0.78rem;
}

.filter-apply-btn {
    display: block;
    width: calc(100% - 36px);
    margin: 17px 18px 9px;
    padding: 10px;
    border-radius: 9px;
    font-size: 0.78rem;
}

.filter-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 15px 17px;
    color: #758078 !important;
    font-size: 0.7rem;
    text-decoration: none;
}

.filter-clear:hover {
    color: var(--primary-color) !important;
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
}

.catalog-toolbar small {
    display: block;
    margin-bottom: 2px;
    color: #7b857d;
    font-size: 0.72rem;
}

.catalog-toolbar h2 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.35rem;
    font-weight: 800;
}

.active-search {
    padding: 7px 10px;
    color: #73570e;
    background: #fff4d4;
    border-radius: 8px;
    font-size: 0.72rem;
}

.catalog-product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(var(--primary-rgb), 0.09);
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(var(--primary-dark-rgb), 0.07);
}

.catalog-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(var(--primary-dark-rgb), 0.12);
}

.catalog-product-card .product-image {
    height: 255px;
}

.featured-pill,
.sale-pill {
    position: absolute;
    z-index: 3;
    top: 12px;
    padding: 6px 9px;
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 800;
}

.featured-pill {
    left: 12px;
    color: #fff;
    background: var(--primary-color);
}

.featured-pill i {
    margin-right: 3px;
    color: #e8b93f;
}

.sale-pill {
    right: 12px;
    color: #fff;
    background: #c4433d;
}

.catalog-product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px;
}

.product-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.product-size {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    color: #46604c;
    background: #edf3e9;
    border-radius: 7px;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
}

.product-review-count {
    color: #89928b;
    font-size: 0.66rem;
}

.catalog-product-info h3 {
    min-height: 46px;
    margin: 0 0 9px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.42;
}

.catalog-product-info h3 a {
    color: var(--primary-color);
    text-decoration: none;
}

.catalog-product-info h3 a:hover {
    color: #8a6508;
}

.catalog-product-info .product-rating {
    display: flex;
    align-items: center;
    min-height: 20px;
    margin-bottom: 11px;
    font-size: 0.72rem;
}

.catalog-product-info .product-rating strong {
    margin-left: 5px;
    color: #667169;
    font-size: 0.7rem;
}

.product-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin-bottom: 16px;
}

.product-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.product-detail-price .sale-price {
    font-size: 1.85rem;
}

.product-gallery-main {
    display: grid;
    min-height: 420px;
    place-items: center;
    overflow: hidden;
    background: #f3f1e7;
    border: 1px solid rgba(31, 78, 46, .12);
    border-radius: 6px;
}

.product-gallery-main > img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
}

.product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.product-gallery-thumb {
    padding: 3px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8ded4;
    border-radius: 4px;
}

.product-gallery-thumb.active {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(var(--secondary-rgb), .18);
}

.product-gallery-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .product-gallery-main { min-height: 300px; }
    .product-gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sale-price {
    color: var(--primary-color);
    font-size: 1.34rem;
    font-weight: 900;
}

.mrp-price {
    color: #8b938c;
    font-size: 0.68rem;
}

.mrp-price del {
    color: #8b7773;
    font-size: 0.78rem;
}

.product-add-btn {
    width: 100%;
    min-height: 43px;
    margin-top: auto;
    border-radius: 9px;
    font-size: 0.8rem;
}

.product-add-btn.is-adding {
    opacity: 0.82;
}

.product-add-btn.is-added {
    color: #fff !important;
    background: #4e8b57 !important;
    border-color: #4e8b57 !important;
}

.catalog-empty-state {
    padding: 65px 20px;
    text-align: center;
    background: #fff;
    border: 1px dashed rgba(var(--primary-rgb), 0.24);
    border-radius: 17px;
}

.catalog-empty-state > span {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    margin: 0 auto 14px;
    color: #8a6508;
    background: #f7f0da;
    border-radius: 50%;
}

.catalog-empty-state h3 {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 800;
}

.catalog-empty-state p {
    color: #737d75;
}

.shopping-assurance {
    padding: 26px 0;
    color: #fff;
    background: var(--primary-color);
}

.shopping-assurance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.35fr;
    align-items: center;
}

.shopping-assurance-grid > div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.shopping-assurance-grid > div:first-child {
    padding-left: 0;
}

.shopping-assurance-grid > div > i {
    color: #e8b93f;
    font-size: 1.12rem;
}

.shopping-assurance-grid strong,
.shopping-assurance-grid small {
    display: block;
}

.shopping-assurance-grid strong {
    font-size: 0.8rem;
}

.shopping-assurance-grid small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.67rem;
}

.shopping-assurance-grid .assurance-help {
    justify-content: space-between;
    padding-right: 0;
    border-right: 0;
}

.assurance-help a {
    color: #e8b93f;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

.products-page .site-footer {
    margin-top: 0 !important;
}

/* Auth pages */
.auth-page {
    min-height: 100vh;
    background: linear-gradient(145deg, #edf1e7 0%, #f7f1e3 100%);
}

.auth-section {
    padding: 54px 0;
}

.auth-card {
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
    border: 1px solid rgba(var(--primary-rgb), 0.09);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(var(--primary-dark-rgb), 0.13);
}

.auth-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 48px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, var(--primary-color) 0%, var(--primary-dark-color) 75%);
}

.auth-brand-panel::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border: 42px solid rgba(var(--secondary-rgb), 0.14);
    border-radius: 50%;
}

.auth-brand-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    color: var(--primary-dark-color);
    background: #e8b93f;
    border-radius: 18px;
    font-size: 1.5rem;
}

.auth-brand-panel h1 {
    color: #e8b93f;
    font-size: 2rem;
    font-weight: 800;
}

.auth-brand-panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.auth-form-panel {
    padding: 44px 48px;
}

.auth-form-panel h2 {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-weight: 800;
}

.auth-subtitle {
    margin-bottom: 28px;
    color: #6b7c80;
}

.auth-form-panel .form-control {
    min-height: 49px;
    background: #fbfdfc;
    border: 1px solid #d8e2df;
}

.auth-form-panel .input-group-text {
    min-width: 46px;
    justify-content: center;
    color: var(--primary-color);
    background: #edf1e7;
    border: 1px solid #d8e2df;
}

.auth-form-panel .input-group .form-control {
    border-left: 0;
}

.auth-submit {
    min-height: 50px;
    border-radius: 10px;
}

.auth-links {
    color: #69787b;
    font-size: 0.94rem;
}

.auth-links a,
.auth-form-panel a {
    color: #a96e00;
    font-weight: 700;
}

/* Policy pages */
.policy-page {
    background: var(--page-background);
}

.policy-hero {
    position: relative;
    margin: 0;
    padding: 64px 0 !important;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark-color) 100%) !important;
}

.policy-hero::after {
    content: '';
    position: absolute;
    top: -90px;
    right: 8%;
    width: 230px;
    height: 230px;
    border: 45px solid rgba(var(--secondary-rgb), 0.12);
    border-radius: 50%;
}

.policy-hero .container {
    position: relative;
    z-index: 1;
}

.policy-hero .policy-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 15px;
    color: var(--primary-dark-color);
    background: #e8b93f;
    border-radius: 14px;
}

.policy-wrap {
    padding: 42px 0 20px;
}

.policy-card,
.policy-nav {
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(var(--primary-dark-rgb), 0.07);
}

.policy-card {
    padding: 38px;
}

.policy-section {
    padding: 0 0 24px;
    margin: 0 0 26px;
    border-bottom: 1px solid #e6eeec;
}

.policy-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
}

.policy-section h2 {
    margin-bottom: 12px;
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 800;
}

.policy-section p,
.policy-section li {
    color: #516267;
    line-height: 1.75;
}

.policy-nav {
    position: sticky;
    top: 98px;
    padding: 24px;
}

.policy-nav h3 {
    margin-bottom: 14px;
    color: var(--primary-color);
    font-size: 1.08rem;
    font-weight: 800;
}

.policy-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #52666b;
    border-bottom: 1px solid #edf1f0;
    text-decoration: none;
}

.policy-nav a:last-child {
    border-bottom: 0;
}

.policy-nav a:hover,
.policy-nav a.active {
    color: #a96e00;
}

/* Premium Terms & Conditions page */
.terms-page {
    background:
        radial-gradient(circle at 3% 32%, rgba(var(--secondary-rgb), 0.08), transparent 20rem),
        var(--page-background);
}

.terms-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 92px;
    color: #fff;
    background: linear-gradient(125deg, var(--primary-color) 0%, #173b22 52%, var(--primary-deep-color) 100%);
}

.terms-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image:
        linear-gradient(30deg, transparent 48%, #fff 49%, transparent 50%),
        linear-gradient(150deg, transparent 48%, #fff 49%, transparent 50%);
    background-size: 58px 58px;
}

.terms-hero-shape {
    position: absolute;
    border: 1px solid rgba(232, 185, 63, 0.28);
    border-radius: 50%;
}

.terms-hero-shape-one {
    top: -160px;
    right: -60px;
    width: 390px;
    height: 390px;
    box-shadow: inset 0 0 0 55px rgba(var(--secondary-rgb), 0.05);
}

.terms-hero-shape-two {
    bottom: -125px;
    left: 38%;
    width: 225px;
    height: 225px;
}

.terms-hero-content {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
}

.terms-title-icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    color: var(--primary-dark-color);
    background: #e8b93f;
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.terms-hero h1 {
    max-width: 790px;
    margin: 0 auto 16px;
    color: #fff;
    font-size: clamp(2.35rem, 5vw, 4.35rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.terms-hero h1::after {
    content: '.';
    color: #e8b93f;
}

.terms-hero p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.77);
    font-size: 1.06rem;
    line-height: 1.7;
}

.terms-main {
    padding: 0 0 28px;
}

.terms-highlights {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: -35px 0 34px;
}

.terms-highlight {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px 21px;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(var(--primary-dark-rgb), 0.09);
}

.terms-highlight > span {
    display: grid;
    place-items: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    color: #a77908;
    background: rgba(var(--secondary-rgb), 0.13);
    border-radius: 12px;
}

.terms-highlight strong,
.terms-highlight small {
    display: block;
}

.terms-highlight strong {
    color: var(--primary-color);
    font-size: 0.95rem;
}

.terms-highlight small {
    margin-top: 2px;
    color: #748078;
    font-size: 0.76rem;
}

.terms-toc {
    position: sticky;
    top: 94px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 17px;
    box-shadow: 0 8px 25px rgba(var(--primary-dark-rgb), 0.06);
}

.terms-toc-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 20px 14px;
    border-bottom: 1px solid #edf0ea;
}

.terms-toc-heading span {
    color: var(--primary-color);
    font-weight: 800;
}

.terms-toc-heading small {
    padding: 4px 8px;
    color: #8a6508;
    background: rgba(var(--secondary-rgb), 0.12);
    border-radius: 20px;
    font-size: 0.68rem;
}

.terms-toc nav {
    padding: 8px 11px;
}

.terms-toc nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 9px;
    color: #59675d;
    border-radius: 8px;
    font-size: 0.82rem;
    text-decoration: none;
}

.terms-toc nav a:hover {
    color: var(--primary-color);
    background: #f6f2e7;
}

.terms-toc nav b {
    color: #b48612;
    font-size: 0.67rem;
    letter-spacing: 0.04em;
}

.terms-privacy-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    color: #fff !important;
    background: var(--primary-color);
    text-decoration: none;
}

.terms-privacy-link > span {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 700;
}

.terms-privacy-link small {
    display: block;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.64rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.terms-intro {
    display: flex;
    gap: 18px;
    margin-bottom: 17px;
    padding: 25px 27px;
    background: linear-gradient(110deg, #fff 0%, #fbf7ec 100%);
    border: 1px solid rgba(var(--secondary-rgb), 0.2);
    border-radius: 17px;
}

.terms-intro-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: var(--primary-color);
    background: #e8b93f;
    border-radius: 14px;
    font-size: 1.1rem;
}

.terms-intro h2 {
    margin: 0 0 6px;
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 800;
}

.terms-intro p {
    margin: 0;
    color: #647068;
    font-size: 0.91rem;
    line-height: 1.65;
}

.terms-clauses {
    display: grid;
    gap: 13px;
}

.terms-clause {
    position: relative;
    display: grid;
    grid-template-columns: 53px 1fr;
    gap: 18px;
    padding: 26px 28px;
    overflow: hidden;
    scroll-margin-top: 98px;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.09);
    border-radius: 17px;
    box-shadow: 0 5px 18px rgba(var(--primary-dark-rgb), 0.045);
}

.terms-clause::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: transparent;
}

.terms-clause:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--secondary-rgb), 0.35);
    box-shadow: 0 10px 28px rgba(var(--primary-dark-rgb), 0.08);
}

.terms-clause:hover::after {
    background: var(--secondary-color);
}

.terms-clause-icon {
    display: grid;
    place-items: center;
    width: 53px;
    height: 53px;
    color: var(--primary-color);
    background: #edf2e9;
    border-radius: 14px;
    font-size: 1.05rem;
}

.terms-clause-content {
    position: relative;
    min-width: 0;
}

.terms-number {
    position: absolute;
    top: -18px;
    right: -5px;
    color: rgba(var(--primary-rgb), 0.055);
    font-size: 3.4rem;
    font-weight: 900;
    line-height: 1;
}

.terms-clause h2 {
    position: relative;
    z-index: 1;
    margin: 2px 0 9px;
    color: var(--primary-color);
    font-size: 1.17rem;
    font-weight: 800;
}

.terms-clause p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #5f6d63;
    font-size: 0.92rem;
    line-height: 1.72;
}

.terms-note,
.terms-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 0.8rem;
    line-height: 1.55;
}

.terms-note {
    color: #335d3b;
    background: #eff6ed;
}

.terms-warning {
    color: #73570e;
    background: #fff7df;
}

.terms-note i,
.terms-warning i {
    margin-top: 3px;
}

.terms-check-list {
    display: grid;
    gap: 7px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.terms-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #5f6d63;
    font-size: 0.84rem;
}

.terms-check-list i {
    display: grid;
    place-items: center;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    color: #fff;
    background: #4e8b57;
    border-radius: 50%;
    font-size: 0.58rem;
}

.terms-inline-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.terms-inline-facts span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: #526259;
    background: #f5f2e9;
    border-radius: 7px;
    font-size: 0.76rem;
}

.terms-inline-facts i {
    color: #a77908;
}

.terms-contact-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 19px;
    margin-top: 17px;
    padding: 27px 29px;
    scroll-margin-top: 98px;
    color: #fff;
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(var(--primary-dark-rgb), 0.14);
}

.terms-contact-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--primary-dark-color);
    background: #e8b93f;
    border-radius: 14px;
}

.terms-contact-card span {
    color: #e8b93f;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.terms-contact-card h2 {
    margin: 3px 0 5px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
}

.terms-contact-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.82rem;
}

.terms-contact-card .btn {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .site-navbar {
        min-height: 68px;
    }

    .desktop-cart-item {
        display: none;
    }

    .site-navbar .offcanvas-lg {
        width: min(82vw, 330px);
        color: #fff;
        background: linear-gradient(160deg, var(--primary-color) 0%, var(--primary-dark-color) 100%);
        border-right: 1px solid rgba(245, 168, 0, 0.28);
    }

    .site-navbar .offcanvas-header {
        padding: 22px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .site-navbar .offcanvas-title {
        color: #e8b93f;
        font-weight: 800;
    }

    .site-navbar .offcanvas-body {
        padding: 18px 15px;
    }

    .site-navbar .navbar-nav {
        gap: 4px;
    }

    .site-navbar .navbar-nav .nav-link {
        margin: 0;
        padding: 12px 13px;
    }

    .site-navbar .dropdown-menu {
        margin: 2px 10px 8px;
        padding: 7px;
        background: rgba(255, 255, 255, 0.96);
        border: 0;
    }

    .nav-login-btn {
        display: block;
        margin: 10px 0 0;
        width: 100%;
    }

    .auth-brand-panel {
        padding: 34px;
    }

    .policy-nav {
        position: static;
        margin-bottom: 22px;
    }

    .terms-toc {
        position: static;
    }

    .terms-toc nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 10px;
        scrollbar-width: thin;
    }

    .terms-toc nav a {
        flex: 0 0 auto;
        min-width: 155px;
        background: #f8f6ef;
    }

    .contact-support-panel {
        padding: 37px 34px;
    }

    .product-filter-card {
        position: static;
    }

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

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

    .shopping-assurance-grid > div,
    .shopping-assurance-grid > div:first-child,
    .shopping-assurance-grid .assurance-help {
        padding: 13px 18px;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media (max-width: 767.98px) {
    .brand-extra {
        display: inline;
    }

    .site-navbar .container {
        flex-wrap: nowrap;
    }

    .site-navbar .navbar-brand {
        gap: 7px;
        margin-right: 8px;
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .site-navbar .brand-mark {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .hero-section,
    .hero-slide {
        height: 390px;
    }

    .hero-slide {
        padding: 25px 16px;
    }

    .hero-text {
        padding: 36px 23px;
        border-radius: 18px;
    }

    .hero-text h1 {
        font-size: clamp(1.75rem, 9vw, 2.6rem);
    }

    .hero-text p {
        margin-bottom: 23px;
        font-size: 1rem;
    }

    .site-footer {
        padding-top: 30px;
        text-align: center;
    }

    .site-footer .footer-brand p {
        margin-right: auto;
        margin-left: auto;
    }

    .site-footer .footer-main {
        padding-bottom: 22px;
    }

    .site-footer a,
    .footer-socials {
        justify-content: center;
    }

    .site-footer li i {
        width: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 14px 0 18px;
        text-align: center;
    }

    .contact-section {
        padding-bottom: 22px;
    }

    .contact-section .container {
        padding-right: 12px;
        padding-left: 12px;
    }

    .contact-section .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 18px;
    }

    .contact-info-card,
    .follow-card {
        text-align: center;
    }

    .contact-detail p {
        margin-left: 0;
    }

    .contact-form-card .btn[type="submit"] {
        width: 100%;
    }

    .contact-premium-hero {
        padding: 43px 0 78px;
    }

    .contact-premium-hero p {
        padding: 0 7px;
        font-size: 0.9rem;
    }

    .contact-quick-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: -36px;
    }

    .contact-quick-card {
        padding: 13px 15px;
    }

    .contact-quick-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .contact-shell {
        margin-top: 22px;
        border-radius: 16px;
    }

    .contact-form-panel {
        padding: 29px 21px;
    }

    .contact-form-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .contact-submit-btn {
        width: 100%;
    }

    .contact-support-panel {
        padding: 32px 23px;
    }

    .contact-support-panel > h2 {
        font-size: 1.45rem;
    }

    .contact-social-block {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-catalog-hero {
        padding: 37px 14px;
    }

    .products-catalog-main {
        padding: 22px 0 30px;
    }

    .filter-categories {
        grid-template-columns: 1fr;
    }

    .catalog-toolbar {
        align-items: flex-start;
    }

    .catalog-product-card .product-image {
        height: 240px;
    }

    .shopping-assurance-grid {
        grid-template-columns: 1fr;
    }

    .shopping-assurance-grid > div,
    .shopping-assurance-grid > div:first-child,
    .shopping-assurance-grid .assurance-help {
        padding: 13px 0;
        border-right: 0;
    }

    .shopping-assurance-grid .assurance-help {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-section {
        padding: 28px 12px;
    }

    .auth-brand-panel {
        min-height: auto;
        padding: 28px;
        text-align: center;
    }

    .auth-brand-icon {
        margin-right: auto;
        margin-left: auto;
    }

    .auth-brand-panel h1 {
        font-size: 1.55rem;
    }

    .auth-form-panel {
        padding: 30px 24px;
    }

    .policy-hero {
        padding: 45px 0 !important;
    }

    .policy-wrap {
        padding-top: 24px;
    }

    .policy-card {
        padding: 25px 20px;
    }

    .terms-hero {
        padding: 48px 0 70px;
    }

    .terms-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .terms-hero p {
        font-size: 0.94rem;
    }

    .terms-highlights {
        grid-template-columns: 1fr;
        gap: 9px;
        margin: -34px 0 23px;
    }

    .terms-highlight {
        padding: 13px 15px;
    }

    .terms-highlight > span {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .terms-intro {
        padding: 20px;
    }

    .terms-intro-icon {
        display: none;
    }

    .terms-clause {
        grid-template-columns: 42px 1fr;
        gap: 13px;
        padding: 21px 18px;
        border-radius: 14px;
    }

    .terms-clause-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        font-size: 0.9rem;
    }

    .terms-number {
        right: -2px;
        font-size: 2.8rem;
    }

    .terms-clause h2 {
        padding-right: 30px;
        font-size: 1.02rem;
    }

    .terms-clause p {
        font-size: 0.86rem;
    }

    .terms-contact-card {
        grid-template-columns: auto 1fr;
        padding: 23px 20px;
    }

    .terms-contact-card .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 390px) {
    .site-navbar .navbar-brand {
        gap: 7px;
        font-size: 0.79rem;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
    }

    .brand-extra {
        display: none;
    }

    .mobile-header-actions {
        gap: 6px;
    }

    .mobile-cart-link,
    .mobile-header-actions .navbar-toggler {
        width: 40px;
        height: 40px;
    }

    .hero-section,
    .hero-slide {
        height: 360px;
    }

    .hero-kicker {
        font-size: 0.68rem;
    }

    .hero-text {
        width: 96%;
        padding: 29px 17px;
    }
}

/* ==========================================
   CUSTOMER PORTAL REDESIGN V2
   ========================================== */

.customer-portal-v2 {
    color: #24362a;
    background:
        radial-gradient(circle at 8% 34%, rgba(214, 164, 32, 0.08), transparent 22%),
        linear-gradient(180deg, #f7f4ea 0%, #fbfaf6 62%, #f3f0e6 100%);
}

.customer-portal-v2 .portal-v2-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 270px;
    padding: 34px 16px 64px;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 18% 0%, rgba(230, 181, 46, .22), transparent 30%),
        linear-gradient(118deg, #214c2e 0%, #153820 50%, #0c2617 100%);
    background-size: 30px 30px, 30px 30px, auto, auto;
    text-align: center;
}

.portal-v2-hero::after {
    position: absolute;
    z-index: -1;
    right: -110px;
    bottom: -180px;
    width: 440px;
    height: 440px;
    content: "";
    border: 54px solid rgba(218, 169, 37, .07);
    border-radius: 50%;
}

.portal-v2-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1380px;
}

.portal-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 28px;
    color: rgba(255,255,255,.66);
    font-size: .76rem;
}

.portal-breadcrumb a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
}

.portal-breadcrumb a:hover { color: #f1bd31; }
.portal-breadcrumb i { color: rgba(241,189,49,.8); font-size: .55rem; }

.portal-v2-hero .portal-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: #f5c64a;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(245,198,74,.25);
    border-radius: 30px;
    font-size: .7rem;
    letter-spacing: .16em;
}

.customer-portal-v2 .portal-v2-hero h1 {
    margin: 12px 0 8px;
    color: #fff;
    font-size: clamp(2.35rem, 5vw, 3.7rem);
    letter-spacing: -.035em;
}

.customer-portal-v2 .portal-v2-hero p {
    max-width: 650px;
    margin: 0 auto;
    color: rgba(255,255,255,.76);
    font-size: 1rem;
    line-height: 1.65;
}

.portal-hero-leaf {
    position: absolute;
    z-index: 0;
    color: rgba(255,255,255,.035);
    pointer-events: none;
}

.portal-hero-leaf-one { top: 45px; left: 7%; font-size: 8rem; transform: rotate(-18deg); }
.portal-hero-leaf-two { right: 8%; bottom: 23px; font-size: 7rem; transform: rotate(12deg); }

.customer-portal-v2 .customer-portal-main {
    position: relative;
    z-index: 3;
    margin-top: -34px;
    padding: 0 0 64px;
}

.customer-portal-v2 .customer-portal-main > .container { max-width: 1380px; }

.customer-portal-v2 .portal-alert {
    margin-bottom: 18px;
    padding: 14px 17px;
    border-radius: 10px;
    font-size: .82rem;
    box-shadow: 0 8px 24px rgba(21,54,31,.08);
}

/* My Account */
.customer-portal-v2 .account-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
}

.customer-portal-v2 .account-sidebar,
.customer-portal-v2 .account-content {
    border: 1px solid rgba(31,74,43,.1);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(24,55,33,.09);
}

.customer-portal-v2 .account-sidebar {
    top: 108px;
    background: rgba(255,255,255,.96);
}

.customer-portal-v2 .account-identity {
    gap: 14px;
    padding: 25px 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(241,189,49,.25), transparent 35%),
        linear-gradient(135deg, #255433, #12341e);
}

.customer-portal-v2 .account-avatar {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    color: #17351f;
    background: linear-gradient(135deg, #f5ca54, #dfa30b);
    border: 3px solid rgba(255,255,255,.26);
    box-shadow: 0 7px 18px rgba(0,0,0,.15);
    font-size: 1.05rem;
}

.customer-portal-v2 .account-identity strong { font-size: 1rem; }
.customer-portal-v2 .account-identity small { font-size: .72rem; }
.customer-portal-v2 .account-identity span { font-size: .68rem; }

.account-menu-label {
    padding: 18px 20px 7px;
    color: #9a7a24;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.customer-portal-v2 .account-menu { padding: 5px 12px 12px; }

.customer-portal-v2 .account-menu a {
    grid-template-columns: 34px minmax(0,1fr) 14px;
    gap: 10px;
    margin-bottom: 3px;
    padding: 11px 12px;
    color: #536258;
    border: 0;
    border-radius: 10px;
    font-size: .82rem;
}

.customer-portal-v2 .account-menu a > i:first-child {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #996f05;
    background: #f7f0dc;
    border-radius: 8px;
}

.customer-portal-v2 .account-menu a.active,
.customer-portal-v2 .account-menu a:hover {
    color: #fff;
    background: #214b2d;
}

.customer-portal-v2 .account-menu a.active > i:first-child,
.customer-portal-v2 .account-menu a:hover > i:first-child {
    color: #17341f;
    background: #efbd37;
}

.customer-portal-v2 .account-menu a.active > i:last-child,
.customer-portal-v2 .account-menu a:hover > i:last-child { color: rgba(255,255,255,.65); }

.customer-portal-v2 .account-sidebar-actions {
    gap: 4px;
    padding: 13px 20px 17px;
    background: #f7f8f4;
}

.customer-portal-v2 .account-sidebar-actions a { font-size: .76rem; }

.customer-portal-v2 .account-content {
    min-height: 600px;
    padding: 32px;
    background: rgba(255,255,255,.97);
}

.customer-portal-v2 .account-panel-head {
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-color: #e5ebe4;
}

.customer-portal-v2 .account-panel-head > div > span {
    display: inline-flex;
    padding: 5px 9px;
    color: #926a05;
    background: #f9f1db;
    border-radius: 5px;
    font-size: .65rem;
}

.customer-portal-v2 .account-panel-head h2 {
    margin: 8px 0 5px;
    font-size: clamp(1.55rem, 3vw, 2rem);
    letter-spacing: -.025em;
}

.customer-portal-v2 .account-panel-head p { font-size: .82rem; }
.customer-portal-v2 .portal-text-link { font-size: .8rem; }

.customer-portal-v2 .account-stat-grid {
    gap: 13px;
    margin-bottom: 28px;
}

.customer-portal-v2 .account-stat-grid > div {
    position: relative;
    overflow: hidden;
    padding: 18px 16px;
    border: 1px solid #e1e7df;
    border-radius: 13px;
    box-shadow: none;
}

.customer-portal-v2 .account-stat-grid > div::after {
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 70px;
    height: 70px;
    content: "";
    background: rgba(213,163,31,.07);
    border-radius: 50%;
}

.customer-portal-v2 .account-stat-grid > div > i {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    color: #fff;
    background: #285937;
    border-radius: 11px;
}

.customer-portal-v2 .account-stat-grid strong { font-size: 1.15rem; }
.customer-portal-v2 .account-stat-grid small { font-size: .72rem; }

.customer-portal-v2 .account-section-title { margin-bottom: 13px; }
.customer-portal-v2 .account-section-icon { width: 42px; height: 42px; border-radius: 10px; }
.customer-portal-v2 .account-section-title h3 { font-size: 1rem; }
.customer-portal-v2 .account-section-title p { font-size: .7rem; }
.customer-portal-v2 .account-section-title > a { font-size: .74rem; }

.customer-portal-v2 .account-recent-orders {
    overflow: hidden;
    border-color: #dde6dc;
    border-radius: 13px;
}

.customer-portal-v2 .account-recent-orders article {
    padding: 16px 18px;
    background: #fff;
}

.customer-portal-v2 .account-recent-orders article:hover { background: #fbfcf8; }
.customer-portal-v2 .account-recent-orders article > div:first-child small { font-size: .66rem; }
.customer-portal-v2 .account-recent-orders article > div:first-child strong { font-size: .86rem; }
.customer-portal-v2 .account-recent-orders article > div:first-child span { font-size: .7rem; }
.customer-portal-v2 .account-recent-orders article > div:last-child > strong { font-size: .85rem; }

.customer-portal-v2 .portal-status {
    padding: 7px 11px;
    border: 1px solid rgba(105,83,15,.08);
    font-size: .68rem;
}

.customer-portal-v2 .account-mini-empty {
    padding: 24px;
    background: linear-gradient(110deg, #f8faf6, #fffdf7);
    border-radius: 13px;
}

.customer-portal-v2 .account-mini-empty > i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: #f7eccb;
    border-radius: 12px;
}

.customer-portal-v2 .account-mini-empty strong { font-size: .84rem; }
.customer-portal-v2 .account-mini-empty small { font-size: .7rem; }
.customer-portal-v2 .account-mini-empty a { font-size: .72rem; }

.customer-portal-v2 .account-shortcuts { gap: 13px; margin-top: 20px; }
.customer-portal-v2 .account-shortcuts a {
    grid-template-columns: 44px minmax(0,1fr) 20px;
    padding: 16px;
    background: linear-gradient(120deg, #f8faf6, #fff);
    border-radius: 13px;
}

.customer-portal-v2 .account-shortcuts a:hover {
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(30,72,41,.08);
}

.customer-portal-v2 .account-shortcuts a > i:first-child { width: 42px; height: 42px; border-radius: 10px; }
.customer-portal-v2 .account-shortcuts strong { font-size: .8rem; }
.customer-portal-v2 .account-shortcuts small { font-size: .66rem; }

.customer-portal-v2 .account-form { max-width: 920px; }
.customer-portal-v2 .account-form .form-label { margin-bottom: 7px; font-size: .77rem; }
.customer-portal-v2 .account-input .form-control {
    min-height: 50px;
    background: #fbfcfa;
    border: 1px solid #dbe4d9;
    border-radius: 10px;
    font-size: .82rem;
}

.customer-portal-v2 .account-input > i:first-child { left: 15px; }
.customer-portal-v2 .account-input .form-control { padding-left: 42px; }
.customer-portal-v2 .account-field-note { margin-top: 7px; font-size: .66rem; }
.customer-portal-v2 .account-form-footer { margin-top: 26px; padding-top: 20px; }
.customer-portal-v2 .account-form-footer > span { font-size: .7rem; }

.customer-portal-v2 .portal-primary-btn,
.customer-portal-v2 .portal-secondary-btn {
    padding: 10px 16px;
    border-radius: 9px;
    font-size: .75rem;
}

.customer-portal-v2 .portal-primary-btn {
    background: linear-gradient(135deg, #285a37, #183e25);
    box-shadow: 0 7px 17px rgba(26,65,37,.16);
}

.customer-portal-v2 .account-address-grid { gap: 15px; }
.customer-portal-v2 .account-address-grid article {
    padding: 19px;
    background: linear-gradient(145deg, #fff, #fafbf8);
    border-radius: 13px;
}

.customer-portal-v2 .account-address-grid header span { font-size: .75rem; }
.customer-portal-v2 .account-address-grid h3 { font-size: .92rem; }
.customer-portal-v2 .account-address-grid p { font-size: .75rem; }
.customer-portal-v2 .account-address-grid footer { font-size: .68rem; }

.customer-portal-v2 .account-info-strip,
.customer-portal-v2 .account-security-tip {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: .72rem;
}

/* Orders dashboard */
.customer-portal-v2 .orders-v2-toolbar {
    align-items: center;
    margin-bottom: 18px;
    padding: 18px 20px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(31,74,43,.1);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(24,55,33,.08);
}

.orders-toolbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.orders-toolbar-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #173b24;
    background: #efbd37;
    border-radius: 11px;
}

.orders-toolbar-title small {
    display: block;
    margin-bottom: 2px;
    color: #9a7108;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.orders-toolbar-title h2 {
    margin: 0;
    color: #214b2d;
    font-size: 1.2rem;
}

.customer-portal-v2 .portal-order-filters {
    gap: 6px;
    padding: 5px;
    background: #f3f5f0;
    border: 0;
    border-radius: 11px;
}

.customer-portal-v2 .portal-order-filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: .72rem;
}

.customer-portal-v2 .portal-order-filters a.active,
.customer-portal-v2 .portal-order-filters a:hover {
    background: #214b2d;
    box-shadow: 0 5px 14px rgba(28,68,39,.18);
}

.orders-page-v2 .portal-stats { gap: 13px; margin-bottom: 20px; }
.orders-page-v2 .portal-stats > div {
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(24,55,33,.065);
}

.orders-page-v2 .portal-stats > div > i {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    background: #285a37;
    border-radius: 12px;
}

.orders-page-v2 .portal-stats strong { font-size: 1.2rem; }
.orders-page-v2 .portal-stats small { font-size: .72rem; }
.orders-page-v2 .portal-orders-list { gap: 18px; }

.orders-page-v2 .portal-order-card {
    border: 1px solid rgba(32,75,44,.13);
    border-radius: 16px;
    box-shadow: 0 16px 42px rgba(23,54,32,.08);
}

.orders-page-v2 .portal-order-card:hover {
    border-color: rgba(204,151,12,.34);
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(23,54,32,.11);
}

.orders-page-v2 .portal-order-head {
    grid-template-columns: minmax(210px, 1fr) minmax(160px, .6fr) auto;
    padding: 16px 20px;
    background: linear-gradient(90deg, #f1f5ee, #fafbf8);
}

.orders-page-v2 .portal-order-head small,
.orders-page-v2 .portal-order-total small { font-size: .62rem; }
.orders-page-v2 .portal-order-head strong { font-size: .86rem; }

.orders-page-v2 .portal-order-body { gap: 22px; padding: 21px 20px; }
.orders-page-v2 .portal-order-product { grid-template-columns: 88px minmax(0,1fr); gap: 17px; }
.orders-page-v2 .portal-order-image {
    width: 88px;
    height: 100px;
    padding: 5px;
    border-radius: 11px;
}

.orders-page-v2 .portal-order-product h2 { margin-bottom: 7px; font-size: 1rem; }
.orders-page-v2 .portal-order-product p { margin-bottom: 5px; font-size: .75rem; }
.orders-page-v2 .portal-order-product > div > span { font-size: .66rem; }
.orders-page-v2 .portal-order-total strong { font-size: 1.2rem; }

.orders-page-v2 .portal-order-progress { padding: 15px 24px; }
.orders-page-v2 .portal-order-progress span { flex-basis: 72px; }
.orders-page-v2 .portal-order-progress span i { width: 30px; height: 30px; font-size: .66rem; }
.orders-page-v2 .portal-order-progress span small { font-size: .62rem; }
.orders-page-v2 .portal-order-progress b { margin-top: 14px; }

.orders-page-v2 .portal-order-actions { padding: 14px 20px; }
.orders-page-v2 .portal-order-actions > span { font-size: .68rem; }
.orders-page-v2 .portal-empty-state { border-radius: 16px; box-shadow: 0 14px 40px rgba(24,55,33,.07); }

@media (max-width: 991.98px) {
    .customer-portal-v2 .portal-v2-hero { min-height: 245px; }
    .customer-portal-v2 .account-layout { grid-template-columns: 1fr; }
    .customer-portal-v2 .account-sidebar { position: static; }
    .customer-portal-v2 .account-identity { padding: 20px; }
    .customer-portal-v2 .account-menu-label { display: none; }
    .customer-portal-v2 .account-menu {
        grid-template-columns: repeat(5,minmax(0,1fr));
        gap: 6px;
        padding: 10px;
    }
    .customer-portal-v2 .account-menu a {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
        padding: 10px 5px;
        text-align: center;
    }
    .customer-portal-v2 .account-menu a > i:first-child { width: 30px; height: 30px; }
    .customer-portal-v2 .account-sidebar-actions { justify-content: flex-end; }
}

@media (max-width: 767.98px) {
    .customer-portal-v2 .portal-v2-hero {
        min-height: 230px;
        padding: 25px 12px 57px;
    }

    .customer-portal-v2 .portal-v2-hero::after {
        right: -170px;
        bottom: -210px;
    }

    .portal-breadcrumb {
        gap: 7px;
        margin-bottom: 20px;
        font-size: .67rem;
    }

    .portal-v2-hero .portal-hero-leaf-one { left: -20px; font-size: 5rem; }
    .portal-v2-hero .portal-hero-leaf-two { right: -20px; font-size: 4.7rem; }
    .portal-v2-hero .portal-hero-kicker { padding: 5px 9px; font-size: .58rem; }
    .customer-portal-v2 .portal-v2-hero h1 { margin-top: 10px; font-size: 2.15rem; }
    .customer-portal-v2 .portal-v2-hero p { max-width: 94%; font-size: .8rem; line-height: 1.5; }

    .customer-portal-v2 .customer-portal-main {
        margin-top: -31px;
        padding-bottom: 42px;
    }

    .customer-portal-v2 .customer-portal-main > .container {
        padding-right: 11px;
        padding-left: 11px;
    }

    .customer-portal-v2 .account-layout { gap: 13px; }
    .customer-portal-v2 .account-sidebar,
    .customer-portal-v2 .account-content { border-radius: 14px; }
    .customer-portal-v2 .account-identity { padding: 17px 15px; }
    .customer-portal-v2 .account-avatar { flex-basis: 49px; width: 49px; height: 49px; font-size: .9rem; }
    .customer-portal-v2 .account-identity strong { font-size: .88rem; }
    .customer-portal-v2 .account-identity small { font-size: .65rem; }

    .customer-portal-v2 .account-menu {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 5px;
        padding: 9px;
    }

    .customer-portal-v2 .account-menu a {
        flex-direction: row;
        justify-content: flex-start;
        gap: 7px;
        min-height: 48px;
        padding: 8px;
        font-size: .67rem;
        text-align: left;
    }

    .customer-portal-v2 .account-menu a:last-child { grid-column: 1 / -1; }
    .customer-portal-v2 .account-sidebar-actions { padding: 9px 14px 12px; }
    .customer-portal-v2 .account-content { padding: 19px 14px; }

    .customer-portal-v2 .account-panel-head {
        align-items: flex-start;
        margin-bottom: 18px;
        padding-bottom: 17px;
    }

    .customer-portal-v2 .account-panel-head h2 { font-size: 1.35rem; }
    .customer-portal-v2 .account-panel-head p { font-size: .72rem; }
    .customer-portal-v2 .account-panel-head .portal-text-link { white-space: nowrap; }
    .customer-portal-v2 .account-head-icon { flex-basis: 40px; width: 40px; height: 40px; }

    .customer-portal-v2 .account-stat-grid { gap: 8px; }
    .customer-portal-v2 .account-stat-grid > div { gap: 9px; padding: 12px 10px; }
    .customer-portal-v2 .account-stat-grid > div > i { flex-basis: 36px; width: 36px; height: 36px; }
    .customer-portal-v2 .account-stat-grid strong { font-size: .94rem; }
    .customer-portal-v2 .account-stat-grid small { font-size: .62rem; }

    .customer-portal-v2 .account-section-title { align-items: flex-end; }
    .customer-portal-v2 .account-section-title p { display: none; }
    .customer-portal-v2 .account-recent-orders article { padding: 14px; }
    .customer-portal-v2 .account-shortcuts { grid-template-columns: 1fr; }
    .customer-portal-v2 .account-shortcuts a { padding: 13px; }
    .customer-portal-v2 .account-address-grid { grid-template-columns: 1fr; }
    .customer-portal-v2 .account-form-footer { align-items: stretch; flex-direction: column; }
    .customer-portal-v2 .account-form-footer .btn { width: 100%; }

    .customer-portal-v2 .orders-v2-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        border-radius: 14px;
    }

    .orders-toolbar-icon { width: 40px; height: 40px; }
    .orders-toolbar-title h2 { font-size: 1.05rem; }
    .customer-portal-v2 .portal-order-filters { width: 100%; overflow-x: auto; }
    .customer-portal-v2 .portal-order-filters a {
        flex: 1 0 auto;
        min-height: 36px;
        padding: 7px 10px;
        font-size: .65rem;
    }

    .orders-page-v2 .portal-stats { gap: 8px; }
    .orders-page-v2 .portal-stats > div { gap: 8px; padding: 12px 9px; }
    .orders-page-v2 .portal-stats > div > i { flex-basis: 36px; width: 36px; height: 36px; }
    .orders-page-v2 .portal-stats strong { font-size: .95rem; }
    .orders-page-v2 .portal-stats small { font-size: .61rem; }

    .orders-page-v2 .portal-order-card { border-radius: 13px; }
    .orders-page-v2 .portal-order-head { grid-template-columns: 1fr auto; padding: 13px; }
    .orders-page-v2 .portal-order-body { grid-template-columns: 1fr; gap: 13px; padding: 14px; }
    .orders-page-v2 .portal-order-product { grid-template-columns: 72px minmax(0,1fr); gap: 11px; }
    .orders-page-v2 .portal-order-image { width: 72px; height: 84px; }
    .orders-page-v2 .portal-order-product h2 { font-size: .8rem; white-space: normal; }
    .orders-page-v2 .portal-order-product p { font-size: .67rem; }
    .orders-page-v2 .portal-order-total { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid #edf0eb; text-align: left; }
    .orders-page-v2 .portal-order-progress { padding: 13px 7px; overflow-x: auto; }
    .orders-page-v2 .portal-order-progress span { flex-basis: 45px; }
    .orders-page-v2 .portal-order-progress span i { width: 24px; height: 24px; }
    .orders-page-v2 .portal-order-progress span small { font-size: .47rem; }
    .orders-page-v2 .portal-order-progress b { min-width: 8px; margin-top: 11px; }
    .orders-page-v2 .portal-order-actions { padding: 12px 14px; }
    .orders-page-v2 .portal-order-actions > div { width: 100%; }
    .orders-page-v2 .portal-order-actions .btn { flex: 1; }
}

@media (max-width: 390px) {
    .customer-portal-v2 .account-menu a { font-size: .62rem; }
    .customer-portal-v2 .account-stat-grid > div,
    .orders-page-v2 .portal-stats > div { align-items: flex-start; flex-direction: column; }
    .customer-portal-v2 .account-panel-head .portal-text-link { font-size: .68rem; }
    .customer-portal-v2 .portal-order-filters a i { display: none; }
}

/* OTP verification views */
.otp-security-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 20px;
    padding: 13px 14px;
    color: var(--primary-color);
    background: #eff6ec;
    border: 1px solid #dcebd8;
    border-radius: 11px;
}

.otp-security-note > i {
    color: var(--secondary-color);
    font-size: 1.35rem;
}

.otp-security-note span,
.otp-security-note small {
    display: block;
}

.otp-security-note strong {
    font-size: 0.8rem;
}

.otp-security-note small {
    margin-top: 2px;
    color: #718078;
    font-size: 0.68rem;
}

.otp-code-input {
    height: 64px;
    padding-left: 0.75em;
    color: var(--primary-color);
    background: #fbfcf8;
    border: 2px solid #d8e1d6;
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: 0.75em;
    text-align: center;
}

.otp-code-input:focus {
    border-color: var(--secondary-color);
}

.otp-code-input::placeholder {
    color: #b6bdb7;
    opacity: 1;
}

.otp-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
}

.otp-secondary-actions form {
    margin: 0;
}

.otp-secondary-actions .btn {
    padding: 5px 7px;
    font-size: 0.7rem;
    white-space: nowrap;
}

@media (max-width: 430px) {
    .otp-code-input {
        height: 58px;
        font-size: 1.35rem;
        letter-spacing: 0.55em;
    }
}

/* ==========================================
   PREMIUM CHECKOUT
   ========================================== */
.checkout-page {
    color: #24352a;
    background: #f8f5ec;
}

.checkout-hero {
    padding: 34px 0;
    color: #fff;
    background:
        radial-gradient(circle at 88% 30%, rgba(var(--secondary-rgb), 0.18), transparent 27%),
        linear-gradient(110deg, var(--primary-color), var(--primary-dark-color));
}

.checkout-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.checkout-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #f5c33b;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.checkout-hero h1 {
    margin: 0 0 5px;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.checkout-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
}

.checkout-progress {
    display: flex;
    align-items: flex-start;
}

.checkout-progress > span {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    color: rgba(255, 255, 255, 0.55);
}

.checkout-progress > span > i {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 50%;
    font-size: 0.72rem;
}

.checkout-progress > span small {
    font-size: 0.61rem;
    text-transform: uppercase;
}

.checkout-progress > span.active,
.checkout-progress > span.done {
    color: #f5c33b;
}

.checkout-progress > span.active i,
.checkout-progress > span.done i {
    color: #173722;
    background: #f5c33b;
    border-color: #f5c33b;
}

.checkout-progress > b {
    width: 55px;
    height: 1px;
    margin: 17px 8px 0;
    background: rgba(255, 255, 255, 0.24);
}

.checkout-main {
    padding: 34px 0 48px;
}

.checkout-panel,
.checkout-summary-card {
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.09);
    border-radius: 17px;
    box-shadow: 0 10px 32px rgba(var(--primary-dark-rgb), 0.07);
}

.checkout-panel {
    margin-bottom: 20px;
    padding: 24px;
}

.checkout-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9eee7;
}

.checkout-section-head > span {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    color: #173722;
    background: #f5c33b;
    border-radius: 9px;
    font-weight: 600;
}

.checkout-section-head > div {
    flex: 1;
}

.checkout-section-head h2 {
    margin: 0 0 2px;
    color: var(--primary-color);
    font-size: 1rem;
}

.checkout-section-head p {
    margin: 0;
    color: #7d877f;
    font-size: 0.68rem;
}

.checkout-section-head > i {
    color: #c79718;
    font-size: 1.1rem;
}

.checkout-customer-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 17px;
    margin: 17px 0;
    padding: 11px 13px;
    color: #657068;
    background: #f7f9f5;
    border-radius: 9px;
    font-size: 0.68rem;
}

.checkout-customer-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkout-customer-strip i {
    color: #b28412;
}

.saved-addresses h3 {
    margin: 4px 0 10px;
    color: var(--primary-color);
    font-size: 0.77rem;
}

.saved-address-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 9px;
    padding: 13px;
    border: 1px solid #dde4db;
    border-radius: 11px;
    cursor: pointer;
}

.saved-address-card:has(input:checked) {
    background: #f4f8f1;
    border-color: var(--secondary-color);
    box-shadow: inset 3px 0 var(--secondary-color);
}

.saved-address-card .form-check-input {
    margin-top: 9px;
}

.address-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    color: #8c6810;
    background: #f7efd8;
    border-radius: 50%;
}

.address-copy {
    min-width: 0;
}

.address-copy strong,
.address-copy small {
    display: block;
}

.address-copy strong {
    margin-bottom: 3px;
    color: var(--primary-color);
    font-size: 0.78rem;
}

.address-copy strong em {
    margin-left: 7px;
    padding: 2px 6px;
    color: #397149;
    background: #e3f2e5;
    border-radius: 10px;
    font-size: 0.54rem;
    font-style: normal;
    text-transform: uppercase;
}

.address-copy small {
    margin-top: 2px;
    color: #737e76;
    font-size: 0.65rem;
    line-height: 1.45;
}

.new-address-toggle,
.save-address-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #536159;
    cursor: pointer;
    font-size: 0.72rem;
}

.new-address-toggle {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #faf8f0;
    border-radius: 8px;
}

.new-address-toggle span i {
    margin-right: 4px;
    color: #b0820d;
}

.new-address-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 17px 0 0;
    padding: 12px;
    color: var(--primary-color);
    background: #f5f8f2;
    border-radius: 10px;
}

.new-address-intro > i {
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.new-address-intro span,
.new-address-intro small {
    display: block;
}

.new-address-intro strong {
    font-size: 0.75rem;
}

.new-address-intro small {
    color: #7c867f;
    font-size: 0.63rem;
}

.new-address-form {
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #e8ede6;
}

.new-address-form .form-label {
    margin-bottom: 5px;
    font-size: 0.68rem;
}

.new-address-form .form-label small {
    color: #8c958e;
    font-weight: 400;
}

.new-address-form .form-control {
    min-height: 43px;
    border-color: #dce3da;
    border-radius: 9px;
    font-size: 0.75rem;
}

.checkout-input {
    position: relative;
}

.checkout-input > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    color: #9b810f;
    font-size: 0.7rem;
    transform: translateY(-50%);
}

.checkout-input .form-control {
    padding-left: 34px;
}

.save-address-option {
    margin-top: 15px;
}

.payment-options {
    display: grid;
    gap: 9px;
    padding-top: 17px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #dde4db;
    border-radius: 11px;
    cursor: pointer;
}

.payment-option.active {
    background: #f4f8f1;
    border-color: var(--secondary-color);
}

.payment-option.disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.payment-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #8c6810;
    background: #f7efd8;
    border-radius: 9px;
}

.payment-option > span:nth-of-type(2) {
    flex: 1;
}

.payment-option strong,
.payment-option small {
    display: block;
}

.payment-option strong {
    color: var(--primary-color);
    font-size: 0.78rem;
}

.payment-option small {
    margin-top: 2px;
    color: #7a847c;
    font-size: 0.64rem;
}

.payment-check {
    color: #4d8b5d;
}

.payment-option > em {
    padding: 3px 7px;
    color: #83620d;
    background: #f7efd8;
    border-radius: 12px;
    font-size: 0.55rem;
    font-style: normal;
    text-transform: uppercase;
}

.checkout-summary-card {
    position: sticky;
    top: 98px;
    overflow: hidden;
}

.checkout-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 20px;
    color: #fff;
    background: var(--primary-color);
}

.checkout-summary-head span {
    color: #e9c45b;
    font-size: 0.61rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.checkout-summary-head h2 {
    margin: 2px 0 0;
    font-size: 1rem;
}

.checkout-summary-head a {
    color: #f2d57f !important;
    font-size: 0.65rem;
    text-decoration: none;
}

.checkout-order-items {
    max-height: 315px;
    overflow-y: auto;
    padding: 7px 20px;
}

.checkout-order-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #ebefea;
}

.checkout-item-image {
    position: relative;
    width: 54px;
    height: 62px;
    overflow: visible;
    background: #f2f3e8;
    border-radius: 9px;
}

.checkout-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.checkout-item-image b {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    color: #fff;
    background: var(--secondary-color);
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 0.55rem;
}

.checkout-order-item h3 {
    margin: 0 0 2px;
    color: var(--primary-color);
    font-size: 0.72rem;
    line-height: 1.35;
}

.checkout-order-item small,
.checkout-order-item span {
    display: block;
    color: #818b83;
    font-size: 0.59rem;
}

.checkout-order-item > strong {
    color: var(--primary-color);
    font-size: 0.73rem;
    white-space: nowrap;
}

.checkout-totals {
    padding: 15px 20px;
}

.checkout-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #69746c;
    font-size: 0.72rem;
}

.checkout-totals > div strong {
    color: #34483a;
}

.checkout-totals .free-delivery {
    color: #3e8351;
}

.checkout-totals > small {
    display: block;
    padding: 8px 9px;
    color: #82610c;
    background: #fbf5e4;
    border-radius: 7px;
    font-size: 0.59rem;
}

.checkout-grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 20px;
    background: #f5f8f2;
    border-top: 1px solid #e2e8df;
    border-bottom: 1px solid #e2e8df;
}

.checkout-grand-total > span {
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 600;
}

.checkout-grand-total small {
    display: block;
    margin-top: 2px;
    color: #889089;
    font-size: 0.55rem;
    font-weight: 400;
}

.checkout-grand-total > strong {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.checkout-place-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px);
    margin: 17px 20px 12px;
    padding: 12px;
    color: #173722;
    background: #dca70f;
    border: 0;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.checkout-place-order span {
    padding-left: 8px;
    border-left: 1px solid rgba(23, 55, 34, 0.25);
}

.checkout-place-order:hover {
    color: #173722;
    background: #edbd38;
}

.checkout-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 13px;
    padding: 0 14px;
    color: #718078;
    font-size: 0.55rem;
}

.checkout-trust i {
    margin-right: 3px;
    color: #4e855d;
}

.checkout-terms {
    margin: 10px 20px 17px;
    color: #909891;
    font-size: 0.54rem;
    text-align: center;
}

.checkout-terms a {
    color: #76580d;
}

@media (max-width: 991.98px) {
    .checkout-summary-card {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .checkout-hero {
        padding: 25px 0;
    }

    .checkout-hero-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .checkout-progress {
        align-self: stretch;
        justify-content: center;
    }

    .checkout-progress > b {
        flex: 1;
        max-width: 65px;
    }

    .checkout-main {
        padding: 20px 0 30px;
    }

    .checkout-panel {
        margin-bottom: 13px;
        padding: 15px;
        border-radius: 13px;
    }

    .checkout-customer-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .saved-address-card {
        padding: 10px;
    }

    .checkout-summary-card {
        border-radius: 13px;
    }

    .checkout-order-items {
        max-height: none;
        padding-right: 14px;
        padding-left: 14px;
    }

    .checkout-order-item {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .checkout-item-image {
        width: 48px;
        height: 56px;
    }

    .checkout-place-order {
        width: calc(100% - 28px);
        margin-right: 14px;
        margin-left: 14px;
    }
}

.order-success-page {
    min-height: 70vh;
    padding: 45px 0;
    background: radial-gradient(circle at 50% 10%, rgba(var(--secondary-rgb), 0.09), transparent 35%);
}

.order-success-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 19px;
    box-shadow: 0 14px 40px rgba(var(--primary-dark-rgb), 0.09);
}

.order-success-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 13px;
    color: #fff;
    background: #4f8b5c;
    border: 7px solid #e8f3e8;
    border-radius: 50%;
    font-size: 1.2rem;
}

.order-success-card h1 {
    margin: 2px 0 6px;
    color: var(--primary-color);
    font-size: 1.75rem;
}

.order-success-card > p {
    color: #768078;
    font-size: 0.78rem;
}

.order-success-number {
    display: inline-flex;
    flex-direction: column;
    margin: 10px 0 20px;
    padding: 9px 18px;
    color: var(--primary-color);
    background: #f8f3e4;
    border-radius: 9px;
}

.order-success-number small {
    color: #8c7a49;
    font-size: 0.57rem;
    text-transform: uppercase;
}

.order-success-number strong {
    font-size: 0.83rem;
}

.order-success-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 17px;
}

.order-success-grid > div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    text-align: left;
    background: #f7f9f5;
    border-radius: 9px;
}

.order-success-grid i {
    color: #c18e0b;
}

.order-success-grid span,
.order-success-grid small,
.order-success-grid strong {
    display: block;
}

.order-success-grid small {
    color: #89928a;
    font-size: 0.55rem;
}

.order-success-grid strong {
    color: var(--primary-color);
    font-size: 0.68rem;
}

.order-success-items {
    margin-bottom: 19px;
    padding: 10px 15px;
    text-align: left;
    border: 1px solid #e7ece5;
    border-radius: 10px;
}

.order-success-items > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    color: #425248;
    border-bottom: 1px solid #edf0eb;
    font-size: 0.68rem;
}

.order-success-items > div:last-child {
    border-bottom: 0;
}

.order-success-items small {
    color: #8b938c;
}

.order-success-actions {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 9px;
}

.order-success-actions .btn {
    font-size: 0.72rem;
}

@media (max-width: 576px) {
    .order-success-page {
        padding: 24px 0;
    }

    .order-success-card {
        padding: 25px 14px;
    }

    .order-success-grid {
        grid-template-columns: 1fr;
    }

    .order-success-actions .btn {
        flex: 1;
        padding: 9px 5px;
        font-size: 0.62rem;
        white-space: nowrap;
    }
}

/* Checkout square layout and centered headings */
.checkout-hero-inner {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

.checkout-progress {
    justify-content: center;
}

.checkout-panel,
.checkout-summary-card {
    border-radius: 3px;
}

.checkout-section-head {
    position: relative;
    justify-content: center;
    min-height: 52px;
    padding-right: 45px;
    padding-left: 45px;
    text-align: center;
}

.checkout-section-head > span {
    position: absolute;
    left: 0;
    border-radius: 2px;
}

.checkout-section-head > i {
    position: absolute;
    right: 4px;
}

.checkout-section-head > div {
    flex: 0 1 auto;
}

.checkout-summary-head {
    position: relative;
    justify-content: center;
    min-height: 73px;
    padding-right: 90px;
    padding-left: 90px;
    text-align: center;
}

.checkout-summary-head > a {
    position: absolute;
    right: 20px;
}

.saved-address-card,
.new-address-toggle,
.new-address-intro,
.new-address-form .form-control,
.payment-option,
.payment-icon,
.checkout-item-image,
.checkout-item-image img,
.checkout-totals > small,
.checkout-place-order {
    border-radius: 2px;
}

@media (max-width: 767.98px) {
    .checkout-hero-inner {
        align-items: center;
        text-align: center;
    }

    .checkout-progress {
        width: min(100%, 310px);
        align-self: center;
    }

    .checkout-panel,
    .checkout-summary-card {
        border-radius: 2px;
    }

    .checkout-summary-head {
        padding-right: 76px;
        padding-left: 76px;
    }

    .checkout-summary-head > a {
        right: 13px;
    }
}

/* ==========================================
   TYPOGRAPHY WEIGHT NORMALIZATION
   ========================================== */

body {
    font-weight: 400;
}

strong,
b {
    font-weight: 600;
}

h1,
h2 {
    font-weight: 700 !important;
}

h3,
h4,
h5,
h6,
.fw-bold {
    font-weight: 600 !important;
}

.site-navbar .navbar-brand,
.site-navbar .navbar-nav .nav-link,
.site-navbar .dropdown-item,
.site-navbar .nav-login-btn,
.offcanvas-title {
    font-weight: 600;
}

.hero-text h1,
.page-header h1,
.products-catalog-hero h1,
.contact-premium-hero h1,
.terms-hero h1,
.auth-brand-panel h1,
.auth-form-panel h2 {
    font-weight: 700 !important;
}

.btn,
.card-header,
.form-label,
.category-card h5,
.product-info h6,
.footer-bottom strong,
.site-footer h5 {
    font-weight: 600 !important;
}

.filter-card-heading strong,
.filter-label,
.filter-categories a.active,
.filter-apply-btn,
.catalog-toolbar h2,
.catalog-product-info h3,
.catalog-product-info h3 a,
.featured-pill,
.sale-pill,
.product-size,
.product-add-btn,
.contact-section-label,
.contact-support-badge,
.terms-eyebrow,
.terms-toc-heading span,
.terms-toc nav a,
.terms-clause h2,
.terms-contact-card h2 {
    font-weight: 600 !important;
}

.sale-price,
.price {
    font-weight: 700 !important;
}

/* ==========================================
   MOBILE CATALOG SHEET + COMPACT CART
   ========================================== */

.nav-auth-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    margin-left: 8px;
}

.nav-auth-actions .nav-login-btn {
    margin-left: 0;
}

.nav-register-btn {
    padding: 10px 13px;
    color: #f5c33b;
    background: transparent;
    border: 1px solid rgba(245, 195, 59, 0.72);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-register-btn:hover {
    color: var(--primary-dark-color);
    background: #f5c33b;
    border-color: #f5c33b;
}

.mobile-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 14px;
    color: #fff;
    background: var(--primary-color);
    border: 0;
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(var(--primary-dark-rgb), 0.13);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.mobile-filter-trigger span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mobile-filter-trigger span i {
    color: #f5c33b;
}

.mobile-filter-trigger b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #173722;
    background: #f5c33b;
    border-radius: 50%;
    font-size: 0.68rem;
}

.mobile-filter-sheet {
    height: min(86vh, 720px) !important;
    color: #203629;
    background: var(--page-background);
    border: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 40px rgba(9, 30, 18, 0.22);
}

.mobile-filter-sheet .offcanvas-header {
    padding: 16px 18px 13px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.11);
}

.mobile-filter-sheet .offcanvas-header small {
    color: #9a730e;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-filter-sheet .offcanvas-title {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.mobile-filter-sheet .offcanvas-body {
    padding: 12px;
    overflow-y: auto;
}

.mobile-filter-sheet .product-filter-card {
    position: static;
    border: 0;
    box-shadow: none;
}

.mobile-filter-sheet .filter-card-heading {
    display: none;
}

.product-action-row {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 7px;
    margin-top: auto;
}

.product-action-row .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 8px 6px;
    border-radius: 9px;
    font-size: 0.69rem;
    white-space: nowrap;
}

.product-buy-btn {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.product-buy-btn:hover,
.product-buy-btn:focus {
    color: #fff;
    background: #173722;
    border-color: #173722;
}

.cart-page {
    background: #f8f5ec;
}

.cart-page .page-header {
    color: #fff;
    background: linear-gradient(110deg, var(--primary-color), #173722) !important;
}

.cart-page .page-header h1 {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.35rem);
}

.cart-line-item {
    position: relative;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    border-left: 0;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 13px;
}

.cart-line-item:hover {
    transform: none;
}

.cart-item-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    color: #778179;
    font-size: 0.7rem;
}

.cart-line-item .cart-price {
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.cart-quantity-value {
    width: 42px;
    height: 32px;
    color: var(--primary-color);
    background: #fafbf7;
    border: 1px solid #d9dfd7;
    border-radius: 6px;
    font-size: 0.8rem;
}

.cart-line-item .quantity-control button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0.68rem;
}

.cart-line-item .quantity-control button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.cart-item-summary {
    align-self: start;
    text-align: right;
}

.cart-item-summary .price {
    margin: 0 0 9px;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.cart-remove-btn {
    padding: 5px 8px;
    color: #aa3e38;
    background: #fff4f1;
    border: 1px solid #f1d2cd;
    font-size: 0.68rem;
}

.cart-remove-btn:hover {
    color: #fff;
    background: #aa3e38;
    border-color: #aa3e38;
}

.cart-auth-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
}

.cart-auth-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 5px;
    font-size: 0.68rem;
    white-space: nowrap;
}

.cart-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.cart-list-heading h4 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.15rem;
}

.cart-list-heading a {
    color: #80600c;
    font-size: 0.72rem;
    text-decoration: none;
    white-space: nowrap;
}

.cart-list-heading a:hover {
    color: var(--primary-color);
}

@media (min-width: 992px) {
    .mobile-filter-sheet {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .nav-auth-actions {
        width: 100%;
        margin: 0;
    }

    .nav-auth-actions .nav-login-btn,
    .nav-auth-actions .nav-register-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin: 10px 0 0;
        padding: 10px 7px;
        font-size: 0.64rem;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .products-catalog-hero {
        padding: 30px 12px;
    }

    .products-catalog-hero h1 {
        font-size: 1.65rem;
    }

    .products-catalog-hero p {
        font-size: 0.82rem;
    }

    .product-grid {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 12px;
    }

    .catalog-product-card {
        margin-bottom: 0;
        border-radius: 12px;
    }

    .catalog-product-card .product-image {
        height: 165px;
    }

    .catalog-product-info {
        padding: 10px 8px;
    }

    .featured-pill,
    .sale-pill {
        top: 7px;
        padding: 4px 6px;
        font-size: 0.52rem;
    }

    .featured-pill {
        left: 7px;
    }

    .sale-pill {
        right: 7px;
    }

    .product-top-meta {
        margin-bottom: 7px;
    }

    .product-size {
        max-width: 100%;
        padding: 4px 6px;
        overflow: hidden;
        font-size: 0.56rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .product-review-count {
        display: none;
    }

    .catalog-product-info h3 {
        min-height: 43px;
        margin-bottom: 6px;
        font-size: 0.76rem;
        line-height: 1.38;
    }

    .catalog-product-info .product-rating {
        min-height: 15px;
        margin-bottom: 7px;
        font-size: 0.55rem;
    }

    .catalog-product-info .product-rating strong {
        font-size: 0.58rem;
    }

    .product-price-row {
        gap: 3px 5px;
        margin-bottom: 10px;
    }

    .sale-price {
        font-size: 0.95rem;
    }

    .mrp-price,
    .mrp-price del {
        font-size: 0.56rem;
    }

    .product-action-row {
        gap: 4px;
    }

    .product-action-row .btn {
        min-height: 34px;
        padding: 6px 3px;
        font-size: 0.57rem;
        letter-spacing: -0.01em;
    }

    .product-action-row .btn i {
        margin-right: 1px;
    }

    .cart-page-content {
        padding-top: 24px !important;
        padding-bottom: 30px !important;
    }

    .cart-line-item {
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        padding: 11px;
        text-align: left;
    }

    .cart-line-item .cart-item-image {
        grid-row: 1 / span 2;
        width: 76px;
        height: 92px;
        border-width: 1px;
    }

    .cart-line-item .cart-item-details {
        min-width: 0;
        padding-right: 61px;
        text-align: left;
    }

    .cart-line-item .cart-item-details h6 {
        margin-bottom: 2px;
        overflow: hidden;
        font-size: 0.78rem;
        line-height: 1.3;
        text-overflow: ellipsis;
    }

    .cart-item-meta {
        margin-bottom: 2px;
        font-size: 0.6rem;
    }

    .cart-line-item .cart-price {
        margin-bottom: 5px;
        font-size: 0.75rem;
    }

    .cart-line-item .quantity-control {
        gap: 3px;
    }

    .cart-line-item .quantity-control button,
    .cart-quantity-value {
        width: 27px;
        height: 27px;
        font-size: 0.6rem;
    }

    .cart-quantity-value {
        width: 34px;
    }

    .cart-item-summary {
        position: absolute;
        top: 11px;
        right: 10px;
    }

    .cart-remove-btn {
        margin: 0;
        padding: 4px 6px;
        font-size: 0.59rem;
    }

    .cart-list-heading {
        margin-bottom: 12px;
    }

    .cart-list-heading h4 {
        font-size: 0.98rem;
    }

    .cart-list-heading a {
        font-size: 0.61rem;
    }
}

@media (max-width: 390px) {
    .product-action-row .btn {
        font-size: 0.52rem;
    }

    .product-action-row .btn i {
        display: none;
    }
}

/* ==========================================
   TRACK ORDER PORTAL V2
   ========================================== */

.track-page-v2 .track-v2-main > .container { max-width: 1320px; }

.track-overview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 22px 24px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(31,74,43,.11);
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(24,55,33,.1);
}

.track-order-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.track-order-icon,
.track-heading-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #173b24;
    background: linear-gradient(135deg, #f3c64c, #dda20c);
    border-radius: 12px;
}

.track-order-title small,
.track-panel-heading small,
.track-summary-card header small,
.track-address-block small,
.track-product-total small {
    display: block;
    color: #997109;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.track-order-title h2 {
    margin: 3px 0;
    color: #214b2d;
    font-size: 1.18rem;
}

.track-order-title p {
    margin: 0;
    color: #7b867e;
    font-size: .7rem;
}

.track-overview-meta {
    display: flex;
    align-items: center;
    gap: 28px;
}

.track-overview-meta > div {
    min-width: 105px;
    padding-left: 22px;
    border-left: 1px solid #e2e8e0;
}

.track-overview-meta > div small {
    display: block;
    margin-bottom: 4px;
    color: #8a948c;
    font-size: .58rem;
    letter-spacing: .08em;
}

.track-overview-meta > div strong {
    display: block;
    max-width: 190px;
    overflow: hidden;
    color: #263c2d;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-progress-card,
.track-panel,
.track-summary-card,
.track-help-card {
    background: #fff;
    border: 1px solid rgba(31,74,43,.11);
    border-radius: 16px;
    box-shadow: 0 13px 36px rgba(24,55,33,.07);
}

.track-progress-card {
    margin-bottom: 18px;
    padding: 22px 24px 27px;
}

.track-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e6ebe4;
}

.track-panel-heading > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.track-heading-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    color: #245331;
    background: #f6efd9;
    border-radius: 10px;
}

.track-panel-heading h2,
.track-summary-card header h2 {
    margin: 3px 0 0;
    color: #214b2d;
    font-size: 1.05rem;
}

.track-current-label,
.track-carrier,
.track-item-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: #2b6840;
    background: #eaf4e9;
    border-radius: 20px;
    font-size: .66rem;
    font-weight: 600;
}

.track-current-label i { color: #54a568; font-size: .42rem; }

.track-stepper {
    display: flex;
    align-items: flex-start;
    max-width: 1050px;
    margin: 4px auto 0;
}

.track-step {
    display: grid;
    flex: 0 0 92px;
    justify-items: center;
    gap: 5px;
    color: #a0a9a2;
    text-align: center;
}

.track-step > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    background: #eef1ec;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #dfe5dd;
    font-size: .78rem;
}

.track-step strong { font-size: .7rem; }
.track-step small { font-size: .57rem; }

.track-step.is-complete,
.track-step.is-current { color: #225331; }
.track-step.is-complete > span { color: #fff; background: #397b4b; box-shadow: 0 0 0 1px #397b4b; }
.track-step.is-current > span { color: #183c24; background: #efbd37; box-shadow: 0 0 0 5px rgba(239,189,55,.18); }

.track-stepper > b {
    flex: 1 1 auto;
    height: 3px;
    margin: 19px -10px 0;
    background: #e4e9e2;
}

.track-stepper > b.is-complete { background: #65a276; }

.track-cancelled-message {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    color: #943d37;
    background: #fff3f1;
    border: 1px solid #f2d5d1;
    border-radius: 12px;
}

.track-cancelled-message > i { font-size: 1.6rem; }
.track-cancelled-message strong { display: block; font-size: .88rem; }
.track-cancelled-message p { margin: 3px 0 0; color: #a96a65; font-size: .7rem; }

.track-content-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 355px;
    align-items: start;
    gap: 18px;
}

.track-content-main { display: grid; gap: 18px; }
.track-panel { padding: 22px; }
.track-panel .track-panel-heading { margin-bottom: 16px; }

.track-event-list { padding: 1px 3px; }

.track-event {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 13px;
    padding: 10px 0 19px;
}

.track-event:not(:last-child)::before {
    position: absolute;
    top: 42px;
    bottom: -3px;
    left: 18px;
    width: 2px;
    content: "";
    background: #dfe6dd;
}

.track-event-marker {
    z-index: 1;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #477a53;
    background: #edf4ec;
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d7e2d7;
    font-size: .65rem;
}

.track-event.is-latest .track-event-marker { color: #183b23; background: #efbd37; box-shadow: 0 0 0 4px rgba(239,189,55,.14); }
.track-event > div small { color: #8a938c; font-size: .62rem; }
.track-event h3 { margin: 3px 0 4px; color: #254b2f; font-size: .83rem; }
.track-event p { margin: 0; color: #768178; font-size: .68rem; }
.track-event p i { width: 15px; color: #c5910c; }
.track-event > b { align-self: start; padding: 4px 8px; color: #805d05; background: #fff1c3; border-radius: 20px; font-size: .57rem; }

.track-no-update {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
    background: linear-gradient(120deg,#f7faf5,#fffdf7);
    border: 1px dashed #ccd9cc;
    border-radius: 12px;
}

.track-no-update > span {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #956c06;
    background: #f5eac9;
    border-radius: 12px;
}

.track-no-update strong { display: block; color: #254b2f; font-size: .82rem; }
.track-no-update p { margin: 3px 0 0; color: #7c867e; font-size: .68rem; }

.track-item-list { display: grid; gap: 1px; }
.track-product-item {
    display: grid;
    grid-template-columns: 74px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e9ede7;
}

.track-product-item:last-child { border-bottom: 0; }
.track-product-image {
    width: 74px;
    height: 84px;
    padding: 4px;
    overflow: hidden;
    background: #f1f1e5;
    border: 1px solid #e0e4da;
    border-radius: 10px;
}

.track-product-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.track-product-copy h3 { margin: 0 0 5px; color: var(--primary-color); font-size: .86rem; }
.track-product-copy p { margin: 0 0 4px; color: #69766d; font-size: .67rem; }
.track-product-copy p i { color: #bf8d0b; }
.track-product-copy small { color: #8a938b; font-size: .62rem; }
.track-product-total { min-width: 100px; text-align: right; }
.track-product-total strong { display: block; margin-top: 4px; color: #214b2d; font-size: .94rem; }

.track-sidebar {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 13px;
}

.track-summary-card { overflow: hidden; padding: 0 20px 20px; }
.track-summary-card > header {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 -20px 18px;
    padding: 18px 20px;
    color: #fff;
    background: linear-gradient(135deg,#255433,#12341e);
}

.track-summary-card > header > span {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    color: #193a23;
    background: #efbd37;
    border-radius: 10px;
}

.track-summary-card header small { color: #e5c665; }
.track-summary-card header h2 { color: #fff; }

.track-address-block {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8ece6;
}

.track-address-block > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #9b7106;
    background: #f8f0d9;
    border-radius: 8px;
}

.track-address-block p { margin: 5px 0 0; color: #5f6d63; font-size: .7rem; line-height: 1.65; }

.track-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    color: #69756c;
    border-bottom: 1px solid #edf0eb;
    font-size: .69rem;
}

.track-detail-row span i { width: 18px; color: #bd8b0c; }
.track-detail-row > strong { color: #254b2f; font-size: .7rem; }
.payment-status { padding: 5px 8px; border-radius: 20px; font-size: .61rem; text-transform: capitalize; }
.payment-completed { color: #286640; background: #e3f3e7; }
.payment-pending { color: #816008; background: #fff0bd; }
.payment-failed { color: #a23e37; background: #fbe5e2; }

.track-price-summary { padding-top: 13px; }
.track-price-summary > div { display: flex; justify-content: space-between; gap: 15px; padding: 5px 0; color: #737e76; font-size: .7rem; }
.track-price-summary > div strong { color: #304737; }
.track-price-summary .track-discount,
.track-price-summary .track-discount strong { color: #3a754b; }
.track-price-summary .track-grand-total { align-items: center; margin-top: 8px; padding-top: 13px; color: #214b2d; border-top: 1px dashed #cdd7cc; font-weight: 600; }
.track-price-summary .track-grand-total strong { color: #214b2d; font-size: 1.08rem; }

.track-help-card {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 30px;
    align-items: center;
    gap: 10px;
    padding: 14px;
}

.track-help-card > span,
.track-help-card > a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #245331;
    background: #f5ecd1;
    border-radius: 10px;
}

.track-help-card h3 { margin: 0 0 2px; color: var(--primary-color); font-size: .78rem; }
.track-help-card p { margin: 0; color: #808a82; font-size: .61rem; }
.track-help-card > a { width: 30px; height: 30px; color: #fff; background: #285a37; text-decoration: none; }
.track-back-link { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; color: #295636 !important; font-size: .7rem; font-weight: 600; text-decoration: none; }

@media (max-width: 991.98px) {
    .track-overview-card { align-items: flex-start; flex-direction: column; }
    .track-overview-meta { justify-content: space-between; width: 100%; padding-top: 17px; border-top: 1px solid #e4e9e2; }
    .track-overview-meta > div:first-child { padding-left: 0; border-left: 0; }
    .track-content-grid { grid-template-columns: 1fr; }
    .track-sidebar { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .track-summary-card { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .track-page-v2 .track-v2-main > .container { padding-right: 11px; padding-left: 11px; }
    .track-overview-card,
    .track-progress-card,
    .track-panel,
    .track-summary-card,
    .track-help-card { border-radius: 13px; }

    .track-overview-card { gap: 16px; padding: 16px 14px; }
    .track-order-icon { flex-basis: 42px; width: 42px; height: 42px; }
    .track-order-title { align-items: flex-start; gap: 10px; }
    .track-order-title h2 { font-size: .9rem; }
    .track-order-title p { font-size: .62rem; }
    .track-overview-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .track-overview-meta > div { min-width: 0; padding: 0; border: 0; }
    .track-overview-meta > div strong { font-size: .72rem; }
    .track-overview-meta .portal-status { grid-column: 1 / -1; justify-self: start; }

    .track-progress-card { padding: 17px 12px 20px; }
    .track-panel-heading { align-items: flex-start; margin-bottom: 16px; padding-bottom: 14px; }
    .track-panel-heading h2 { font-size: .94rem; }
    .track-current-label,
    .track-carrier,
    .track-item-count { padding: 5px 7px; font-size: .57rem; }

    .track-stepper {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        margin-left: 4px;
    }

    .track-step {
        grid-template-columns: 36px minmax(0,1fr) auto;
        align-items: center;
        justify-items: start;
        flex: none;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        text-align: left;
    }

    .track-step > span { width: 34px; height: 34px; font-size: .66rem; }
    .track-step strong { font-size: .7rem; }
    .track-step small { justify-self: end; font-size: .55rem; }
    .track-stepper > b { flex: none; width: 2px; height: 16px; margin: -4px 0 -4px 16px; }

    .track-content-grid,
    .track-content-main { gap: 13px; }
    .track-panel { padding: 16px 14px; }
    .track-event { grid-template-columns: 34px minmax(0,1fr); gap: 10px; }
    .track-event-marker { width: 34px; height: 34px; }
    .track-event:not(:last-child)::before { top: 38px; left: 16px; }
    .track-event > b { display: none; }
    .track-event h3 { font-size: .76rem; }
    .track-event p { font-size: .63rem; }
    .track-no-update { align-items: flex-start; padding: 16px; }

    .track-product-item { grid-template-columns: 62px minmax(0,1fr); gap: 10px; padding: 12px 0; }
    .track-product-image { grid-row: 1 / span 2; width: 62px; height: 72px; }
    .track-product-copy h3 { font-size: .75rem; }
    .track-product-copy p,
    .track-product-copy small { font-size: .59rem; }
    .track-product-total { grid-column: 2; min-width: 0; text-align: left; }
    .track-product-total small { display: none; }
    .track-product-total strong { margin: 0; font-size: .82rem; }

    .track-sidebar { grid-template-columns: 1fr; }
    .track-summary-card { grid-column: auto; }
    .track-address-block p { font-size: .67rem; }
    .track-help-card { padding: 13px; }
}

@media (max-width: 390px) {
    .track-overview-meta { grid-template-columns: 1fr; }
    .track-overview-meta .portal-status { grid-column: auto; }
    .track-panel-heading > div { gap: 8px; }
    .track-heading-icon { flex-basis: 36px; width: 36px; height: 36px; }
    .track-panel-heading small { font-size: .52rem; }
    .track-current-label { max-width: 100px; text-align: center; }
}

/* ==========================================
   COMPACT SITE HEADER — 20% SMALLER
   Keeps the existing navbar design/theme while
   reducing its visual height on desktop + mobile.
   ========================================== */
.site-navbar {
    min-height: 61px;
    padding: 8px 0 !important;
}

.site-navbar .navbar-brand {
    gap: 8px;
    margin-right: 19px;
    font-size: clamp(0.9rem, 1.6vw, 1.16rem);
    line-height: 1.05;
}

.site-navbar .brand-mark,
.brand-mark {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
}

.site-navbar .navbar-nav {
    gap: 3px;
}

.site-navbar .navbar-nav .nav-link {
    gap: 6px;
    margin: 0 4px;
    padding: 8px 9px;
    font-size: 0.88rem;
    line-height: 1.15;
}

.site-navbar .nav-menu-icon {
    width: 15px;
    font-size: 0.76rem;
}

.site-navbar .badge {
    min-width: 20px;
    padding: 4px 6px;
    font-size: 0.68rem;
}

.site-navbar .nav-login-btn {
    margin-left: 6px;
    padding: 8px 14px;
    font-size: 0.86rem;
}

.site-navbar .dropdown-item {
    gap: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.86rem;
}

@media (max-width: 991.98px) {
    .site-navbar {
        min-height: 54px;
        padding: 6px 0 !important;
    }

    .site-navbar .offcanvas-header {
        padding: 17px 16px;
    }

    .site-navbar .offcanvas-body {
        padding: 14px 12px;
    }

    .site-navbar .navbar-nav .nav-link {
        padding: 10px 11px;
        font-size: 0.86rem;
    }

    .mobile-cart-link,
    .mobile-header-actions .navbar-toggler {
        width: 35px;
        height: 35px;
        border-radius: 8px;
    }

    .mobile-cart-link {
        font-size: 0.9rem;
    }

    .mobile-header-actions .navbar-toggler {
        padding: 6px;
    }

    .site-navbar .mobile-cart-link .badge {
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 2px 4px;
        border-width: 1px;
        font-size: 0.56rem;
    }
}

@media (max-width: 767.98px) {
    .site-navbar .navbar-brand {
        gap: 6px;
        margin-right: 6px;
        font-size: 0.68rem;
        line-height: 1.05;
    }

    .site-navbar .brand-mark,
    .brand-mark {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .mobile-header-actions {
        gap: 6px;
    }
}

@media (max-width: 390px) {
    .site-navbar .navbar-brand {
        gap: 5px;
        font-size: 0.66rem;
    }

    .site-navbar .brand-mark,
    .brand-mark {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .mobile-cart-link,
    .mobile-header-actions .navbar-toggler {
        width: 34px;
        height: 34px;
    }
}

/* ==========================================
   HOME PAGE — CATEGORY MARQUEE + PREMIUM BLOCKS
   ========================================== */
.home-trust-strip {
    position: relative;
    z-index: 3;
    padding: 15px 0;
    background: #fff;
    border-bottom: 1px solid rgba(var(--primary-rgb), .09);
}

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

.home-trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(var(--primary-rgb), .035);
}

.home-trust-item > i {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary-color);
    background: rgba(var(--secondary-rgb), .16);
}

.home-trust-item span { min-width: 0; }
.home-trust-item strong,
.home-trust-item small { display: block; }
.home-trust-item strong { color: var(--dark-color); font-size: .82rem; line-height: 1.2; }
.home-trust-item small { margin-top: 3px; color: #6f786f; font-size: .67rem; line-height: 1.25; }

.home-category-section {
    overflow: hidden;
    padding: 48px 0 42px;
    background:
        radial-gradient(circle at 10% 20%, rgba(var(--secondary-rgb), .08), transparent 24%),
        linear-gradient(180deg, #fff 0%, rgba(var(--primary-rgb), .025) 100%);
}

.home-section-heading {
    max-width: 620px;
    margin-bottom: 27px;
}

.home-section-heading-centered {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.home-section-kicker {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--primary-color);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-section-heading h2 {
    margin: 0;
    color: var(--dark-color);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.home-section-heading p {
    margin: 8px 0 0;
    color: #727a73;
    font-size: .92rem;
}

.category-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 0 13px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.category-marquee-track {
    display: flex;
    width: max-content;
    animation: categoryMarqueeLeftToRight 30s linear infinite;
    will-change: transform;
}

.category-marquee:hover .category-marquee-track { animation-play-state: paused; }

.category-marquee-group {
    display: flex;
    flex: none;
    align-items: flex-start;
    gap: 18px;
    padding-right: 18px;
}

.category-marquee-item {
    display: flex;
    flex: 0 0 126px;
    width: 126px;
    align-items: center;
    flex-direction: column;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.category-icon-shell {
    position: relative;
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), .09);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.category-icon-shell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-icon-fallback {
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--primary-color);
    background: linear-gradient(135deg, rgba(var(--secondary-rgb), .14), rgba(var(--primary-rgb), .09));
    font-size: 1.6rem;
}

.category-marquee-item:hover .category-icon-shell {
    transform: translateY(-4px) scale(1.03);
    border-color: rgba(var(--secondary-rgb), .65);
    box-shadow: 0 12px 28px rgba(var(--primary-rgb), .14);
}

.category-marquee-name {
    display: -webkit-box;
    max-width: 122px;
    margin-top: 10px;
    overflow: hidden;
    color: var(--dark-color);
    font-size: .79rem;
    font-weight: 750;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.category-marquee-item small {
    margin-top: 4px;
    color: #879087;
    font-size: .62rem;
}

@keyframes categoryMarqueeLeftToRight {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

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

.home-care-story {
    padding: 12px 0 58px;
    background: #fff;
}

.home-care-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .06), rgba(var(--secondary-rgb), .08));
    box-shadow: 0 18px 50px rgba(var(--primary-rgb), .08);
}

.home-care-copy { padding: 46px 48px; }
.home-care-copy h2 {
    max-width: 650px;
    margin: 0;
    color: var(--dark-color);
    font-size: clamp(1.75rem, 3.1vw, 2.65rem);
    font-weight: 800;
    letter-spacing: -.04em;
}
.home-care-copy > p { max-width: 650px; margin: 14px 0 22px; color: #657067; line-height: 1.75; }

.home-care-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 25px;
}
.home-care-points span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(var(--primary-rgb), .09);
    border-radius: 999px;
    color: var(--dark-color);
    background: rgba(255,255,255,.72);
    font-size: .72rem;
    font-weight: 650;
}
.home-care-points i { color: var(--primary-color); font-size: .65rem; }
.home-care-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border-radius: 11px;
    color: #fff;
    background: var(--primary-color);
    font-size: .8rem;
    font-weight: 750;
}
.home-care-cta:hover { color: #fff; background: var(--primary-dark-color); }

.home-care-visual {
    position: relative;
    display: grid;
    min-height: 320px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 30%, rgba(var(--secondary-rgb), .26), transparent 26%),
        linear-gradient(135deg, var(--primary-color), var(--primary-dark-color));
}
.home-care-visual::before,
.home-care-visual::after {
    position: absolute;
    content: '';
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
}
.home-care-visual::before { width: 260px; height: 260px; top: -90px; right: -80px; }
.home-care-visual::after { width: 180px; height: 180px; bottom: -70px; left: -55px; }
.home-care-badge {
    position: relative;
    z-index: 2;
    display: grid;
    width: 190px;
    height: 190px;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.13);
    backdrop-filter: blur(8px);
}
.home-care-badge strong { font-size: 1.18rem; }
.home-care-badge small { margin-top: 5px; color: rgba(255,255,255,.7); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.home-care-leaf { position: absolute; color: rgba(255,255,255,.18); font-size: 3.2rem; }
.home-care-leaf-one { top: 42px; left: 42px; transform: rotate(-22deg); }
.home-care-leaf-two { right: 38px; bottom: 45px; transform: rotate(17deg); }

@media (max-width: 991.98px) {
    .home-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-care-panel { grid-template-columns: 1fr; }
    .home-care-visual { min-height: 220px; }
}

@media (max-width: 767.98px) {
    .home-trust-strip { padding: 9px 0; }
    .home-trust-grid { gap: 6px; }
    .home-trust-item { gap: 8px; padding: 8px; border-radius: 11px; }
    .home-trust-item > i { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: .78rem; }
    .home-trust-item strong { font-size: .68rem; }
    .home-trust-item small { font-size: .56rem; }

    .home-category-section { padding: 34px 0 28px; }
    .home-section-heading { margin-bottom: 18px; padding: 0 2px; }
    .home-section-heading p { font-size: .78rem; }
    .category-marquee { -webkit-mask-image: none; mask-image: none; }
    .category-marquee-track { animation-duration: 24s; }
    .category-marquee-group { gap: 10px; padding-right: 10px; }
    .category-marquee-item { flex-basis: 96px; width: 96px; }
    .category-icon-shell { width: 68px; height: 68px; }
    .category-marquee-name { max-width: 92px; margin-top: 7px; font-size: .66rem; }
    .category-marquee-item small { font-size: .53rem; }

    .products#products { padding-top: 38px !important; padding-bottom: 42px !important; }
    .home-care-story { padding: 4px 0 42px; }
    .home-care-panel { border-radius: 18px; }
    .home-care-copy { padding: 28px 21px; }
    .home-care-copy > p { margin: 11px 0 18px; font-size: .82rem; line-height: 1.6; }
    .home-care-points { gap: 6px; margin-bottom: 19px; }
    .home-care-points span { padding: 7px 9px; font-size: .62rem; }
    .home-care-visual { min-height: 170px; }
    .home-care-badge { width: 126px; height: 126px; }
    .home-care-badge strong { font-size: .88rem; }
    .home-care-badge small { max-width: 90px; text-align: center; font-size: .5rem; }
    .home-care-leaf { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .category-marquee { overflow-x: auto; scrollbar-width: none; }
    .category-marquee::-webkit-scrollbar { display: none; }
    .category-marquee-track { animation: none; }
    .category-marquee-group[aria-hidden="true"] { display: none; }
}

/* ======================================================================
   HOME CATEGORY V2 — CENTERED HEADING + SQUARE MARQUEE + CATEGORY SHELVES
   ====================================================================== */
.home-category-section .home-section-heading-centered {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.home-category-section .category-marquee {
    padding: 10px 0 16px;
}

.home-category-section .category-marquee-group {
    align-items: stretch;
    gap: 16px;
    padding-right: 16px;
}

.home-category-section .category-marquee-item {
    display: grid;
    flex: 0 0 132px;
    width: 132px;
    min-height: 132px;
    padding: 12px 10px 10px;
    place-items: center;
    align-content: center;
    border: 1px solid rgba(var(--primary-rgb), .10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(var(--primary-rgb), .07);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.home-category-section .category-marquee-item:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), .24);
    box-shadow: 0 13px 30px rgba(var(--primary-rgb), .12);
}

.home-category-section .category-icon-shell {
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 13px;
    background: rgba(var(--primary-rgb), .045);
    box-shadow: none;
}

.home-category-section .category-marquee-item:hover .category-icon-shell {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.home-category-section .category-marquee-name {
    width: 100%;
    max-width: 108px;
    margin-top: 8px;
    color: var(--dark-color);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.18;
}

.home-category-section .category-marquee-item small {
    margin-top: 3px;
    font-size: .56rem;
}

.home-category-previews {
    padding: 8px 0 24px;
    background: #fff;
}

.home-category-shelf {
    padding: 27px 0 30px;
    border-top: 1px solid rgba(var(--primary-rgb), .08);
}

.home-category-shelf:first-child {
    border-top: 0;
}

.home-category-shelf-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.home-category-shelf-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--primary-color);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-category-shelf-head h3 {
    margin: 0;
    color: var(--dark-color);
    font-size: clamp(1.18rem, 2.1vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.home-category-view-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    color: var(--primary-color);
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
}

.home-category-view-all:hover {
    color: var(--primary-dark-color);
}

.home-category-product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.home-category-product-card {
    flex: 0 0 calc((100% - 42px) / 4);
    max-width: calc((100% - 42px) / 4);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .085);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(var(--primary-rgb), .055);
    transition: transform .22s ease, box-shadow .22s ease;
}

.home-category-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(var(--primary-rgb), .10);
}

.home-category-product-image {
    position: relative;
    display: block;
    aspect-ratio: 1 / .82;
    overflow: hidden;
    background: rgba(var(--primary-rgb), .035);
}

.home-category-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform .25s ease;
}

.home-category-product-card:hover .home-category-product-image img {
    transform: scale(1.035);
}

.home-category-product-image > span {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 4px 7px;
    border-radius: 7px;
    color: #fff;
    background: var(--primary-color);
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
}

.home-category-product-body {
    padding: 12px 13px 13px;
}

.home-category-product-body > small {
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
    color: #7b847d;
    font-size: .59rem;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-category-product-body h4 {
    min-height: 2.35em;
    margin: 0 0 11px;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.2;
}

.home-category-product-body h4 a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--dark-color);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-category-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.home-category-product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}

.home-category-product-price strong {
    color: var(--primary-color);
    font-size: .94rem;
}

.home-category-product-price del {
    color: #9aa09b;
    font-size: .60rem;
}

.home-category-cart-btn {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--primary-color);
    font-size: .75rem;
    transition: transform .18s ease, background .18s ease;
}

.home-category-cart-btn:hover {
    transform: translateY(-1px);
    background: var(--primary-dark-color);
}

@media (max-width: 991.98px) {
    .home-category-product-card {
        flex-basis: calc((100% - 14px) / 2);
        max-width: calc((100% - 14px) / 2);
    }
}

@media (max-width: 767.98px) {
    .home-category-section .category-marquee-group {
        gap: 9px;
        padding-right: 9px;
    }

    .home-category-section .category-marquee-item {
        flex-basis: 96px;
        width: 96px;
        min-height: 96px;
        padding: 8px 6px;
        border-radius: 12px;
    }

    .home-category-section .category-icon-shell {
        width: 51px;
        height: 51px;
        border-radius: 10px;
    }

    .home-category-section .category-marquee-name {
        max-width: 84px;
        margin-top: 6px;
        font-size: .60rem;
    }

    .home-category-section .category-marquee-item small {
        display: none;
    }

    .home-category-previews {
        padding-top: 0;
    }

    .home-category-shelf {
        padding: 20px 0 23px;
    }

    .home-category-shelf-head {
        align-items: center;
        margin-bottom: 11px;
    }

    .home-category-shelf-kicker {
        font-size: .53rem;
    }

    .home-category-shelf-head h3 {
        font-size: 1.02rem;
    }

    .home-category-view-all {
        font-size: .62rem;
    }

    .home-category-product-grid {
        gap: 8px;
    }

    .home-category-product-card {
        flex-basis: calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
        border-radius: 12px;
    }

    .home-category-product-image img {
        padding: 7px;
    }

    .home-category-product-body {
        padding: 9px;
    }

    .home-category-product-body > small {
        margin-bottom: 4px;
        font-size: .51rem;
    }

    .home-category-product-body h4 {
        min-height: 2.3em;
        margin-bottom: 8px;
        font-size: .66rem;
    }

    .home-category-product-price strong {
        font-size: .80rem;
    }

    .home-category-product-price del {
        display: none;
    }

    .home-category-cart-btn {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: .66rem;
    }
}

/* ======================================================================
   HOME CATEGORY — MANUAL ARROW SLIDER (NO AUTO MARQUEE)
   ====================================================================== */
.home-category-section .category-slider-shell {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
}

.home-category-section .category-marquee {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 2px 16px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.home-category-section .category-marquee::-webkit-scrollbar {
    display: none;
}

.home-category-section .category-marquee-track {
    display: block;
    width: max-content;
    animation: none !important;
    transform: none !important;
}

.home-category-section .category-marquee-group {
    display: flex;
    width: max-content;
    gap: 16px;
    padding: 0 2px;
}

.home-category-section .category-marquee-item {
    scroll-snap-align: start;
}

.home-category-section .category-slider-arrow {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(var(--primary-rgb), .16);
    border-radius: 12px;
    color: var(--primary-color);
    background: #fff;
    box-shadow: 0 8px 22px rgba(var(--primary-rgb), .10);
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, background .2s ease, opacity .2s ease;
}

.home-category-section .category-slider-arrow:hover:not(:disabled) {
    transform: translateY(-2px);
    color: #fff;
    background: var(--primary-color);
}

.home-category-section .category-slider-arrow:disabled {
    opacity: .32;
    cursor: default;
    box-shadow: none;
}

.home-category-section .category-slider-arrow i {
    font-size: .82rem;
}

@media (max-width: 767.98px) {
    .home-category-section .category-slider-shell {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 7px;
    }

    .home-category-section .category-slider-arrow {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .home-category-section .category-slider-arrow i {
        font-size: .68rem;
    }

    .home-category-section .category-marquee {
        padding-top: 6px;
        padding-bottom: 10px;
    }

    .home-category-section .category-marquee-group {
        gap: 9px;
    }
}

/* ======================================================================
   HOME FEATURED PRODUCTS — LARGE VERSION OF CATEGORY PRODUCT CARDS
   ====================================================================== */
.home-featured-products {
    padding: 52px 0 58px;
    background: #fff;
}

.home-featured-heading {
    margin-bottom: 27px;
}

.home-featured-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.home-featured-card {
    flex: 0 1 calc((100% - 44px) / 3);
    max-width: 390px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), .09);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 28px rgba(var(--primary-rgb), .07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-featured-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--primary-rgb), .16);
    box-shadow: 0 16px 36px rgba(var(--primary-rgb), .12);
}

.home-featured-image {
    position: relative;
    display: block;
    aspect-ratio: 1 / .84;
    overflow: hidden;
    background: rgba(var(--primary-rgb), .035);
}

.home-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform .25s ease;
}

.home-featured-card:hover .home-featured-image img {
    transform: scale(1.035);
}

.home-featured-image > span {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 9px;
    color: #fff;
    background: var(--primary-color);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.home-featured-body {
    padding: 17px 18px 18px;
}

.home-featured-body > small {
    display: block;
    margin-bottom: 6px;
    overflow: hidden;
    color: #7b847d;
    font-size: .68rem;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-featured-body h3 {
    min-height: 2.4em;
    margin: 0 0 15px;
    font-size: .94rem; /* ~20% larger than .78rem category product name */
    font-weight: 760;
    line-height: 1.2;
}

.home-featured-body h3 a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--dark-color);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-featured-body h3 a:hover {
    color: var(--primary-color);
}

.home-featured-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.home-featured-price strong {
    color: var(--primary-color);
    font-size: 1.12rem;
    line-height: 1;
}

.home-featured-price del {
    color: #9aa09b;
    font-size: .70rem;
}

.home-featured-cart-btn {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: var(--primary-color);
    font-size: .86rem;
    transition: transform .18s ease, background .18s ease;
}

.home-featured-cart-btn:hover {
    transform: translateY(-1px);
    background: var(--primary-dark-color);
}

@media (max-width: 991.98px) {
    .home-featured-card {
        flex-basis: calc((100% - 18px) / 2);
        max-width: 430px;
    }
}

@media (max-width: 767.98px) {
    .home-featured-products {
        padding: 34px 0 40px;
    }

    .home-featured-heading {
        margin-bottom: 18px;
    }

    .home-featured-grid {
        gap: 10px;
    }

    .home-featured-card {
        flex-basis: calc((100% - 10px) / 2);
        max-width: 280px;
        border-radius: 13px;
    }

    .home-featured-image img {
        padding: 9px;
    }

    .home-featured-image > span {
        top: 8px;
        left: 8px;
        padding: 4px 7px;
        border-radius: 7px;
        font-size: .54rem;
    }

    .home-featured-body {
        padding: 10px;
    }

    .home-featured-body > small {
        margin-bottom: 4px;
        font-size: .56rem;
    }

    .home-featured-body h3 {
        min-height: 2.4em;
        margin-bottom: 10px;
        font-size: .79rem; /* ~20% larger than .66rem mobile category product name */
    }

    .home-featured-price strong {
        font-size: .92rem;
    }

    .home-featured-price del {
        display: none;
    }

    .home-featured-cart-btn {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: .70rem;
    }
}

@media (max-width: 360px) {
    .home-featured-grid {
        gap: 8px;
    }

    .home-featured-card {
        flex-basis: calc((100% - 8px) / 2);
    }

    .home-featured-body h3 {
        font-size: .76rem;
    }
}


/* ======================================================================
   HOME CATEGORY PRODUCT SHELVES — EXACT CENTERING FOR INCOMPLETE ROWS
   Keeps 4-product shelves full width while centering 1/2/3 product groups.
   ====================================================================== */
.home-category-product-grid {
    width: 100%;
    margin-inline: auto;
    justify-content: center !important;
}

@media (min-width: 992px) {
    .home-category-product-grid.home-category-product-count-1,
    .home-category-product-grid.home-category-product-count-2,
    .home-category-product-grid.home-category-product-count-3 {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 346px);
        grid-template-columns: none !important;
        justify-content: center !important;
        align-items: stretch;
        gap: 18px;
    }

    .home-category-product-grid.home-category-product-count-1 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-2 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-3 .home-category-product-card {
        width: 100%;
        max-width: 346px;
        flex: none !important;
    }
}

@media (max-width: 991.98px) {
    .home-category-product-grid.home-category-product-count-1,
    .home-category-product-grid.home-category-product-count-2,
    .home-category-product-grid.home-category-product-count-3 {
        justify-content: center !important;
    }
}

@media (max-width: 767.98px) {
    .home-category-product-grid.home-category-product-count-1 {
        display: flex !important;
        justify-content: center !important;
    }

    .home-category-product-grid.home-category-product-count-1 .home-category-product-card {
        flex: 0 0 min(72vw, 250px) !important;
        width: min(72vw, 250px);
        max-width: 250px;
    }

    .home-category-product-grid.home-category-product-count-2 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, min(44vw, 210px))) !important;
        justify-content: center !important;
        gap: 8px;
    }

    .home-category-product-grid.home-category-product-count-2 .home-category-product-card {
        width: 100%;
        max-width: none;
        flex: none !important;
    }
}


/* ======================================================================
   HOME CATEGORY FINAL SIZE TUNING — SMALLER THAN FEATURED + TRUE CENTER
   ====================================================================== */
.home-category-section .home-section-heading.home-section-heading-centered {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 24px !important;
    text-align: center !important;
}

.home-category-section .home-section-heading.home-section-heading-centered .home-section-kicker,
.home-category-section .home-section-heading.home-section-heading-centered h2,
.home-category-section .home-section-heading.home-section-heading-centered p {
    width: 100%;
    text-align: center !important;
}

/* Category shelf cards stay intentionally smaller than Featured Products. */
.home-category-product-grid,
.home-category-product-grid.home-category-product-count-1,
.home-category-product-grid.home-category-product-count-2,
.home-category-product-grid.home-category-product-count-3,
.home-category-product-grid.home-category-product-count-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch;
    gap: 14px !important;
    width: 100%;
    margin-inline: auto;
}

.home-category-product-grid .home-category-product-card,
.home-category-product-grid.home-category-product-count-1 .home-category-product-card,
.home-category-product-grid.home-category-product-count-2 .home-category-product-card,
.home-category-product-grid.home-category-product-count-3 .home-category-product-card,
.home-category-product-grid.home-category-product-count-4 .home-category-product-card {
    flex: 0 0 248px !important;
    width: 248px !important;
    max-width: 248px !important;
}

.home-category-product-image {
    aspect-ratio: 1 / .74;
}

.home-category-product-body {
    padding: 10px 11px 11px;
}

.home-category-product-body h4 {
    margin-bottom: 9px;
    font-size: .74rem;
}

.home-category-product-price strong {
    font-size: .90rem;
}

.home-category-cart-btn {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .home-category-product-grid .home-category-product-card,
    .home-category-product-grid.home-category-product-count-1 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-2 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-3 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-4 .home-category-product-card {
        flex-basis: 220px !important;
        width: 220px !important;
        max-width: 220px !important;
    }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .home-category-product-grid .home-category-product-card,
    .home-category-product-grid.home-category-product-count-1 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-2 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-3 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-4 .home-category-product-card {
        flex-basis: 205px !important;
        width: 205px !important;
        max-width: 205px !important;
    }
}

@media (max-width: 767.98px) {
    .home-category-section .home-section-heading.home-section-heading-centered {
        margin-bottom: 16px !important;
        padding-inline: 0;
    }

    .home-category-product-grid,
    .home-category-product-grid.home-category-product-count-1,
    .home-category-product-grid.home-category-product-count-2,
    .home-category-product-grid.home-category-product-count-3,
    .home-category-product-grid.home-category-product-count-4 {
        gap: 8px !important;
    }

    .home-category-product-grid .home-category-product-card,
    .home-category-product-grid.home-category-product-count-1 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-2 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-3 .home-category-product-card,
    .home-category-product-grid.home-category-product-count-4 .home-category-product-card {
        flex: 0 0 min(44vw, 165px) !important;
        width: min(44vw, 165px) !important;
        max-width: 165px !important;
    }

    .home-category-product-image {
        aspect-ratio: 1 / .72;
    }

    .home-category-product-body {
        padding: 8px;
    }

    .home-category-product-body h4 {
        font-size: .63rem;
        margin-bottom: 7px;
    }

    .home-category-product-price strong {
        font-size: .76rem;
    }

    .home-category-cart-btn {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: .62rem;
    }
}


/* ======================================================================
   HOME CATEGORY SLIDER — CENTER CATEGORY DATA IN THE AVAILABLE AREA
   Keeps the visible category group centered when all items fit.
   ====================================================================== */
.home-category-section .category-marquee {
    display: flex;
    justify-content: center;
}

.home-category-section .category-marquee-track {
    display: flex;
    min-width: 100%;
    width: max-content;
    justify-content: center;
}

.home-category-section .category-marquee-group {
    width: max-content;
    margin-inline: auto;
    justify-content: center;
}


/* VASU product hero — original botanical artwork, full opacity and responsive art direction (2026-10-26). */
.hero-slide-one.hero-slide-product {
    padding: 0;
    overflow: hidden;
    background: #1d3e1e;
}
.hero-slide-one.hero-slide-product::after { content: none; }
.hero-product-link, .hero-product-picture {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    width: 100%;
}
.hero-product-link { z-index: 2; cursor: pointer; }
.hero-slide-one .hero-product-image {
    display: block;
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    filter: none;
    border: 0;
}
@media (min-width: 1200px) {
    .hero-section, .hero-slide { height: clamp(400px, 31.25vw, 600px); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-section, .hero-slide { height: clamp(360px, 50vw, 600px); }
}
@media (max-width: 767.98px) {
    .hero-section, .hero-slide { height: clamp(360px, 120vw, 600px); }
}


/* Home hero redesign: readable product caption, centered arrows & slide indicator. */
.hero-section .owl-stage-outer,
.hero-section .owl-stage,
.hero-section .owl-item,
.hero-section .hero-carousel { height: 100%; }
.hero-slide-one.hero-slide-product .hero-product-link { z-index: 1; }
.hero-spotlight-shade {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,35,19,.12) 0%, rgba(8,35,19,.08) 35%, rgba(8,35,19,.48) 68%, rgba(8,35,19,.82) 100%);
}
.hero-spotlight-copy {
    position: absolute; z-index: 3; left: 50%; bottom: clamp(34px, 5.2vw, 62px);
    transform: translateX(-50%); width: min(46vw, 760px);
    color: #fff; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.hero-spotlight-kicker {
    display: inline-flex; gap: 9px; align-items: center; justify-content: center;
    font-size: clamp(.72rem,.9vw,.96rem); letter-spacing: .13em; font-weight: 800;
    color: #ffe5a0; text-transform: uppercase;
}
.hero-spotlight-copy h1 {
    font-size: clamp(2rem, 3.2vw, 3.65rem); line-height: 1.07;
    letter-spacing: -.035em; font-weight: 800; margin: 16px 0 13px;
    text-shadow: 0 2px 12px rgba(0,0,0,.14);
}
.hero-spotlight-copy p { color: #f1f6e8; font-size: clamp(.92rem,1.3vw,1.14rem); margin-bottom: 22px; }
.hero-spotlight-cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: #e5b640; color: #17351d; text-decoration: none;
    border-radius: 40px; font-weight: 800; padding: 11px 21px;
    box-shadow: 0 8px 23px rgba(0,0,0,.19); transition: background .2s, transform .2s;
}
.hero-spotlight-cta:hover { color: #17351d; background: #f4ca62; transform: translateY(-2px); }
.hero-slider-control {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 12;
    display: grid; place-items: center; height: 48px; width: 48px;
    padding: 0; border: 1px solid rgba(255,255,255,.5); border-radius: 50%;
    background: rgba(12,39,24,.56); backdrop-filter: blur(7px);
    color: #fff; cursor: pointer; transition: background .2s, border-color .2s;
}
.hero-slider-control:hover, .hero-slider-control:focus-visible {
    background: rgba(9,65,36,.94); border-color: #e5b640; outline: 2px solid #e5b640; outline-offset: 3px;
}
.hero-slider-prev { left: 20px; }
.hero-slider-next { right: 20px; }
.hero-slide-counter {
    position: absolute; z-index: 12; bottom: 20px; right: clamp(24px,4vw,70px);
    display: flex; align-items: baseline; gap: 7px;
    color: #fff; background: rgba(10,35,20,.7); border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px; padding: 6px 13px; font-size: .82rem; letter-spacing: .05em;
}
.hero-slide-counter strong { color: #f3c45b; font-size: 1rem; }
.hero-slide-counter-divider { opacity: .65; }
.hero-autoplay-progress {
    position: absolute; bottom: 0; left: 0; right: 0; height: 4px; z-index: 13;
    background: rgba(255,255,255,.22); pointer-events: none;
}
.hero-autoplay-progress span { display: block; width: 0; height: 100%; background: #efc04d; }
.hero-autoplay-progress span.is-playing { animation: vasuHeroProgress 5s linear forwards; }
.hero-section:hover .hero-autoplay-progress span { animation-play-state: paused; }
@keyframes vasuHeroProgress { from { width: 0; } to { width: 100%; } }
.hero-carousel .owl-dots { z-index: 11; bottom: 15px; pointer-events: auto; }
.hero-carousel .owl-dots .owl-dot span { background: rgba(255,255,255,.58); }
.hero-carousel .owl-dots .owl-dot.active span { background: #f1c452; }
.hero-slide-two .hero-text, .hero-slide-three .hero-text { max-width: min(700px,72vw); }
.hero-slide-two .hero-text h2, .hero-slide-three .hero-text h2 { font-weight: 800; }
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-spotlight-copy { left: 50%; bottom: 40px; width: min(58vw, 620px); }
    .hero-spotlight-copy h1 { font-size: clamp(1.8rem,3.1vw,3rem); }
}
@media (max-width: 767.98px) {
    .hero-spotlight-shade { background: linear-gradient(180deg,rgba(8,35,19,.06) 0%,rgba(8,35,19,.12) 30%,rgba(6,27,15,.62) 68%,rgba(6,27,15,.93) 100%); }
    .hero-spotlight-copy { top: auto; left: 50%; bottom: 47px; transform: translateX(-50%); width: min(calc(100% - 88px), 520px); right: auto; }
    .hero-spotlight-copy h1 { font-size: clamp(1.35rem,5vw,1.75rem); margin: 6px 0 4px; line-height: 1.1; }
    .hero-spotlight-copy p { font-size: .82rem; margin: 0 0 11px; }
    .hero-spotlight-kicker { font-size: .62rem; letter-spacing: .1em; }
    .hero-spotlight-cta { padding: 7px 13px; font-size: .75rem; gap: 6px; }
    .hero-slider-control { width: 36px; height: 36px; font-size: .85rem; }
    .hero-slider-prev { left: 9px; }
    .hero-slider-next { right: 9px; }
    .hero-slide-counter { bottom: 13px; right: 13px; padding: 4px 9px; font-size: .68rem; }
    .hero-slide-counter strong { font-size: .76rem; }
    .hero-carousel .owl-dots { bottom: 12px; right: 95px; }
    .hero-carousel .owl-dots .owl-dot span { width: 7px; height: 7px; margin: 5px 3px; }
    .hero-carousel .owl-dots .owl-dot.active span { width: 16px; }
    .hero-slide-two .hero-text, .hero-slide-three .hero-text { padding: 30px 20px; max-width: calc(100% - 70px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-autoplay-progress span.is-playing { animation: none; width: 100%; }
    .hero-spotlight-cta { transition: none; }
}


/* ======================================================================
   VASU 26 OCT 2026 — COMPACT RESPONSIVE SLIDER & TRUE 3-LINE MENU
   Fix: banner overflow on narrow desktop / tablet + menu visibility.
   ====================================================================== */
/* Confine every slide and OwlCarousel wrapper to one predictable height. */
.hero-section,
.hero-section .hero-slide {
    height: clamp(385px, 27vw, 480px);
}
.hero-section { overflow: hidden; width: 100%; }
.hero-section .hero-carousel,
.hero-section .owl-stage-outer,
.hero-section .owl-stage,
.hero-section .owl-item { height: 100% !important; }
.hero-section .hero-slide { min-height: 0; max-height: 100%; overflow: hidden; }
.hero-section .hero-slide-one.hero-slide-product { padding: 0; }
.hero-section .hero-slide-two, .hero-section .hero-slide-three { padding: 16px; }
.hero-section .hero-slide-one .hero-product-image { object-fit: cover; object-position: center center; }
.hero-section .hero-slider-control { top: 50%; transform: translateY(-50%); }
.hero-section .hero-slide-two .hero-text,
.hero-section .hero-slide-three .hero-text {
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fix clickable menu size, icon centering, and right-side clipping. */
.site-navbar .container { min-width: 0; }
.site-navbar .navbar-brand { min-width: 0; }
.site-navbar .mobile-header-actions { flex: 0 0 auto; min-width: max-content; }
.site-navbar .mobile-header-actions .navbar-toggler {
    box-sizing: border-box;
    display: inline-flex !important;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    color: #fff;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 9px;
    background: rgba(255,255,255,.045);
    line-height: 1;
    box-shadow: none;
}
.site-navbar .mobile-header-actions .navbar-toggler:hover,
.site-navbar .mobile-header-actions .navbar-toggler:focus-visible {
    border-color: #e8b93f;
    background: rgba(255,255,255,.12);
    outline: 2px solid #e8b93f;
    outline-offset: 2px;
}
.site-navbar .menu-bars {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 20px;
    height: 22px;
}
.site-navbar .menu-bars > span {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 2.5px;
    border-radius: 5px;
    background: #fff;
}
.site-navbar .navbar-toggler[aria-expanded="true"] .menu-bars > span { background: #f4cb5e; }

@media (min-width: 1200px) {
    .hero-section, .hero-section .hero-slide { height: clamp(385px, 27vw, 480px); }
    .hero-section .hero-spotlight-copy { left: 50%; bottom: 44px; width: min(48vw, 720px); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-section, .hero-section .hero-slide { height: clamp(365px, 36vw, 425px); }
    .hero-section .hero-spotlight-copy { left: 50%; bottom: 38px; width: min(56vw, 620px); }
    .hero-section .hero-spotlight-copy h1 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section, .hero-section .hero-slide { height: clamp(345px, 42vw, 390px); }
    .hero-section .hero-spotlight-copy { left: 50%; bottom: 36px; width: min(62vw, 520px); }
    .hero-section .hero-spotlight-copy h1 { font-size: clamp(1.65rem, 3vw, 2.1rem); margin: 10px 0 8px; }
    .hero-section .hero-spotlight-copy p { margin-bottom: 12px; }
    .hero-section .hero-spotlight-cta { padding: 9px 13px; font-size: .84rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Narrow PC browser windows are not portrait phones — use landscape crop. */
    .hero-section, .hero-section .hero-slide { height: clamp(345px, 55vw, 400px); }
    .hero-section .hero-spotlight-shade {
        background: linear-gradient(0deg, rgba(5,29,16,.93) 0%, rgba(5,29,16,.72) 33%, rgba(5,29,16,0) 74%);
    }
    .hero-section .hero-spotlight-copy { left: 50%; right: auto; width: min(calc(100% - 96px), 500px); bottom: 35px; transform: translateX(-50%); }
    .hero-section .hero-spotlight-copy h1 { font-size: clamp(1.35rem,3.3vw,1.65rem); }
    .hero-section .hero-spotlight-copy p { margin-bottom: 9px; }
    .hero-section .hero-spotlight-cta { padding: 8px 14px; }
    .hero-section .hero-slide-two .hero-text,
    .hero-section .hero-slide-three .hero-text { padding: 22px 18px; max-width: calc(100% - 90px); }
}
@media (max-width: 575.98px) {
    .hero-section, .hero-section .hero-slide { height: clamp(415px, 102vw, 485px); }
    .hero-section .hero-spotlight-copy { left: 50%; right: auto; width: min(calc(100% - 72px), 430px); bottom: 41px; transform: translateX(-50%); }
    .hero-section .hero-spotlight-shade {
        background: linear-gradient(0deg, rgba(5,29,16,.96) 0%, rgba(5,29,16,.77) 24%, rgba(5,29,16,0) 59%);
    }
    .hero-section .hero-spotlight-copy h1 { font-size: clamp(1.22rem,5.1vw,1.62rem); margin: 6px 0 5px; }
    .hero-section .hero-spotlight-copy p { font-size: .78rem; margin-bottom: 9px; }
    .hero-section .hero-spotlight-kicker { font-size: .60rem; }
    .hero-section .hero-spotlight-cta { font-size: .73rem; padding: 7px 11px; }
    .hero-section .hero-slide-one .hero-product-image { object-position: 50% 43%; }
    .hero-section .hero-slide-two .hero-text,
    .hero-section .hero-slide-three .hero-text { padding: 22px 14px; max-width: calc(100% - 70px); }
    .hero-section .hero-slide-two .hero-text h2,
    .hero-section .hero-slide-three .hero-text h2 { font-size: 1.45rem; }
    .hero-section .hero-slide-two .hero-text p,
    .hero-section .hero-slide-three .hero-text p { font-size: .85rem; margin-bottom: 15px; }
    .hero-section .hero-slide-two .hero-text .btn,
    .hero-section .hero-slide-three .hero-text .btn { padding: 9px 12px; min-width: 0; font-size: .88rem; }
    .site-navbar .mobile-header-actions { gap: 8px; }
    .site-navbar .mobile-header-actions .navbar-toggler { width: 38px; height: 38px; min-height: 38px; flex-basis: 38px; }
}
@media (max-width: 380px) {
    .site-navbar .navbar-brand { font-size: .64rem; margin-right: 4px; }
    .site-navbar .mobile-header-actions { gap: 5px; }
    .site-navbar .mobile-header-actions .navbar-toggler { width: 36px; height: 36px; min-height: 36px; flex-basis: 36px; }
    .site-navbar .menu-bars, .site-navbar .menu-bars > span { width: 18px; }
    .hero-section .hero-spotlight-copy { width: min(calc(100% - 52px), 390px); }
}


/* Responsive uncropped product photography: PC, tablet and mobile */
.product-card .product-image,
.catalog-product-card .product-image { display:grid; place-items:center; height:clamp(190px,23vw,285px); overflow:hidden; background:#f7faf6; padding:10px; }
.product-card .product-image img,
.catalog-product-card .product-image img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; }
.home-featured-image { aspect-ratio:1 / 1; background:#f7faf6; }
.home-featured-image img { display:block; object-fit:contain; object-position:center; }
.home-category-product-image img { object-fit:contain; object-position:center; }
@media (max-width:767.98px) {
  .product-card .product-image,.catalog-product-card .product-image { height:clamp(150px,42vw,235px); padding:7px; }
  .home-featured-image img { padding:10px; }
}
@media (max-width:380px) {
  .product-card .product-image,.catalog-product-card .product-image { height:clamp(140px,43vw,172px); padding:6px; }
}


/* =====================================================================
   VASU — HERO COPY REFINEMENT (2026-10-26)
   Keep product packaging unobscured: centered caption on the open left
   side of the desktop photograph, and its own band below the photograph
   on narrow viewports. Arrows and slide progress remain functional.
   ===================================================================== */
@media (min-width: 768px) {
    .hero-section .hero-slide-one .hero-spotlight-shade {
        background: linear-gradient(90deg, rgba(9, 36, 20, .26) 0%, rgba(9, 36, 20, .08) 39%, transparent 58%);
    }
    .hero-section .hero-slide-one .hero-spotlight-copy {
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        bottom: auto;
        left: clamp(72px, 6.5vw, 125px);
        right: auto;
        transform: translateY(-50%);
        width: clamp(310px, 29vw, 450px);
        max-width: calc(50% - 55px);
        margin: 0;
        padding: clamp(22px, 2.2vw, 31px) clamp(19px, 2.15vw, 29px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        background: linear-gradient(140deg, rgba(5, 57, 36, .91), rgba(7, 38, 27, .83));
        border: 1px solid rgba(248, 211, 124, .42);
        border-radius: 20px;
        box-shadow: 0 15px 39px rgba(0, 0, 0, .22);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    .hero-section .hero-slide-one .hero-spotlight-copy h1 {
        font-size: clamp(1.8rem, 2.65vw, 2.95rem);
        line-height: 1.13;
        margin: 9px 0 10px;
        max-width: 100%;
        letter-spacing: -.025em;
        text-wrap: balance;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy p {
        font-size: clamp(.88rem, 1.13vw, 1.03rem);
        line-height: 1.35;
        margin: 0 0 18px;
    }
    .hero-section .hero-slide-one .hero-spotlight-kicker {
        color: #f5d67a;
        font-size: clamp(.64rem, .8vw, .81rem);
    }
    .hero-section .hero-slide-one .hero-spotlight-cta {
        padding: 10px 18px;
        font-size: .93rem;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-section .hero-slide-one .hero-spotlight-copy {
        left: clamp(56px, 5.7vw, 76px);
        width: clamp(228px, 29vw, 320px);
        max-width: calc(48% - 35px);
        padding: 18px 17px;
        border-radius: 16px;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy h1 {
        font-size: clamp(1.4rem, 2.45vw, 2rem);
        margin: 7px 0;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy p {
        font-size: .82rem;
        margin-bottom: 12px;
    }
    .hero-section .hero-slide-one .hero-spotlight-cta {
        padding: 8px 12px;
        font-size: .78rem;
    }
}
@media (max-width: 767.98px) {
    /* Reserve an actual bottom caption area; do not mask bottle labels. */
    .hero-section .hero-slide-one.hero-slide-product {
        background: #063d2c;
    }
    .hero-section .hero-slide-one .hero-product-link {
        top: 0;
        left: 0;
        right: 0;
        bottom: 146px;
        height: calc(100% - 146px);
        width: 100%;
        overflow: hidden;
    }
    .hero-section .hero-slide-one .hero-product-picture {
        inset: 0;
        height: 100%;
        width: 100%;
    }
    .hero-section .hero-slide-one .hero-product-image {
        object-fit: cover;
        object-position: center 34%;
    }
    .hero-section .hero-slide-one .hero-spotlight-shade {
        display: none;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy {
        position: absolute;
        box-sizing: border-box;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        min-height: 146px;
        max-width: none;
        margin: 0;
        padding: 12px 42px 19px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: linear-gradient(120deg, #07563e, #063624);
        border: 0;
        border-top: 2px solid rgba(244, 195, 84, .65);
        border-radius: 0;
        box-shadow: none;
    }
    .hero-section .hero-slide-one .hero-spotlight-kicker {
        font-size: .64rem;
        line-height: 1.2;
        letter-spacing: .11em;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy h1 {
        font-size: clamp(1.24rem, 3.5vw, 1.58rem);
        line-height: 1.09;
        margin: 4px 0 4px;
        text-shadow: none;
        letter-spacing: -.02em;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy p {
        font-size: .79rem;
        line-height: 1.2;
        margin: 0 0 9px;
    }
    .hero-section .hero-slide-one .hero-spotlight-cta {
        font-size: .77rem;
        line-height: 1.1;
        padding: 8px 15px;
        gap: 7px;
        box-shadow: 0 4px 13px rgba(0,0,0,.16);
    }
    .hero-section .hero-slider-control {
        top: calc((100% - 146px) / 2);
    }
    .hero-section .hero-slide-counter {
        bottom: 158px;
        right: 11px;
    }
    .hero-section .hero-carousel .owl-dots {
        bottom: 155px;
        right: 81px;
    }
}
@media (max-width: 380px) {
    .hero-section .hero-slide-one .hero-spotlight-copy {
        padding-inline: 23px;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy h1 {
        font-size: 1.22rem;
    }
    .hero-section .hero-slide-one .hero-spotlight-copy p {
        font-size: .73rem;
    }
}