/* ============================================
   FLIPKART STYLE - MOBILE-FIRST E-COMMERCE
   ============================================ */

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

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f1f3f6;
    color: #212121;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

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

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   HEADER
   ============================================ */
/* Main Header Container with Sky Blue Gradient */
.main-header {
    background: linear-gradient(to bottom, #1fa4ff 0%, #c4ebff 100%);
    padding: 12px 12px 10px 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.top-header {
    background: transparent;
    padding: 0;
}

.header-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.header-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.header-tab.active {
    background: #ffe500;
    color: #0066cc;
}

.header-tab:not(.active) {
    background: #fff;
    color: #333;
}

.header-tab svg {
    flex-shrink: 0;
}

/* Location bar */
.location-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    background: transparent;
    font-size: 13px;
    color: #333;
}

.location-bar .pin-icon {
    color: #333;
    font-size: 14px;
}

.location-bar .select-link {
    color: #0c6fff;
    font-weight: 700;
}

/* Search Bar */
.search-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
}

.brand-mall {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #212121;
    font-weight: 700;
    gap: 2px;
}

.brand-mall-toggle {
    width: 36px;
    height: 20px;
    background: #fff;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.brand-mall-toggle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.brand-mall-toggle.active {
    background: #0066cc;
}

.brand-mall-toggle.active::after {
    left: 18px;
}

.search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    gap: 10px;
}

.search-box .search-icon {
    color: #999;
    font-size: 18px;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #999;
    background: transparent;
}

.search-box .camera-icon {
    color: #999;
    font-size: 20px;
    cursor: pointer;
}

/* ============================================
   SALE BANNER
   ============================================ */
.banner-section {
    padding: 8px 12px;
    background: #ffffff;
}

.banner-slider-container {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.banner-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.banner-slide {
    min-width: 100%;
    box-sizing: border-box;
}

.banner-slide img {
    width: 100%;
    display: block;
    height: auto;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    color: #ffffff;
    border: none;
    font-size: 25px;
    font-weight: 250;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s;
    outline: none;
}

.slider-arrow:hover {
    opacity: 0.7;
    background: none;
}

.slider-arrow.prev {
    left: 8px;
}

.slider-arrow.next {
    right: 8px;
}

.bank-offers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.1);
    padding: 6px 12px;
    border-radius: 0 0 12px 12px;
    font-size: 11px;
    color: #333;
}

.bank-offers img {
    height: 18px;
    width: auto;
}

/* ============================================
   CATEGORY ROW
   ============================================ */
.category-row {
    display: flex;
    overflow-x: auto;
    gap: 0;
    padding: 5px;
    background: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-row::-webkit-scrollbar,
.similar-products-scroll::-webkit-scrollbar {
    display: none;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    flex: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: transform 0.2s;
}

.category-item:hover {
    transform: scale(1.05);
}

.category-item .cat-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin-bottom: 6px;
}

.category-item .cat-name {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    text-align: center;
    white-space: nowrap;
}

/* ============================================
   DEALS HEADER
   ============================================ */
.deals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.deals-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.deals-left h3 {
    color: #2874f0;
    font-size: 16px;
    font-weight: 700;
}

.deals-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.deals-timer .timer-icon {
    font-size: 16px;
}

.sale-live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ff5252;
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.sale-live-badge .dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ============================================
   PRODUCT GRID
   ============================================ */
.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #e0e0e0;
    border-top: 1px solid #e0e0e0;
}

.product-card {
    background: #fff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.3s;
    border: 0.5px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
}

.product-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.product-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    margin-bottom: 10px;
    position: relative;
}

.product-img-wrap img {
    max-height: 150px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s;
}

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

.product-name {
    font-size: 13px;
    color: #212121;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 54px;
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.discount-badge {
    color: #388e3c;
    font-size: 13px;
    font-weight: 700;
}

.original-price {
    color: #999;
    font-size: 13px;
    text-decoration: line-through;
}

.sale-price {
    color: #212121;
    font-size: 16px;
    font-weight: 700;
}

.wow-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.wow-badge {
    background: #ffeaa7;
    color: #e67e22;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 900;
    font-style: italic;
    border: 1px solid #f39c12;
}

.wow-price {
    color: #212121;
    font-size: 13px;
    font-weight: 500;
}

.wow-text {
    color: #666;
    font-size: 12px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.stars {
    color: #ff9800;
    font-size: 13px;
    letter-spacing: -1px;
}

.star-full {
    color: #388e3c;
}

.star-half {
    color: #388e3c;
}

.star-empty {
    color: #ccc;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #388e3c;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
}

.rating-badge .star-icon {
    font-size: 9px;
}

.assured-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border: 1px solid #2874f0;
    border-radius: 3px;
    font-size: 10px;
    color: #2874f0;
    font-weight: 700;
}

.assured-badge .f-icon {
    background: #2874f0;
    color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */
.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.detail-header .back-btn {
    font-size: 22px;
    cursor: pointer;
    color: #333;
    background: none;
    border: none;
    padding: 4px;
}

.detail-header .logo-small {
    width: 28px;
    height: 28px;
}

.detail-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.detail-header-right .icon-btn {
    font-size: 20px;
    color: #666;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

.product-image-section {
    background: #fff;
    padding: 20px;
    position: relative;
}

.product-main-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.product-main-img img {
    max-height: 85%;
    max-width: 90%;
    object-fit: contain;
}

.wishlist-btn,
.share-btn {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 6px;
}

.wishlist-btn {
    top: 20px;
}

.share-btn {
    top: 54px;
}

.image-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
}

.image-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: background 0.3s;
}

.image-dots .dot.active {
    background: #2874f0;
}

/* Color Selector */
.color-section {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.color-section h4 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #212121;
}

.color-options {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    min-width: 80px;
    cursor: pointer;
    transition: all 0.2s;
}

.color-option.selected {
    border-color: #2874f0;
}

.color-option img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 6px;
}

.color-option .color-name {
    font-size: 12px;
    color: #333;
    text-align: center;
}

/* Product Info */
.product-info-section {
    padding: 16px;
    background: #fff;
    margin-top: 8px;
}

.product-full-name {
    font-size: 15px;
    color: #212121;
    line-height: 1.5;
    margin-bottom: 8px;
}

.detail-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.detail-rating .stars-large {
    color: #388e3c;
    font-size: 16px;
}

.detail-rating .rating-value {
    color: #388e3c;
    font-size: 15px;
    font-weight: 700;
}

.detail-rating .rating-count {
    color: #2874f0;
    font-size: 13px;
}

.detail-rating .assured-img {
    margin-left: auto;
}

/* Sticky Bottom Buttons */
.sticky-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.btn-add-cart,
.btn-buy-now {
    flex: 1;
    padding: 16px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.btn-add-cart {
    background: #fff;
    color: #2874f0;
    border-top: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}

.btn-buy-now {
    background: #ffc200;
    color: #212121;
}

.btn-add-cart:hover,
.btn-buy-now:hover {
    opacity: 0.85;
}

/* ============================================
   CHECKOUT STEPPER
   ============================================ */
.checkout-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}

.checkout-header .back-arrow {
    font-size: 20px;
    color: #333;
    cursor: pointer;
    background: none;
    border: none;
}

.checkout-header h2 {
    font-size: 17px;
    font-weight: 500;
    color: #212121;
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: #fff;
    gap: 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #ddd;
    color: #999;
    background: #fff;
    transition: all 0.3s;
}

.step.active .step-circle {
    background: #2874f0;
    border-color: #2874f0;
    color: #fff;
}

.step.completed .step-circle {
    background: #2874f0;
    border-color: #2874f0;
    color: #fff;
}

.step-label {
    font-size: 11px;
    color: #999;
    font-weight: 500;
}

.step.active .step-label {
    color: #2874f0;
    font-weight: 700;
}

.step.completed .step-label {
    color: #2874f0;
}

.step-line {
    width: 60px;
    height: 2px;
    background: #ddd;
    margin: 0 4px;
    margin-bottom: 22px;
}

.step-line.completed {
    background: #2874f0;
}

/* ============================================
   ADDRESS FORM
   ============================================ */
.address-form {
    padding: 16px;
    background: #fff;
    margin-top: 8px;
}

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

.form-group input,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    color: #212121;
    background: #fff;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #2874f0;
}

.form-group input::placeholder {
    color: #999;
}

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group {
    flex: 1;
}

.free-shipping-banner {
    margin: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8b4b4 0%, #ffeaa7 100%);
    padding: 20px;
    text-align: center;
}

.free-shipping-banner h3 {
    font-size: 22px;
    font-weight: 900;
    color: #212121;
}

.free-shipping-banner p {
    font-size: 14px;
    color: #555;
}

.btn-save-address {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 20px;
    padding: 16px;
    background: #ff6f1e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-save-address:hover {
    background: #e65100;
}

/* ============================================
   ORDER SUMMARY
   ============================================ */
.order-summary-section {
    margin-top: 8px;
}

.delivery-address-card {
    background: #fff;
    padding: 16px;
    margin-bottom: 8px;
}

.delivery-address-card .da-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.delivery-address-card .da-label {
    color: #666;
    font-size: 13px;
}

.delivery-address-card .da-name {
    font-weight: 700;
    color: #212121;
}

.delivery-address-card .da-address {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 4px 0;
}

.delivery-address-card .da-phone {
    color: #666;
    font-size: 14px;
}

.btn-change {
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #2874f0;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.order-product-card {
    background: #fff;
    padding: 16px;
    margin-bottom: 8px;
}

.badge-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.badge-bestseller {
    background: #ff5722;
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-hot-deal {
    border: 1px solid #ff5722;
    color: #ff5722;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}

.order-product-row {
    display: flex;
    gap: 12px;
}

.order-product-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.order-product-info h4 {
    font-size: 14px;
    font-weight: 400;
    color: #212121;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-product-info .color-text {
    color: #999;
    font-size: 13px;
    margin: 4px 0;
}

.order-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.order-discount {
    color: #388e3c;
    font-size: 14px;
    font-weight: 700;
}

.order-mrp {
    color: #999;
    font-size: 14px;
    text-decoration: line-through;
}

.order-final-price {
    color: #212121;
    font-size: 18px;
    font-weight: 700;
}

.order-coupon {
    color: #388e3c;
    font-size: 13px;
    margin-top: 6px;
}

.delivery-date {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}

.delivery-date .express {
    font-weight: 700;
    color: #212121;
    font-style: italic;
}

.qty-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 13px;
    color: #333;
    margin-top: 8px;
}

/* Bottom continue bar */
.continue-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-top: 2px solid #f0f0f0;
    z-index: 100;
}

.continue-bar .price-info .mrp-small {
    color: #999;
    font-size: 13px;
    text-decoration: line-through;
}

.continue-bar .price-info .final-price {
    font-size: 18px;
    font-weight: 700;
    color: #212121;
}

.btn-continue {
    padding: 14px 32px;
    background: #ffc200;
    color: #212121;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-continue:hover {
    background: #e5ae00;
}

/* ============================================
   PAYMENT PAGE
   ============================================ */
.payment-header {
    padding: 16px;
    background: #fff;
    margin-bottom: 8px;
}

.payment-header .step-label-small {
    color: #999;
    font-size: 13px;
}

.payment-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #212121;
}

.payment-header .secure-badge {
    float: right;
    border: 1px solid #e0e0e0;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    margin-top: -28px;
}

.payment-product-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #fff;
    margin-bottom: 4px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin: 0 16px 8px;
}

.payment-product-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
}

.payment-product-info h4 {
    font-size: 14px;
    color: #212121;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.payment-product-info .pp-price {
    color: #388e3c;
    font-size: 15px;
    font-weight: 700;
}

.payment-product-info .pp-mrp {
    color: #999;
    font-size: 13px;
    text-decoration: line-through;
    margin-left: 6px;
}

.payment-product-info .pp-delivery {
    color: #666;
    font-size: 12px;
    margin-top: 2px;
}

.total-amount-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    margin: 0 16px 8px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.total-amount-row .ta-label {
    color: #388e3c;
    font-size: 15px;
    font-weight: 500;
}

.total-amount-row .ta-value {
    color: #388e3c;
    font-size: 16px;
    font-weight: 700;
}

.cashback-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #e8f5e9;
    margin: 0 16px 8px;
    border-radius: 8px;
}

.cashback-banner .cb-text {
    color: #388e3c;
    font-size: 14px;
    font-weight: 500;
}

.cashback-banner .cb-sub {
    color: #388e3c;
    font-size: 12px;
}

.cashback-icons {
    display: flex;
    gap: 8px;
}

.cashback-icons img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* UPI Section */
.upi-section {
    margin: 0 16px 8px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
}

.upi-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.upi-header .upi-icon {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #333;
}

.upi-header h3 {
    font-size: 15px;
    font-weight: 500;
    color: #212121;
}

.upi-header .upi-sub {
    font-size: 13px;
    color: #999;
    font-weight: 400;
}

.payment-option {
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #f0f0f0;
    cursor: pointer;
    gap: 12px;
}

.payment-option:first-of-type {
    border-top: none;
}

.payment-option .po-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
}

.payment-option .po-name {
    flex: 1;
    font-size: 15px;
    color: #212121;
    font-weight: 500;
}

.payment-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: #2874f0;
    cursor: pointer;
}

.btn-pay {
    display: block;
    width: calc(100% - 32px);
    margin: 8px 16px 16px;
    padding: 16px;
    background: #ffc200;
    color: #212121;
    border: none;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-pay:hover {
    background: #e5ae00;
}

/* Disabled payment options */
.disabled-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #fff;
    margin: 0 16px 8px;
    border-radius: 8px;
}

.disabled-option .do-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.disabled-option .do-icon {
    font-size: 20px;
    color: #999;
}

.disabled-option .do-title {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.disabled-option .do-sub {
    font-size: 11px;
    color: #999;
}

.disabled-option .unavailable {
    color: #999;
    font-size: 12px;
}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Processing Modal */
.processing-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #2874f0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.modal-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #212121;
    margin-bottom: 10px;
}

.modal-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 8px;
}

.modal-card .redirecting {
    color: #999;
    font-size: 13px;
}

.btn-diff-method {
    display: block;
    width: 100%;
    padding: 14px;
    background: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 16px;
    transition: background 0.3s;
}

.btn-diff-method:hover {
    background: #e0e0e0;
}

/* Failed Modal */
.failed-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffebee;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.modal-card .failed-title {
    color: #d32f2f;
    font-size: 20px;
    font-weight: 700;
}

.btn-try-again {
    display: block;
    width: 100%;
    padding: 14px;
    background: #2874f0;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 16px;
    transition: background 0.3s;
}

.btn-try-again:hover {
    background: #1a5dc8;
}

/* QR Modal */
.qr-modal {
    max-width: 420px;
}

.qr-modal-header {
    background: linear-gradient(135deg, #2874f0, #5094f5);
    color: #fff;
    padding: 14px;
    border-radius: 12px 12px 0 0;
    margin: -30px -30px 16px -30px;
    font-size: 28px;
    font-weight: 900;
}

.qr-modal-header .lite {
    font-weight: 300;
    font-size: 18px;
    vertical-align: super;
}

.qr-modal-header .plus {
    color: #ffc200;
    font-size: 14px;
    display: block;
}

.qr-code-img {
    width: 220px;
    height: 220px;
    margin: 0 auto 12px;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.qr-code-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qr-scan-text {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.qr-app-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.qr-app-icons img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.qr-buttons {
    display: flex;
    gap: 10px;
}

.btn-download-qr,
.btn-close-qr {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-download-qr {
    background: #ffc200;
    color: #212121;
}

.btn-close-qr {
    background: #ffc200;
    color: #212121;
}

/* ============================================
   FLIPKART BLACK SECTION
   ============================================ */
.fk-black-section {
    background: #fff;
    padding: 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    margin: 0 0 8px;
}

.fk-black-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fk-black-logo {
    width: 60px;
    height: 60px;
    background: #1a1a2e;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.fk-black-logo .fk-text {
    font-size: 11px;
    color: #ffc200;
}

.fk-black-logo .black-text {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
}

.fk-black-info h4 {
    font-size: 14px;
    color: #212121;
    font-weight: 700;
}

.fk-black-info p {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.fk-black-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.fk-black-price .old-price {
    color: #999;
    text-decoration: line-through;
    font-size: 14px;
}

.fk-black-price .new-price {
    font-size: 16px;
    font-weight: 700;
    color: #212121;
}

.btn-add-black {
    padding: 8px 20px;
    border: 1px solid #2874f0;
    color: #2874f0;
    background: #fff;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 768px) {
    body {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .modal-overlay {
        max-width: 480px;
        margin: 0 auto;
    }

    .sticky-bottom,
    .continue-bar {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.mb-8 {
    margin-bottom: 8px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mt-8 {
    margin-top: 8px;
}

.pb-80 {
    padding-bottom: 80px;
}

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

.fw-700 {
    font-weight: 700;
}

.text-green {
    color: #388e3c;
}

.text-blue {
    color: #2874f0;
}

.text-red {
    color: #d32f2f;
}

.bg-white {
    background: #fff;
}

/* Admin-uploaded product detail/specification screenshots */
.description-card { background:#fff; padding:15px; margin-bottom:8px; border-bottom:1px solid #e0e0e0; }
.description-card h5 { font-size:15px; font-weight:500; color:#212121; margin:0 0 12px; }
.description-images img { width:100%; height:auto; display:block; margin-bottom:8px; border-radius:2px; }

/* ============================================
   FINAL MOBILE HOMEPAGE REFERENCE UI
   ============================================ */
body.home-page {
    margin: 0;
    background: #f6f8fb;
    color: #212121;
}
.home-shell {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #fff;
    overflow-x: hidden;
}
.home-header {
    background: linear-gradient(180deg, #b9ddff 0%, #eaf5ff 100%);
    padding: 10px 12px 12px;
}
.home-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.home-tab {
    height: 62px;
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    color: #333;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.home-tab.active {
    background: #ffd900;
    color: #1c54b8;
}
.home-tab-logo {
    font-size: 30px;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
}
.travel-icon { font-size: 25px; color: #e06b7a; }
.home-search-row { margin-top: 10px; }
.home-search {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #dce4ec;
    border-radius: 9px;
    padding: 0 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.search-svg { width: 23px; height: 23px; color: #4e83c7; flex: 0 0 23px; }
.search-svg svg { width: 100%; height: 100%; }
.home-search input {
    width: 100%; border: 0; outline: 0; background: transparent;
    color: #333; font-size: 15px; font-family: inherit;
}
.home-search input::placeholder { color: #9ba3ad; }
.home-categories {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    background: #fff;
    padding: 12px 7px 8px;
    border-bottom: 1px solid #edf0f3;
}
.home-categories::-webkit-scrollbar { display:none; }
.home-category {
    flex: 0 0 16.666%;
    min-width: 66px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:#5e636a;
    font-size:11px;
    white-space:nowrap;
    position:relative;
}
.category-icon-wrap {
    width: 35px; height:35px;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; color:#66727d;
    border-radius:8px;
}
.home-category.active { color:#303840; font-weight:700; }
.home-category.active .category-icon-wrap { background:#e6f0ff; color:#4b78c5; }
.home-category.active::after {
    content:""; position:absolute; left:14px; right:14px; bottom:-8px;
    height:3px; border-radius:3px; background:#3d79d3;
}
.home-banner-section { padding: 10px 10px 0; background:#fff; }
.home-banner-track {
    display:flex; width:100%; transition:transform .45s ease; will-change:transform;
    touch-action:pan-y;
}
.home-banner-slide { min-width:100%; overflow:hidden; border-radius:11px; }
.home-banner-slide img { display:block; width:100%; height:auto; aspect-ratio: 2.25 / 1; object-fit:cover; }
.live-sale-block {
    background:#fff; text-align:center; padding:10px 8px 13px;
    border-bottom:1px solid #eef0f2;
}
.live-sale-title { font-size:25px; line-height:1.2; font-weight:700; color:#24282c; }
.live-sale-title span { color:#df7b76; font-weight:500; }
.live-sale-viewers { margin-top:6px; color:#8a8f95; font-size:12px; font-weight:500; }
.home-product-grid { grid-template-columns:1fr 1fr; gap:1px; background:#e8ebef; border-top:0; }
.home-product-card { padding:11px 10px 13px; min-width:0; border:0; background:#fff; }
.home-product-card .product-img-wrap { height:185px; margin-bottom:8px; }
.home-product-card .product-img-wrap img { max-height:100%; object-fit:contain; }
.home-product-card .product-name {
    font-size:13px; line-height:1.38; color:#555b61; font-weight:400;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    min-height:36px;
}
.home-discount-line { margin-top:6px; display:flex; align-items:center; gap:5px; font-size:12px; color:#62a26a; white-space:nowrap; }
.home-discount-line .original-price { color:#777; text-decoration:line-through; }
.home-price-line { margin-top:3px; display:flex; align-items:center; gap:7px; min-height:28px; }
.home-price-line strong { font-size:20px; color:#292d31; }
.home-price-line .assured-badge { margin-left:0; }
.home-rating-line { display:flex; align-items:center; gap:5px; margin-top:5px; color:#8a8f95; font-size:11px; }
.home-rating { background:#078b43; color:#fff; border-radius:3px; padding:3px 5px; font-weight:700; }
.home-delivery { margin-top:5px; font-size:11px; color:#777; }
.external-browser-prompt{position:fixed;inset:0;z-index:999999;display:flex;justify-content:center;align-items:flex-start;overflow:auto;background:#fff;padding:clamp(105px,18vh,220px) 24px 40px;font-family:Arial,Roboto,sans-serif}
.external-browser-card{width:min(100%,420px);display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff}
.external-browser-brand{width:112px;height:112px;border-radius:26px;display:flex;align-items:center;justify-content:center;background:#ffea00;box-shadow:0 8px 22px rgba(20,54,190,.12);line-height:1}.external-browser-brand svg{display:block;width:72%;height:72%;overflow:visible}.external-browser-brand svg path:first-child{fill:#1748c8}
.external-browser-title{margin:46px 0 0;color:#242424;font-size:clamp(21px,5vw,26px);line-height:1.5;font-weight:700;max-width:390px}
.external-browser-text{display:none}
.external-browser-card button{width:min(246px,78%);height:70px;margin-top:64px;border:0;border-radius:40px;background:#1600ed;color:#fff;font:700 19px Arial,Roboto,sans-serif;box-shadow:0 8px 22px rgba(32,0,220,.24);cursor:pointer;-webkit-tap-highlight-color:transparent}
.external-browser-card button:active{transform:scale(.98)}
@media(max-height:650px){.external-browser-prompt{padding-top:9vh}.external-browser-brand{width:88px;height:88px}.external-browser-title{margin-top:30px}.external-browser-card button{margin-top:38px}}
@media (min-width: 481px) {
    .home-shell { box-shadow: 0 0 20px rgba(0,0,0,.06); }
}
.category-icon-wrap svg { width:28px; height:28px; }

/* Reference-match header/countdown overrides */
body.home-page{background:#fff}.home-shell{max-width:480px;overflow-x:hidden}
.home-header{padding:12px 12px 14px;background-color:#ed168b;background-image:radial-gradient(circle at 15% 15%,rgba(255,255,255,.42) 0 2px,transparent 4px),radial-gradient(circle at 85% 24%,rgba(255,255,255,.34) 0 2px,transparent 5px),linear-gradient(145deg,#e90b83 0%,#ff42b4 58%,#d80be8 100%);background-size:84px 78px,110px 94px,auto}
.home-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;width:100%}
.home-tab{min-width:0!important;height:60px!important;border-radius:18px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;background:#fff;color:#222;font-size:clamp(10px,2.9vw,14px)!important;font-weight:700;font-style:italic;white-space:nowrap;overflow:hidden}
.home-tab.active{background:#ffe500!important;color:#174eaa!important}.home-tab-logo{font-size:30px!important}.home-search-row{margin-top:12px!important;display:flex;gap:10px;align-items:center}.home-search{height:54px!important;flex:1;border-radius:15px!important;padding:0 14px!important}.home-search input{font-size:16px!important}.home-mic{font-size:23px;color:#737980}.home-qr{color:#fff;font-size:30px;flex:0 0 28px}
.home-categories{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;background:linear-gradient(180deg,#ed168b,#f33eb2)!important;color:#fff!important;padding:12px 7px 10px!important;scrollbar-width:none}.home-category{flex:0 0 16.66%!important;min-width:66px!important;color:#fff!important;font-size:11px!important}.category-icon-wrap{color:#fff!important;width:35px;height:35px}.category-icon-wrap svg{width:28px;height:28px}.home-category.active .category-icon-wrap{background:rgba(111,0,85,.45)!important;color:#fff!important}.home-category.active::after{background:#fff!important}
.live-sale-block{position:relative!important;display:block!important;padding:0!important;min-height:0!important;overflow:hidden!important;background:#f52ab4!important;line-height:0}.countdown-reference-art{display:block;width:100%;height:auto;aspect-ratio:1057/330;object-fit:cover}.live-sale-countdown{position:absolute!important;left:29.1%;top:37.5%;width:43.8%;height:29%;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px!important;align-items:stretch;line-height:1}.countdown-unit{max-width:none!important;min-width:0!important;padding:4px 1px!important;border-radius:8px!important;background:linear-gradient(180deg,#4b00b9,#8a00e8)!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;box-shadow:none!important}.countdown-unit strong{font-size:clamp(17px,4.8vw,29px)!important;line-height:1!important;color:#fff}.countdown-unit span{font-size:clamp(9px,2.7vw,15px)!important;color:#fff;margin-top:3px!important}.home-banner-section{padding:10px 10px 0;background:#fff}.home-banner-slide img{aspect-ratio:2.25/1;object-fit:cover}
@media(max-width:360px){.home-tabs{gap:5px!important}.home-tab{height:54px!important;font-size:10px!important}.live-sale-countdown{gap:2px!important}.countdown-unit strong{font-size:17px!important}}


/* Audited final correction: timer placement and banner gutters only. */
.live-sale-block {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}
.countdown-reference-art {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1057 / 330 !important;
    object-fit: cover !important;
}
.live-sale-countdown {
    position: absolute !important;
    left: 29.1% !important;
    top: 48.5% !important;
    width: 43.8% !important;
    height: 29% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    align-items: stretch !important;
    pointer-events: none !important;
    line-height: 1 !important;
}
.countdown-unit {
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 3px 1px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #4b00b9, #7200df) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.countdown-unit strong {
    display: block !important;
    color: #fff !important;
    font-size: clamp(17px, 4.4vw, 28px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
.countdown-unit span {
    display: block !important;
    color: #fff !important;
    font-size: clamp(9px, 2.6vw, 15px) !important;
    line-height: 1.05 !important;
    margin-top: 3px !important;
}
@media (max-width: 360px) {
    .live-sale-countdown { left: 29.1% !important; top: 48.5% !important; width: 43.8% !important; height: 29% !important; gap: 2px !important; }
    .countdown-unit strong { font-size: 16px !important; }
    .countdown-unit span { font-size: 9px !important; }
}

/* Remove white gutters but keep the existing carousel's own slide sizing/logic. */
.home-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.home-banner-track {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}
.home-banner-slide {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.home-banner-slide img {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* User-requested final banner-only adjustment: square corners and edge-to-edge fit.
   Keep existing carousel transform/slide order and all payment files untouched. */
.home-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}
.home-banner-track {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
}
.home-banner-slide {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.home-banner-slide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
}


/* Targeted fix: edge-to-edge homepage banner and clean, readable live countdown.
   No product, checkout, payment, database, or admin logic changed. */
.live-sale-block {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}
.live-sale-block + .home-banner-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.home-banner-section,
.home-banner-track,
.home-banner-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}
.home-banner-slide {
    min-width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.home-banner-slide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 2.25 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}
/* Hide the countdown lettering baked into the reference artwork so only the live
   HTML timer is visible. The soft gradient blends into the existing pink-purple art. */
.live-sale-block::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 25%;
    top: 23%;
    width: 51%;
    height: 58%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(239, 55, 180, .98) 0%, rgba(210, 28, 196, .98) 44%, rgba(119, 0, 224, .98) 100%);
    border-radius: 16px;
    filter: blur(7px);
}
.live-sale-countdown {
    left: 29.1% !important;
    top: 37.5% !important;
    width: 43.8% !important;
    height: 29% !important;
    z-index: 2 !important;
    gap: 3px !important;
}
.countdown-unit {
    height: 100% !important;
    padding: 3px 1px !important;
    border-radius: 8px !important;
}
.countdown-unit strong {
    font-size: clamp(20px, 5.2vw, 28px) !important;
    line-height: 1 !important;
}
.countdown-unit span {
    font-size: clamp(10px, 2.8vw, 13px) !important;
    line-height: 1.05 !important;
    margin-top: 3px !important;
}
@media (max-width: 360px) {
    .live-sale-countdown {
        left: 29.1% !important;
        top: 37.5% !important;
        width: 43.8% !important;
        height: 29% !important;
        gap: 2px !important;
    }
    .countdown-unit strong { font-size: 19px !important; }
    .countdown-unit span { font-size: 9px !important; }
}


/* Final targeted fix: keep countdown numbers and purple timer boxes unchanged;
   make only the Days/Hrs/Min/Sec labels bright white and hide low-contrast
   duplicate label text baked into the background artwork beneath the live timer. */
.live-sale-block::after {
    top: 21% !important;
    height: 64% !important;
    background: linear-gradient(180deg, rgba(239, 55, 180, 1) 0%, rgba(210, 28, 196, 1) 44%, rgba(119, 0, 224, 1) 100%) !important;
    filter: blur(5px) !important;
}
.countdown-unit span {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(30, 0, 70, .35) !important;
}


/* Requested addition: clear offer-ending message above the existing live countdown.
   The countdown digits, boxes, background artwork, and timer logic remain unchanged. */
.countdown-offer-heading {
    position: absolute !important;
    z-index: 3 !important;
    left: 25% !important;
    top: 27.5% !important;
    width: 51% !important;
    text-align: center !important;
    color: #fff !important;
    font-size: clamp(10px, 2.8vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: .25px !important;
    text-shadow: 0 1px 2px rgba(60, 0, 90, .8), 0 0 7px rgba(255, 215, 0, .45) !important;
    pointer-events: none !important;
}
@media (max-width: 360px) {
    .countdown-offer-heading { font-size: 9px !important; top: 28% !important; }
}


/* Final correction: keep the offer-ending heading clearly ABOVE the live timer. */
.live-sale-block::after{top:12%!important;height:84%!important;z-index:1!important;filter:blur(2px)!important;background:linear-gradient(180deg,rgba(239,55,180,.99) 0%,rgba(210,28,196,.99) 48%,rgba(119,0,224,.99) 100%)!important;}
.countdown-offer-heading{top:13%!important;left:23%!important;width:54%!important;z-index:4!important;font-size:clamp(10px,2.9vw,16px)!important;line-height:1.1!important;color:#fff!important;text-shadow:0 1px 3px rgba(40,0,80,.8)!important;}
.live-sale-countdown{top:39%!important;z-index:3!important;}
@media(max-width:360px){.countdown-offer-heading{top:13%!important;font-size:9px!important}.live-sale-countdown{top:39%!important;}}


/* Homepage reference layout: blue two-tab header, white categories, inset banner,
   and separate live-sale timer. Scoped to the homepage only. */
body.home-page { background:#fff !important; }
body.home-page .home-shell { max-width:480px; width:100%; margin:0 auto; background:#fff; overflow-x:hidden; }
body.home-page .home-header {
  padding:12px 12px 14px !important;
  background:linear-gradient(180deg,#28a9f4 0%,#42b9f8 58%,#effaff 100%) !important;
}
body.home-page .home-tabs { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; width:100%; }
body.home-page .home-tab {
  min-width:0 !important; height:82px !important; border-radius:23px !important;
  display:flex !important; flex-direction:column !important; align-items:center !important;
  justify-content:center !important; gap:3px !important; background:#fff !important;
  color:#171717 !important; font-size:16px !important; font-weight:700 !important;
  font-style:italic !important; white-space:nowrap; overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.10) !important;
}
body.home-page .home-tab.active { background:#ffdc00 !important; color:#124aa2 !important; }
body.home-page .home-tab-logo { font-size:40px !important; line-height:1 !important; color:#1554b4 !important; }
body.home-page .tab-emoji { font-size:30px !important; line-height:1 !important; }
body.home-page .home-search-row { display:flex !important; margin-top:14px !important; gap:0 !important; align-items:center !important; }
body.home-page .home-search {
  height:62px !important; width:100% !important; flex:1 1 auto !important; box-sizing:border-box !important;
  border:1px solid #72b6df !important; border-radius:18px !important; background:#fff !important;
  padding:0 17px !important; gap:12px !important; box-shadow:0 1px 3px rgba(0,0,0,.08) !important;
}
body.home-page .home-search input { font-size:18px !important; color:#222 !important; }
body.home-page .home-search input::placeholder { color:#252525 !important; opacity:1; }
body.home-page .search-svg { width:27px !important; height:27px !important; flex-basis:27px !important; color:#1761b4 !important; }
body.home-page .home-mic { color:#7c858d !important; font-size:22px !important; }
body.home-page .home-categories {
  display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important;
  background:#fff !important; color:#454b52 !important; padding:18px 8px 12px !important;
  border-bottom:1px solid #edf0f3 !important; scrollbar-width:none !important;
}
body.home-page .home-category { flex:1 0 20% !important; min-width:65px !important; color:#454b52 !important; font-size:13px !important; gap:7px !important; }
body.home-page .category-icon-wrap { width:43px !important; height:43px !important; color:#30363d !important; border-radius:13px !important; }
body.home-page .category-icon-wrap svg { width:29px !important; height:29px !important; }
body.home-page .home-category.active { color:#182b42 !important; font-weight:700 !important; }
body.home-page .home-category.active .category-icon-wrap { background:#dcedff !important; color:#263746 !important; }
body.home-page .home-category.active::after { left:12px !important; right:12px !important; bottom:-9px !important; height:4px !important; background:#1684e8 !important; }
body.home-page .home-banner-section { padding:12px 18px 0 !important; margin:0 !important; background:#fff !important; overflow:hidden !important; box-sizing:border-box !important; }
body.home-page .home-banner-track { display:flex !important; width:100% !important; margin:0 !important; padding:0 !important; }
body.home-page .home-banner-slide { min-width:100% !important; border-radius:20px !important; overflow:hidden !important; }
body.home-page .home-banner-slide img {
  display:block !important; width:100% !important; max-width:100% !important; height:auto !important;
  aspect-ratio:1.78 / 1 !important; object-fit:cover !important; object-position:center !important;
  border-radius:20px !important; margin:0 !important;
}
body.home-page .live-sale-block {
  position:static !important; display:block !important; width:100% !important; min-height:0 !important;
  margin:0 !important; padding:20px 8px 18px !important; overflow:visible !important;
  background:#fff !important; border:0 !important; text-align:center !important; line-height:1.2 !important;
}
body.home-page .live-sale-block::after { content:none !important; display:none !important; }
body.home-page .live-sale-title { font-size:22px !important; line-height:1.25 !important; font-weight:700 !important; color:#202328 !important; }
body.home-page .live-sale-title span { color:#f05a28 !important; font-weight:700 !important; white-space:nowrap; }
body.home-page .live-sale-title strong { font-weight:700 !important; }
body.home-page .home-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:1px !important; background:#e8ebef !important; }
body.home-page .home-product-card { background:#fff !important; }
@media (max-width:360px) {
  body.home-page .home-tab { height:68px !important; font-size:14px !important; }
  body.home-page .home-search { height:56px !important; }
  body.home-page .home-banner-section { padding-left:14px !important; padding-right:14px !important; }
  body.home-page .live-sale-title { font-size:19px !important; }
}


/* Homepage banner spacing, per-upload pagination and live-watch accent. */
body.home-page .live-watch-row{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:10px 12px 2px;background:#fff;font-size:12px;font-weight:700;letter-spacing:.2px}
body.home-page .live-watch-pulse{width:8px;height:8px;border-radius:50%;background:#19b85a;box-shadow:0 0 0 4px rgba(25,184,90,.13);animation:watchPulse 1.5s infinite}
body.home-page .live-watch-label{color:#1685df}
body.home-page #liveWatchCount{font-size:14px;background:linear-gradient(90deg,#1685df,#12a85a);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
body.home-page .live-watch-caption{color:#6b737c;font-weight:500}
@keyframes watchPulse{50%{box-shadow:0 0 0 7px rgba(25,184,90,0)}}
body.home-page .home-banner-section{padding:12px 18px 0!important;overflow:hidden!important}
body.home-page .home-banner-track{display:flex!important;gap:12px!important;width:max-content!important;transition:transform .45s ease!important;will-change:transform}
body.home-page .home-banner-slide{flex:0 0 calc(100vw - 36px)!important;width:calc(100vw - 36px)!important;min-width:0!important;max-width:444px!important;border-radius:18px!important;overflow:hidden!important}
body.home-page .home-banner-slide img{width:100%!important;height:auto!important;aspect-ratio:1.78/1!important;object-fit:cover!important;border-radius:18px!important}
body.home-page .home-banner-dots{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 0 0;min-height:17px}
body.home-page .home-banner-dot{appearance:none;border:0;width:7px;height:7px;padding:0;border-radius:50%;background:#cbd3dc;cursor:pointer;transition:all .2s ease}
body.home-page .home-banner-dot.active{width:20px;border-radius:8px;background:#1684e8}
body.home-page .live-sale-block{padding:16px 8px 18px!important;margin:0!important}
@media(min-width:480px){body.home-page .home-banner-slide{flex-basis:444px!important;width:444px!important}}
@media(max-width:360px){body.home-page .home-banner-section{padding-left:12px!important;padding-right:12px!important}body.home-page .home-banner-slide{flex-basis:calc(100vw - 24px)!important;width:calc(100vw - 24px)!important}}


/* Final reference-match refinement: compact controls, one full banner per slide,
   countdown first and a small live-watch line immediately below it. */
body.home-page .home-header{
  padding:10px 12px 12px!important;
}
body.home-page .home-tabs{
  gap:10px!important;
}
body.home-page .home-tab{
  height:66px!important;
  border-radius:20px!important;
  font-size:15px!important;
  gap:2px!important;
}
body.home-page .home-tab-logo{font-size:32px!important}
body.home-page .tab-emoji{font-size:24px!important}
body.home-page .home-search-row{margin-top:11px!important}
body.home-page .home-search{
  height:50px!important;
  border-radius:16px!important;
  padding:0 14px!important;
  gap:10px!important;
}
body.home-page .home-search input{font-size:16px!important}
body.home-page .search-svg{width:23px!important;height:23px!important;flex-basis:23px!important}
body.home-page .home-mic{font-size:19px!important}
body.home-page .home-categories{
  padding:14px 7px 10px!important;
}
body.home-page .home-category{
  font-size:12px!important;
  gap:5px!important;
}
body.home-page .category-icon-wrap{
  width:38px!important;height:38px!important;border-radius:11px!important;
}
body.home-page .category-icon-wrap svg{width:26px!important;height:26px!important}
body.home-page .home-category.active::after{
  bottom:-7px!important;height:3px!important;
}
body.home-page .home-banner-section{
  padding:12px 16px 0!important;
  width:100%!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.home-page .home-banner-track{
  display:flex!important;
  width:100%!important;
  gap:0!important;
  transition:transform .42s ease!important;
}
body.home-page .home-banner-slide{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  border-radius:14px!important;
}
body.home-page .home-banner-slide img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:2.35/1!important;
  object-fit:cover!important;
  border-radius:14px!important;
}
body.home-page .home-banner-dots{
  padding:8px 0 0!important;
  min-height:14px!important;
  gap:6px!important;
}
body.home-page .home-banner-dot{
  width:6px!important;height:6px!important;
}
body.home-page .home-banner-dot.active{
  width:17px!important;
}
body.home-page .live-sale-block{
  padding:12px 8px 8px!important;
  margin:0!important;
}
body.home-page .live-sale-title{
  font-size:20px!important;
  line-height:1.2!important;
}
body.home-page .live-watch-row{
  padding:2px 8px 12px!important;
  gap:5px!important;
  font-size:10px!important;
  line-height:1.2!important;
}
body.home-page .live-watch-pulse{
  width:6px!important;height:6px!important;
  box-shadow:0 0 0 3px rgba(25,184,90,.12)!important;
}
body.home-page #liveWatchCount{font-size:12px!important}
body.home-page .live-watch-label{font-size:10px!important}
body.home-page .live-watch-caption{font-size:10px!important}
@media(max-width:360px){
  body.home-page .home-tab{height:60px!important;font-size:13px!important}
  body.home-page .home-tab-logo{font-size:29px!important}
  body.home-page .tab-emoji{font-size:22px!important}
  body.home-page .home-search{height:46px!important}
  body.home-page .home-search input{font-size:14px!important}
  body.home-page .home-banner-section{padding-left:12px!important;padding-right:12px!important}
  body.home-page .live-sale-title{font-size:18px!important}
}


/* Requested Facebook Assured artwork and stronger green rating pill only */
body.home-page .home-price-line .assured-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0!important;
  padding:0!important;
  margin-left:0!important;
  height:20px!important;
  background:transparent!important;
  line-height:0!important;
}
body.home-page .home-price-line .assured-logo{
  display:block;
  width:auto!important;
  height:20px!important;
  max-width:84px!important;
  object-fit:contain;
}
body.home-page .home-rating{
  background:#078b43!important;
  color:#fff!important;
}


/* Final fix: compact Assured mark like the original small badge; stronger rating green */
.home-price-line .assured-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:62px!important;
  height:16px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  line-height:0!important;
  overflow:hidden!important;
}
.home-price-line .assured-badge .assured-logo{
  display:block!important;
  width:60px!important;
  max-width:60px!important;
  height:16px!important;
  max-height:16px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.home-rating{
  background:#008f3d!important;
  color:#fff!important;
}