/* ==========================================================================
   TRENDORA LUXURY CROCHET THEME - MAIN STYLESHEET
   Mobile-First High-Converting eCommerce Design System
   ========================================================================== */

:root {
    --primary-color: #d32f2f;
    --primary-dark: #b71c1c;
    --primary-light: #ffebee;
    --secondary-color: #2e7d32;
    --whatsapp-green: #25d366;
    --whatsapp-dark: #128c7e;
    --text-dark: #1f2937;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --bg-page: #fcfbfa;
    --bg-surface: #ffffff;
    --bg-accent: #fbf7f4;
    --border-color: #eeddcc;
    --gold-accent: #d97706;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 9999px;
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.04);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.07);
    --shadow-lg: 0 12px 30px rgba(0,0,0,0.11);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--text-dark); background-color: var(--bg-page); line-height: 1.6; font-size: 16px; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.max-w-4xl { max-width: 896px; }
.text-center { text-align: center; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.title-serif { font-family: var(--font-heading); font-size: 1.9rem; line-height: 1.25; color: var(--text-dark); font-weight: 700; }
.section-heading .sub-badge { display: inline-block; background: #fff0f0; color: var(--primary-color); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 8px; }
.section-heading .subtitle { color: var(--text-muted); font-size: 1rem; margin-top: 6px; }

/* Announcement Bar & Header */
.trendora-announcement-bar { background: #1e1e24; color: #ffffff; font-size: 0.85rem; padding: 8px 12px; text-align: center; }
.announcement-content { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.announcement-badge { background: var(--gold-accent); color: #fff; font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.shipping-progress-banner { background: #fdf5e6; border-bottom: 1px solid #fae6c0; padding: 6px 12px; text-align: center; font-size: 0.88rem; color: #875405; }
.trendora-header { background: #ffffff; border-bottom: 1px solid #f0e6dd; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand-title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: var(--primary-dark); }
.brand-tagline { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; margin-top: -4px; }
.main-navigation .nav-menu { display: none; list-style: none; gap: 24px; }
.main-navigation .nav-menu a { font-weight: 600; font-size: 0.95rem; }
.main-navigation .nav-menu a:hover { color: var(--primary-color); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-header-wa { display: inline-flex; align-items: center; gap: 6px; background: var(--whatsapp-green); color: #ffffff; font-weight: 700; font-size: 0.85rem; padding: 8px 14px; border-radius: var(--radius-pill); box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25); }
.wa-dot { width: 8px; height: 8px; background: #ffffff; border-radius: 50%; animation: pulse 1.5s infinite; }
.header-cart-icon { position: relative; color: var(--text-dark); display: flex; align-items: center; padding: 6px; background: none; border: none; cursor: pointer; }
.header-cart-icon .cart-count { position: absolute; top: 0; right: -4px; background: var(--primary-color); color: #fff; font-size: 0.7rem; font-weight: 800; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.mobile-menu-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger-line { width: 22px; height: 2px; background: var(--text-dark); border-radius: 2px; }
.mobile-nav-drawer { position: fixed; top: 0; left: -320px; width: 280px; height: 100vh; background: #ffffff; box-shadow: 4px 0 20px rgba(0,0,0,0.15); z-index: 2000; transition: left 0.3s ease; padding: 24px 20px; display: flex; flex-direction: column; }
.mobile-nav-drawer.open { left: 0; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 20px; }
.close-drawer-btn { font-size: 1.8rem; color: #888; }
.mobile-links { list-style: none; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.mobile-links a { font-size: 1.05rem; font-weight: 600; display: block; padding: 6px 0; }
.drawer-footer { border-top: 1px solid #eee; padding-top: 16px; font-size: 0.85rem; color: var(--text-muted); }
/* Hero Section */
.trendora-hero-section { background: linear-gradient(135deg, #fef9f7 0%, #fff1f0 100%); padding: 30px 0 40px; border-bottom: 1px solid #f6e6e2; }
.hero-container { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.hero-rating-badge { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); margin-bottom: 16px; font-size: 0.85rem; font-weight: 600; }
.hero-rating-badge .stars { color: #f59e0b; }
.hero-headline { font-family: var(--font-heading); font-size: 2.1rem; line-height: 1.25; font-weight: 800; color: #1a1a1a; margin-bottom: 16px; }
.hero-headline .highlight { color: var(--primary-color); }
.hero-subheadline { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.55; }
.hero-usp-list { list-style: none; margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.hero-usp-list li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.check-icon { width: 22px; height: 22px; border-radius: 50%; background: #e8f5e9; color: #2e7d32; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; flex-shrink: 0; }
.hero-cta-buttons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.btn-primary-order { background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%); color: #ffffff; padding: 14px 22px; border-radius: var(--radius-md); box-shadow: 0 8px 20px rgba(211, 47, 47, 0.35); display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.btn-primary-order .btn-icon { font-size: 1.6rem; }
.btn-primary-order .btn-text strong { display: block; font-size: 1.1rem; font-weight: 800; }
.btn-primary-order .btn-text small { font-size: 0.78rem; opacity: 0.92; }
.btn-wa-hero { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--whatsapp-green); color: #ffffff; font-weight: 700; font-size: 1rem; padding: 13px 20px; border-radius: var(--radius-md); box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3); }
.hero-stock-alert { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: #c62828; }
.pulse-dot { width: 8px; height: 8px; background: #c62828; border-radius: 50%; animation: pulse 1.2s infinite; }
.hero-image-card { background: #ffffff; padding: 12px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.discount-sticker { position: absolute; top: 20px; right: 20px; background: var(--primary-color); color: #fff; font-weight: 800; font-size: 0.85rem; padding: 6px 14px; border-radius: var(--radius-pill); z-index: 2; }
.hero-img { border-radius: var(--radius-md); width: 100%; object-fit: cover; }
.hero-image-overlay-badge { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border: 1px solid #ffdede; border-radius: var(--radius-md); padding: 10px 16px; margin-top: -30px; position: relative; z-index: 2; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
.hero-image-overlay-badge .badge-title { font-weight: 700; color: var(--primary-dark); font-size: 0.95rem; }
.hero-image-overlay-badge .badge-desc { font-size: 0.8rem; color: var(--text-muted); }

/* Benefits Bar */
.trendora-benefits-bar { background: #ffffff; border-bottom: 1px solid #f0e6dd; padding: 18px 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.benefit-item { display: flex; align-items: flex-start; gap: 10px; }
.benefit-item .b-icon { font-size: 1.6rem; flex-shrink: 0; }
.benefit-item h4 { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); }
.benefit-item p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.35; }

/* Spotlight Flagship Product */
.trendora-featured-spotlight { background: #ffffff; }
.spotlight-product-card { background: #fffafa; border: 2px solid #ffe8e8; border-radius: var(--radius-lg); padding: 20px; display: grid; grid-template-columns: 1fr; gap: 24px; }
.main-image-container { position: relative; border-radius: var(--radius-md); overflow: hidden; background: #ffffff; box-shadow: var(--shadow-sm); }
.floating-discount-tag { position: absolute; top: 14px; left: 14px; background: #111827; color: #fff; font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; z-index: 2; }
.spotlight-img { width: 100%; object-fit: cover; }
.mini-badges-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mini-badge { background: #ffffff; border: 1px solid #f0dede; padding: 5px 10px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; color: var(--text-dark); }
.pricing-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.price-row { display: flex; align-items: baseline; gap: 10px; }
.sale-price { font-size: 1.85rem; font-weight: 800; color: var(--primary-color); }
.regular-price { font-size: 1.15rem; color: var(--text-light); text-decoration: line-through; }
.savings-pill { background: #e8f5e9; color: #2e7d32; font-size: 0.8rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.social-views { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #b45309; }
.view-pulse { width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; animation: pulse 1s infinite; }
.urgency-timer-box { background: #fff3f3; border: 1px dashed var(--primary-color); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.timer-countdown { display: flex; align-items: center; gap: 4px; }
.time-block { background: var(--primary-color); color: #ffffff; border-radius: 4px; padding: 2px 6px; text-align: center; min-width: 38px; }
.time-block .num { font-size: 1rem; font-weight: 800; display: block; line-height: 1.1; }
.time-block .unit { font-size: 0.65rem; text-transform: uppercase; }
.colon { font-weight: 800; color: var(--primary-color); }
.option-group { margin-bottom: 16px; }
.option-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.92rem; font-weight: 600; }
.btn-open-size-guide { color: var(--primary-color); font-size: 0.85rem; font-weight: 700; text-decoration: underline; }
.color-swatches-list { display: flex; gap: 10px; }
.swatch-btn { display: flex; align-items: center; gap: 8px; border: 2px solid #e5e7eb; background: #ffffff; padding: 6px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.swatch-btn.active { border-color: var(--primary-color); background: #fff8f8; }
.color-circle { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
.size-buttons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.size-btn { border: 2px solid #e5e7eb; background: #ffffff; padding: 8px 4px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; text-align: center; cursor: pointer; }
.size-btn.active { border-color: var(--primary-color); background: var(--primary-color); color: #ffffff; }
.bundle-deals-container { margin-bottom: 20px; }
.bundle-section-title { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 8px; }
.bundle-option-card { border: 2px solid #e5e7eb; background: #ffffff; border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; position: relative; cursor: pointer; }
.bundle-option-card.active { border-color: var(--primary-color); background: #fff8f8; }
.popular-ribbon { position: absolute; top: -10px; right: 14px; background: var(--gold-accent); color: #ffffff; font-size: 0.68rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.radio-indicator { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: transparent; flex-shrink: 0; }
.bundle-option-card.active .radio-indicator { background: var(--primary-color); border-color: var(--primary-color); color: #ffffff; }
.bundle-info strong { display: block; font-size: 0.95rem; }
.bundle-info span { font-size: 0.8rem; color: var(--text-muted); }
.badge-free { background: #e8f5e9; color: #2e7d32; padding: 1px 6px; border-radius: 4px; font-weight: 800; }
.spotlight-actions { display: flex; flex-direction: column; gap: 10px; }
.btn-checkout-cod { background: linear-gradient(135deg, #111827 0%, #1f2937 100%); color: #ffffff; padding: 14px 20px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); cursor: pointer; }
.btn-checkout-cod .btn-icon { font-size: 1.5rem; }
.btn-checkout-cod .main-text { font-size: 1.05rem; font-weight: 800; display: block; }
.btn-checkout-cod .sub-text { font-size: 0.75rem; color: #d1d5db; display: block; }
.btn-checkout-wa { background: var(--whatsapp-green); color: #ffffff; font-weight: 700; font-size: 1rem; padding: 12px 20px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.delivery-guarantee-note { background: #f8fafc; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--text-muted); margin-top: 12px; }
/* Video Story Section (AutoPlay on Scroll) */
.trendora-video-story-section { background: #18181b; color: #ffffff; }
.trendora-video-story-section .title-serif { color: #ffffff; }
.trendora-video-story-section .subtitle { color: #a1a1aa; }
.video-container-card { max-width: 860px; margin: 0 auto; }
.video-wrapper { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000000; box-shadow: 0 15px 40px rgba(0,0,0,0.4); border: 1px solid #27272a; }
.artisan-video { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.video-overlay-controls { position: absolute; top: 16px; right: 16px; left: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.btn-sound-toggle { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); color: #ffffff; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; }
.video-status-indicator { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); color: #e4e4e7; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); display: flex; align-items: center; gap: 6px; }
.rec-dot { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; animation: pulse 1s infinite; }
.video-caption-box { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); padding: 30px 20px 20px; z-index: 2; }
.artisan-quote .urdu-quote { font-size: 1.15rem; line-height: 1.6; color: #fef08a; font-weight: 600; direction: rtl; text-align: right; margin-bottom: 4px; }
.quote-author { font-size: 0.82rem; color: #d4d4d8; display: block; text-align: right; }
.video-stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.v-stat { background: #27272a; padding: 12px; border-radius: var(--radius-md); text-align: center; }
.v-stat .stat-number { display: block; font-size: 1.4rem; font-weight: 800; color: #f43f5e; }
.v-stat .stat-label { font-size: 0.78rem; color: #a1a1aa; }

/* Catalog Section */
.trendora-catalog-section { background: var(--bg-page); }
.products-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.trendora-product-card { background: #ffffff; border: 1px solid #f0e6dd; border-radius: var(--radius-md); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.trendora-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-badge-row { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 2; }
.badge-tag { font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.badge-tag.popular { background: #111827; color: #fff; }
.badge-tag.discount { background: var(--primary-color); color: #fff; }
.product-card-media { overflow: hidden; aspect-ratio: 1 / 1; background: #fdfdfd; }
.product-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.product-rating-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; margin-bottom: 6px; }
.product-rating-row .stars { color: #f59e0b; }
.product-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.product-urdu-title { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.card-swatches { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.swatch-label { font-size: 0.75rem; color: var(--text-muted); }
.swatches-dots { display: flex; gap: 6px; }
.swatch-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }
.card-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.current-price { font-size: 1.35rem; font-weight: 800; color: var(--primary-color); }
.old-price { font-size: 0.95rem; color: var(--text-light); text-decoration: line-through; }
.stock-indicator { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #b91c1c; margin-bottom: 14px; }
.indicator-dot { width: 6px; height: 6px; background: #b91c1c; border-radius: 50%; }
.card-buttons-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: auto; }
.btn-card-quick-order { background: var(--primary-color); color: #ffffff; font-weight: 700; font-size: 0.9rem; padding: 10px 14px; border-radius: var(--radius-sm); text-align: center; cursor: pointer; }
.btn-card-wa { background: var(--whatsapp-green); color: #ffffff; padding: 10px 12px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }

/* Mystery Offer & Reviews */
.trendora-mystery-offer { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-top: 1px solid #fed7aa; border-bottom: 1px solid #fed7aa; }
.mystery-box-card { text-align: center; max-width: 760px; margin: 0 auto; }
.animated-gift-icon { font-size: 3rem; display: inline-block; animation: bounce 2s infinite; }
.offer-pill { display: block; font-size: 0.8rem; font-weight: 800; color: #c2410c; letter-spacing: 0.08em; margin-top: 4px; }
.mystery-title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; color: #7c2d12; margin: 12px 0; }
.text-gold { color: #ea580c; }
.mystery-desc { font-size: 1.05rem; color: #9a3412; line-height: 1.6; margin-bottom: 20px; }
.mystery-perks-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 0.88rem; font-weight: 700; color: #7c2d12; }
.btn-claim-mystery { display: inline-flex; align-items: center; gap: 10px; background: #ea580c; color: #ffffff; font-weight: 800; font-size: 1.05rem; padding: 14px 28px; border-radius: var(--radius-pill); box-shadow: 0 6px 20px rgba(234, 88, 12, 0.35); }

.trendora-reviews-section { background: #ffffff; }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.review-card { background: #fffafa; border: 1px solid #f2e2e2; border-radius: var(--radius-md); padding: 20px; }
.review-stars { color: #f59e0b; font-size: 1.1rem; margin-bottom: 8px; }
.review-title { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.review-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.reviewer-meta { display: flex; align-items: center; gap: 10px; }
.reviewer-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light); color: var(--primary-color); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.reviewer-info strong { display: block; font-size: 0.92rem; }
.reviewer-info span { font-size: 0.78rem; color: var(--text-light); }

/* FAQ & Trust */
.faq-accordion { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #ffffff; border: 1px solid #ebdcd0; border-radius: var(--radius-md); overflow: hidden; }
.faq-question { width: 100%; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer; }
.faq-toggle-icon { font-size: 1.4rem; color: var(--primary-color); transition: transform 0.2s; }
.faq-answer { padding: 0 20px 16px; display: none; font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-toggle-icon { transform: rotate(45deg); }

.trust-features-section { background: #ffffff; border-top: 1px solid #f0e6dd; }
.trust-features-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.trust-card { display: flex; align-items: flex-start; gap: 14px; padding: 12px; }
.trust-icon { font-size: 2rem; flex-shrink: 0; }
.trust-text h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.trust-text p { font-size: 0.88rem; color: var(--text-muted); }

/* Footer */
.trendora-footer { background: #18181b; color: #d4d4d8; padding-top: 40px; }
.footer-main-content { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
.footer-logo { font-family: var(--font-heading); font-size: 1.8rem; color: #ffffff; margin-bottom: 12px; }
.brand-desc { font-size: 0.88rem; line-height: 1.6; margin-bottom: 16px; }
.payment-methods-badge { display: flex; gap: 8px; flex-wrap: wrap; }
.payment-methods-badge .badge-tag { background: #27272a; color: #a1a1aa; }
.footer-col h4 { font-size: 1.1rem; color: #ffffff; margin-bottom: 14px; }
.footer-menu { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-menu a:hover { color: #ffffff; }
.contact-line { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.92rem; }
.timing-line { font-size: 0.8rem; color: #a1a1aa; margin-top: 8px; }
.footer-bottom-bar { border-top: 1px solid #27272a; padding: 16px 0; font-size: 0.82rem; color: #71717a; }

/* 1-Click Quick COD Modal */
.trendora-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); z-index: 3000; display: none; align-items: flex-end; justify-content: center; }
.trendora-modal-backdrop.open { display: flex; }
.modal-dialog { background: #ffffff; width: 100%; max-width: 500px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; overflow-y: auto; padding: 20px; animation: slideUp 0.3s ease; }
.modal-dialog.size-dialog { max-width: 600px; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #f0e6dd; padding-bottom: 12px; margin-bottom: 14px; }
.modal-title-wrap { display: flex; align-items: center; gap: 10px; }
.modal-title-wrap .bolt-icon { font-size: 1.6rem; color: #f59e0b; }
.modal-title { font-size: 1.2rem; font-weight: 800; }
.modal-sub { font-size: 0.78rem; color: var(--text-muted); }
.btn-close-modal { font-size: 1.8rem; color: #999; cursor: pointer; }
.modal-product-summary { display: flex; gap: 12px; background: #fdf8f7; border: 1px solid #fee2e2; padding: 10px; border-radius: var(--radius-md); margin-bottom: 12px; }
.modal-thumb { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.modal-prod-info h4 { font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.modal-chosen-variants { display: flex; gap: 6px; margin: 4px 0; }
.variant-pill { background: #ffffff; border: 1px solid #e5e7eb; font-size: 0.72rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.modal-pricing-row { display: flex; align-items: center; gap: 8px; }
.modal-pricing-row .unit-price { font-weight: 800; color: var(--primary-color); }
.cod-tag { font-size: 0.72rem; font-weight: 700; color: #2e7d32; }
.modal-shipping-nudge { background: #fffbeb; border: 1px solid #fef3c7; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.8rem; color: #92400e; margin-bottom: 14px; text-align: center; }
.quick-order-form .form-group { margin-bottom: 12px; }
.quick-order-form label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.req { color: var(--primary-color); }
.quick-order-form input[type="text"], .quick-order-form input[type="tel"], .quick-order-form select, .quick-order-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit; }
.quick-order-form input:focus, .quick-order-form select:focus, .quick-order-form textarea:focus { border-color: var(--primary-color); outline: none; }
.quantity-control-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.qty-stepper { display: flex; align-items: center; border: 1.5px solid #d1d5db; border-radius: var(--radius-sm); overflow: hidden; }
.btn-qty { width: 36px; height: 36px; background: #f3f4f6; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.qty-stepper input { width: 44px; height: 36px; border: none; text-align: center; font-weight: 700; font-size: 1rem; }
.order-bill-summary { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.bill-line { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 4px; }
.bill-line.grand-total { border-top: 1px dashed #d1d5db; padding-top: 6px; margin-top: 6px; font-size: 1rem; font-weight: 800; color: var(--primary-color); }
.btn-submit-order { width: 100%; background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%); color: #ffffff; font-weight: 800; font-size: 1.05rem; padding: 14px; border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(211, 47, 47, 0.35); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.trust-notice-under-btn { font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* Success Screen */
.success-view { text-align: center; padding: 30px 10px; }
.success-icon-wrap .check-circle { width: 60px; height: 60px; background: #dcfce7; color: #16a34a; font-size: 2rem; font-weight: 900; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.success-title { font-size: 1.3rem; font-weight: 800; color: #15803d; margin-bottom: 6px; }
.success-sub { font-size: 1rem; color: var(--text-muted); margin-bottom: 12px; }
.success-details { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
.whatsapp-instant-confirm-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.whatsapp-instant-confirm-box h4 { color: #166534; font-size: 0.95rem; margin-bottom: 4px; }
.whatsapp-instant-confirm-box p { font-size: 0.82rem; color: #15803d; margin-bottom: 12px; }
.btn-confirm-wa-now { background: var(--whatsapp-green); color: #ffffff; font-weight: 800; padding: 12px 18px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.btn-close-success { background: #f3f4f6; color: var(--text-dark); font-weight: 600; padding: 10px 20px; border-radius: var(--radius-sm); margin-top: 10px; cursor: pointer; }

/* Sticky Mobile Bar */
.trendora-sticky-mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-top: 1px solid #f0e6dd; box-shadow: 0 -4px 15px rgba(0,0,0,0.08); padding: 10px 16px; z-index: 999; display: flex; align-items: center; justify-content: space-between; }
.sticky-product-teaser { display: flex; flex-direction: column; }
.price-callout { font-size: 1.25rem; font-weight: 800; color: var(--primary-color); line-height: 1.1; }
.open-parcel-tag { font-size: 0.72rem; color: #059669; font-weight: 700; }
.sticky-cta-group { display: flex; align-items: center; gap: 8px; }
.btn-sticky-order { background: var(--primary-color); color: #ffffff; font-weight: 800; font-size: 0.95rem; padding: 10px 16px; border-radius: var(--radius-sm); cursor: pointer; }
.btn-sticky-wa { background: var(--whatsapp-green); color: #ffffff; width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }

/* Floating WhatsApp Widget */
.floating-whatsapp-widget { position: fixed; bottom: 80px; right: 18px; z-index: 1000; }
.wa-float-circle { width: 58px; height: 58px; background: var(--whatsapp-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45); }
.wa-tooltip-bubble { position: absolute; bottom: 70px; right: 0; background: #ffffff; color: var(--text-dark); font-size: 0.8rem; font-weight: 600; padding: 8px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); white-space: nowrap; border: 1px solid #e5e7eb; display: none; }

/* Size Guide */
.size-chart-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.88rem; }
.size-chart-table th, .size-chart-table td { padding: 10px 12px; border: 1px solid #e5e7eb; text-align: left; }
.size-chart-table th { background: #f9fafb; font-weight: 700; }
.size-note { font-size: 0.85rem; color: var(--text-muted); background: #fff8f8; padding: 8px 12px; border-radius: var(--radius-sm); }

/* Animations */
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Desktop Breakpoints */
@media (min-width: 768px) {
    .hero-container { grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
    .hero-headline { font-size: 2.8rem; }
    .hero-cta-buttons { flex-direction: row; }
    .benefits-grid { grid-template-columns: repeat(4, 1fr); }
    .spotlight-product-card { grid-template-columns: 1fr 1.1fr; padding: 30px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .video-stats-strip { grid-template-columns: repeat(4, 1fr); }
    .reviews-grid { grid-template-columns: repeat(3, 1fr); }
    .trust-features-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-main-content { grid-template-columns: 2fr 1fr 1.5fr; }
    .modal-dialog { border-radius: var(--radius-lg); margin: auto; }
    .trendora-modal-backdrop { align-items: center; }
    .trendora-sticky-mobile-bar { display: none; }
    .floating-whatsapp-widget { bottom: 30px; right: 30px; }
    .wa-tooltip-bubble { display: block; }
    .mobile-menu-toggle { display: none; }
    .main-navigation .nav-menu { display: flex; }
}

@media (min-width: 1024px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
   PART 2 ENHANCEMENTS: E-COMMERCE SECTIONS & CRO ADDITIONS
   ========================================================================== */

/* 1. Category Stories Bubbles */
.trendora-category-stories { background: #ffffff; border-bottom: 1px solid #f0e6dd; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.category-stories-scroll { display: flex; gap: 18px; align-items: center; justify-content: flex-start; padding: 4px 0; }
.story-bubble-item { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 78px; cursor: pointer; text-decoration: none; }
.bubble-ring { width: 68px; height: 68px; border-radius: 50%; padding: 3px; border: 2.5px solid #d32f2f; display: flex; align-items: center; justify-content: center; background: #ffffff; transition: transform 0.2s; box-shadow: var(--shadow-sm); }
.bubble-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.story-bubble-item:hover .bubble-ring { transform: scale(1.08); }
.gift-ring { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-color: #d97706; }
.gift-emoji { font-size: 1.8rem; }
.bubble-label { font-size: 0.8rem; font-weight: 700; color: var(--text-dark); margin-top: 6px; white-space: nowrap; }
.bubble-tag { font-size: 0.65rem; color: var(--text-muted); }
.bubble-tag.badge-free { background: #e8f5e9; color: #2e7d32; font-weight: 800; padding: 1px 4px; border-radius: 4px; }

/* 2. Flash Deal & Urgency Stock Bar */
.trendora-flash-deal-strip { background: #fff1f2; border-bottom: 1px solid #fecdd3; padding: 12px 0; }
.flash-deal-content { display: flex; flex-direction: column; gap: 10px; }
.flash-headline-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flash-badge { background: #e11d48; color: #ffffff; font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.05em; }
.flash-text { font-size: 0.9rem; color: #881337; }
.stock-progress-wrapper { background: #ffffff; border: 1px solid #fecdd3; border-radius: var(--radius-sm); padding: 8px 12px; }
.stock-labels { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 6px; }
.progress-track { height: 10px; background: #ffe4e6; border-radius: 10px; overflow: hidden; position: relative; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #f43f5e, #e11d48); border-radius: 10px; transition: width 0.8s ease; }
.live-activity-ticker { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 5px 10px; border-radius: var(--radius-pill); }
.green-live-dot { width: 7px; height: 7px; background: #10b981; border-radius: 50%; animation: pulse 1.2s infinite; }

/* 3. Dedicated Sunflower Spotlight */
.bg-warm { background: #fdfaf6; }
.spotlight-dual-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.spotlight-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #ffffff; box-shadow: var(--shadow-md); border: 1px solid #f0e6dd; }
.spotlight-ribbon { position: absolute; top: 16px; left: 16px; background: #d97706; color: #ffffff; font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: 4px; z-index: 2; }
.spotlight-product-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.artisan-badge-overlay { position: absolute; bottom: 14px; left: 14px; right: 14px; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; color: #78350f; text-align: center; }
.product-category-sub { font-size: 0.8rem; font-weight: 800; color: #d97706; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.spotlight-title { font-size: 1.8rem; line-height: 1.25; margin-bottom: 4px; }
.urdu-subtitle { font-size: 1rem; color: #78350f; margin-bottom: 12px; font-weight: 600; }
.rating-strip { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #b45309; margin-bottom: 14px; }
.price-display-box { background: #ffffff; border: 1px solid #fed7aa; border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; }
.price-line { display: flex; align-items: baseline; gap: 10px; }
.save-tag { background: #dcfce7; color: #15803d; font-size: 0.8rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.cod-pill { font-size: 0.75rem; color: #047857; font-weight: 700; display: block; margin-top: 4px; }
.feature-bullets { list-style: none; margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.feature-bullets li { padding-left: 18px; position: relative; }
.feature-bullets li::before { content: "•"; color: #d97706; font-size: 1.4rem; position: absolute; left: 0; top: -5px; }
.swatch-row-box, .size-row-box { margin-bottom: 14px; }
.swatches-options { display: flex; gap: 8px; margin-top: 6px; }
.swatch-chip { border: 2px solid #e5e7eb; background: #ffffff; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.swatch-chip.active { border-color: #d97706; background: #fffbeb; }
.swatch-chip .dot { width: 14px; height: 14px; border-radius: 50%; }
.size-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.size-chip { border: 2px solid #e5e7eb; background: #ffffff; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.size-chip.active { border-color: #d97706; background: #d97706; color: #ffffff; }
.spotlight-btn-group { display: flex; flex-direction: column; gap: 10px; }
/* 4. Duo Booties & Cap Spotlight */
.trendora-duo-spotlight { background: #ffffff; }
.duo-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.duo-card { border: 1.5px solid #f0e6dd; border-radius: var(--radius-lg); overflow: hidden; background: #fffcfb; display: flex; flex-direction: column; }
.duo-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #ffffff; }
.duo-media img { width: 100%; height: 100%; object-fit: cover; }
.duo-tag { position: absolute; top: 14px; left: 14px; background: #111827; color: #fff; font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: 4px; }
.duo-tag.highlight { background: var(--primary-color); }
.duo-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.duo-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 2px; }
.duo-urdu { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; }
.duo-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.price-val { font-size: 1.45rem; font-weight: 800; color: var(--primary-color); }
.price-old { font-size: 0.95rem; color: #9ca3af; text-decoration: line-through; }
.discount-badge { background: #dcfce7; color: #15803d; font-size: 0.75rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.duo-points { list-style: none; font-size: 0.82rem; color: #4b5563; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.duo-actions { margin-top: auto; }
.w-full { width: 100%; }

/* 5. Comparison Section */
.trendora-comparison-section { background: #fdfbf9; }
.comparison-table-wrapper { overflow-x: auto; background: #ffffff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid #ebdcd0; }
.comparison-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; min-width: 580px; }
.comparison-table th, .comparison-table td { padding: 14px 16px; border-bottom: 1px solid #f3f4f6; }
.comparison-table th { background: #18181b; color: #ffffff; font-weight: 700; }
.col-ordinary { background: #fef2f2; color: #991b1b; }
.col-trendora { background: #ecfdf5; color: #065f46; }
.text-danger { color: #dc2626; }
.text-success { color: #16a34a; }
.font-bold { font-weight: 700; }

/* 6. Customer Photo Wall */
.trendora-photo-wall { background: #ffffff; }
.photo-wall-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.photo-wall-card { border: 1px solid #f0e6dd; border-radius: var(--radius-md); overflow: hidden; background: #ffffff; box-shadow: var(--shadow-sm); }
.card-image-wrap { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.card-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.city-tag { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); color: #ffffff; font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.card-caption { padding: 14px; }
.card-caption .stars { color: #f59e0b; font-size: 0.9rem; margin-bottom: 4px; }
.card-caption p { font-size: 0.85rem; color: #4b5563; line-height: 1.45; margin-bottom: 8px; font-style: italic; }
.card-caption .author { font-size: 0.78rem; font-weight: 700; color: var(--text-dark); display: block; }

/* 7. Live Purchase Toast */
.trendora-live-toast { position: fixed; bottom: 85px; left: 16px; background: #ffffff; border: 1.5px solid #10b981; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px 14px; z-index: 1500; display: flex; align-items: center; gap: 10px; max-width: 320px; animation: slideUp 0.4s ease; transition: opacity 0.3s; }
.toast-dot { width: 10px; height: 10px; border-radius: 50%; background: #10b981; animation: pulse 1s infinite; flex-shrink: 0; }
.toast-msg strong { display: block; font-size: 0.85rem; color: #111827; }
.toast-msg span { font-size: 0.75rem; color: #6b7280; }
.toast-close { font-size: 1.2rem; color: #9ca3af; margin-left: auto; cursor: pointer; padding: 2px; }

/* Responsive Adjustments for Part 2 */
@media (min-width: 768px) {
    .flash-deal-content { flex-direction: row; justify-content: space-between; align-items: center; }
    .stock-progress-wrapper { min-width: 320px; }
    .spotlight-dual-grid { grid-template-columns: 1fr 1.2fr; gap: 40px; }
    .spotlight-dual-grid.reverse { grid-template-columns: 1fr 1fr; }
    .spotlight-btn-group { flex-direction: row; }
    .duo-grid { grid-template-columns: 1fr 1fr; }
    .photo-wall-grid { grid-template-columns: repeat(4, 1fr); }
    .category-stories-scroll { justify-content: center; }
    .trendora-live-toast { bottom: 24px; left: 24px; }
}
/* ==========================================================================
   MODERN BOUTIQUE HERO & SUSPENSE GIFT STYLES
   ========================================================================== */

/* Modern Hero */
.trendora-modern-hero { background: linear-gradient(135deg, #fdf8f6 0%, #fff1f0 100%); padding: 36px 0 46px; border-bottom: 1px solid #f6e6e2; position: relative; overflow: hidden; }
.hero-layout { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.hero-pill-badge { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #fed7aa; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 700; color: #c2410c; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.hero-main-title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; line-height: 1.25; color: #111827; margin-bottom: 14px; }
.gradient-text { color: var(--primary-color); background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-description { font-size: 1.05rem; color: #4b5563; line-height: 1.6; margin-bottom: 20px; }
.hero-perks-inline { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; font-size: 0.92rem; font-weight: 600; color: #374151; }
.p-check { color: #16a34a; font-weight: 900; }
.hero-action-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.btn-hero-shop { background: #111827; color: #ffffff; font-weight: 800; font-size: 1.05rem; padding: 14px 24px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); transition: background 0.2s; }
.btn-hero-shop:hover { background: #000000; }
.btn-hero-whatsapp { background: var(--whatsapp-green); color: #ffffff; font-weight: 700; font-size: 1rem; padding: 13px 20px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25); }
.hero-trust-rating { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: #4b5563; }
.hero-trust-rating .rating-stars { color: #f59e0b; }
.hero-visual-card { position: relative; }
.hero-card-inner { background: #ffffff; padding: 12px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; border: 1px solid #f0e6dd; }
.floating-sale-pill { position: absolute; top: 20px; left: 20px; background: #111827; color: #ffffff; font-size: 0.78rem; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-pill); z-index: 2; }
.hero-card-img { width: 100%; border-radius: var(--radius-md); object-fit: cover; }
.glass-float-badge { position: absolute; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border: 1px solid #fed7aa; border-radius: var(--radius-md); padding: 8px 12px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-md); z-index: 3; }
.glass-float-badge.top-right { top: 25px; right: 20px; }
.glass-float-badge.bottom-left { bottom: 25px; left: 20px; }
.glass-float-badge strong { display: block; font-size: 0.85rem; color: #111827; }
.glass-float-badge small { font-size: 0.72rem; color: #6b7280; }

/* Interactive Suspense Mystery Box */
.trendora-suspense-section { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-top: 1px solid #fed7aa; border-bottom: 1px solid #fed7aa; text-align: center; }
.mystery-interactive-card { max-width: 680px; margin: 0 auto; }
.suspense-badge { display: inline-block; background: #ea580c; color: #ffffff; font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: 0.05em; margin-bottom: 10px; }
.suspense-title { font-size: 1.8rem; font-weight: 800; color: #7c2d12; margin-bottom: 8px; }
.suspense-sub { font-size: 0.95rem; color: #9a3412; margin-bottom: 24px; line-height: 1.5; }
.interactive-box-wrapper { min-height: 180px; display: flex; align-items: center; justify-content: center; }
.gift-box-visual { width: 130px; height: 130px; background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; box-shadow: 0 10px 25px rgba(211, 47, 47, 0.4); animation: bounce 2s infinite; }
.gift-box-visual::before { content: ""; position: absolute; width: 22px; height: 100%; background: #fbbf24; }
.gift-box-visual::after { content: ""; position: absolute; height: 22px; width: 100%; background: #fbbf24; }
.tap-hint-text { position: relative; z-index: 2; background: #ffffff; color: #b71c1c; font-size: 0.75rem; font-weight: 800; padding: 4px 8px; border-radius: 4px; box-shadow: var(--shadow-sm); }
.secret-revealed-card { background: #ffffff; border: 2px dashed #ea580c; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-lg); animation: slideUp 0.4s ease; }
.reveal-burst-icon { font-size: 2.5rem; margin-bottom: 6px; }
.reveal-heading { font-size: 1.3rem; font-weight: 800; color: #9a3412; margin-bottom: 8px; }
.reveal-reward-text { font-size: 0.95rem; color: #4b5563; margin-bottom: 18px; line-height: 1.5; }
.btn-claim-reward { display: inline-flex; align-items: center; gap: 8px; background: #ea580c; color: #ffffff; font-weight: 800; font-size: 0.95rem; padding: 12px 22px; border-radius: var(--radius-pill); }
.suspense-terms { font-size: 0.8rem; color: #c2410c; margin-top: 16px; }

/* Single Product Deep Dive */
.single-product-deep-dive { border-top: 1px solid #f0e6dd; }
.deep-dive-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.deep-dive-card { border: 1px solid #f0e6dd; border-radius: var(--radius-md); overflow: hidden; background: #ffffff; box-shadow: var(--shadow-sm); }
.dd-media { aspect-ratio: 1/1; overflow: hidden; background: #fdfdfd; }
.dd-media img { width: 100%; height: 100%; object-fit: cover; }
.dd-content { padding: 16px; }
.dd-content h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; }
.dd-content p { font-size: 0.88rem; color: #6b7280; line-height: 1.5; }
.washing-care-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-md); padding: 18px; display: flex; align-items: flex-start; gap: 14px; }
.care-icon { font-size: 2rem; }
.care-text h4 { font-size: 1rem; font-weight: 700; color: #166534; margin-bottom: 4px; }
.care-text p { font-size: 0.88rem; color: #15803d; line-height: 1.5; }

@media (min-width: 768px) {
    .hero-layout { grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
    .hero-main-title { font-size: 2.8rem; }
    .hero-action-row { flex-direction: row; }
    .hero-perks-inline { flex-direction: row; flex-wrap: wrap; gap: 16px; }
    .deep-dive-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
   ULTRA MOBILE-FIRST PERFECTION & STOREFRONT REFINEMENTS
   ========================================================================== */

/* 1. Global Viewport & Mobile Reset */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}

/* 2. Brand Hero (Uses Real Uploaded Banner Images) */
.trendora-brand-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111827;
}

.hero-media-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
}

.hero-full-img {
    width: 100%;
    height: auto;
    min-height: 280px;
    max-height: 650px;
    object-fit: cover;
    display: block;
}

.hero-tint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
}

.hero-content-overlay {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 0 14px;
}

.hero-glass-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 580px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 9999px;
    margin-bottom: 8px;
    border: 1px solid #fecaca;
}

.hero-heading {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
    color: #111827;
    margin-bottom: 6px;
}

.hero-subtext {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.45;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.btn-hero-primary {
    background: #111827;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.btn-hero-wa {
    background: var(--whatsapp-green);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.hero-mini-perks {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
}

/* 3. Category Stories on Mobile */
.trendora-category-stories {
    background: #ffffff;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.category-stories-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.category-stories-scroll::-webkit-scrollbar {
    display: none;
}

.story-bubble-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 68px;
}

.bubble-ring {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bubble-icon-emoji {
    font-size: 1.6rem;
}

.bubble-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1f2937;
    margin-top: 4px;
    white-space: nowrap;
}

.bubble-tag {
    font-size: 0.62rem;
    color: #9ca3af;
}

/* 4. Products Grid on Mobile (2 Column Layout Like Modern eCommerce Apps) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}

.trendora-product-card {
    background: #ffffff;
    border: 1px solid #f0e6dd;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-card-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #fdfdfd;
}

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

.product-card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-title {
    font-size: 0.88rem !important;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}

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

.current-price {
    font-size: 1.15rem !important;
    font-weight: 800;
    color: var(--primary-color);
}

.old-price {
    font-size: 0.82rem !important;
    color: #9ca3af;
    text-decoration: line-through;
}

.stock-indicator {
    font-size: 0.7rem !important;
    margin-bottom: 8px !important;
}

.card-buttons-row {
    display: flex !important;
    gap: 6px !important;
    margin-top: auto;
}

.btn-card-quick-order {
    flex: 1;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.78rem !important;
    font-weight: 700;
    padding: 8px 4px !important;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-card-wa {
    padding: 8px 10px !important;
    border-radius: 6px;
    flex-shrink: 0;
}

/* 5. Desktop Enhancements */
@media (min-width: 768px) {
    .hero-content-overlay {
        position: absolute;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        padding: 0 40px;
    }
    
    .hero-glass-box {
        padding: 30px;
        max-width: 520px;
    }

    .hero-heading {
        font-size: 2.2rem;
    }

    .hero-subtext {
        -webkit-line-clamp: 3;
        font-size: 1rem;
    }

    .hero-ctas {
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }

    .product-card-body {
        padding: 16px;
    }

    .product-title {
        font-size: 1.05rem !important;
    }

    .current-price {
        font-size: 1.35rem !important;
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ==========================================================================
   TRENDORA HERO MULTI-SLIDE BANNER SLIDER
   ========================================================================== */
.trendora-hero-slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fbf7f4;
    user-select: none;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    min-height: 480px;
    display: grid;
    grid-template-areas: "slide";
}

.slider-slide {
    grid-area: slide;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
    z-index: 1;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 480px;
    width: 100%;
}

.slider-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.slide-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%),
                linear-gradient(90deg, rgba(0,0,0,0.3) 0%, transparent 60%);
    z-index: 1;
}

.slide-content-container {
    position: relative;
    z-index: 2;
    padding: 40px 16px 60px;
    width: 100%;
}

.slide-glass-card {
    max-width: 520px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 18px;
    padding: 24px 20px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    animation: fadeInUp 0.5s ease both;
}

.slide-pill {
    display: inline-block;
    background: #ffebee;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 9999px;
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}

.slide-pill.gold {
    background: #fef3c7;
    color: #b45309;
}

.slide-title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 800;
    color: #1e1e24;
    line-height: 1.25;
    margin-bottom: 10px;
}

.slide-desc {
    font-size: 0.92rem;
    color: #4b5563;
    line-height: 1.55;
    margin-bottom: 18px;
}

.slide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-slider-primary {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(211, 47, 47, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-slider-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.45);
    color: #ffffff;
}

.btn-slider-wa {
    background: var(--whatsapp-green);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-slider-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.38);
    color: #ffffff;
}

.slider-controls {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.slider-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #1e1e24;
    cursor: pointer;
    line-height: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.slider-arrow:hover {
    background: #ffffff;
    transform: scale(1.08);
}

.slider-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-dots .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    border: 2px solid rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.slider-dots .dot.active {
    width: 26px;
    border-radius: 8px;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

@media (min-width: 768px) {
    .slider-wrapper {
        min-height: 560px;
    }
    .slider-slide {
        min-height: 560px;
    }
    .slide-content-container {
        padding: 50px 30px;
    }
    .slide-glass-card {
        padding: 34px 30px;
    }
    .slide-title {
        font-size: 2.2rem;
    }
    .slide-desc {
        font-size: 1rem;
    }
}

/* ==========================================================================
   HOMEPAGE: BESTSELLER SPOTLIGHT PRODUCT CARD
   ========================================================================== */
.trendora-bestseller-section {
    background: #fdfbf9;
    position: relative;
}

.bestseller-card-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    background: #ffffff;
    border: 1px solid #eeddcc;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.07);
    align-items: center;
}

.bestseller-media-side {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
}

.bestseller-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
    z-index: 2;
}

.bestseller-main-img {
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.bestseller-media-side:hover .bestseller-main-img {
    transform: scale(1.03);
}

.bestseller-info-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bestseller-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.bestseller-rating .stars {
    color: #f59e0b;
    font-size: 1.1rem;
}

.bestseller-rating .score {
    font-weight: 800;
}

.bestseller-rating .reviews-count {
    color: var(--text-muted);
}

.bestseller-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.3;
    color: #1a1a1a;
}

.bestseller-desc {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
}

.bestseller-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
}

.bs-current-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary-color);
}

.bs-old-price {
    font-size: 1.1rem;
    text-decoration: line-through;
    color: var(--text-light);
}

.bs-save-tag {
    background: #dcfce7;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.bs-options-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.bs-color-chips {
    display: flex;
    gap: 8px;
}

.color-chip {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-chip.active, .color-chip:hover {
    transform: scale(1.15);
    border-color: #1e1e24;
}

.bs-size-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.size-chip {
    background: #f1f5f9;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.size-chip.active, .size-chip:hover {
    background: var(--primary-color);
    color: #ffffff;
}

.bs-stock-bar {
    margin: 6px 0;
}

.bs-stock-bar .progress-track {
    width: 100%;
    height: 7px;
    background: #fee2e2;
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: 4px;
}

.bs-stock-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    border-radius: 9999px;
}

.bs-stock-bar small {
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.82rem;
}

.bs-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.btn-bs-order {
    flex: 1;
    min-width: 200px;
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 13px 20px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(211, 47, 47, 0.35);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-bs-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(211, 47, 47, 0.45);
}

.btn-bs-view {
    padding: 12px 18px;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #334155;
    transition: all 0.2s ease;
}

.btn-bs-view:hover {
    border-color: #1e1e24;
    color: #0f172a;
}

.btn-bs-wa {
    background: var(--whatsapp-green);
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    transition: transform 0.2s ease;
}

.btn-bs-wa:hover {
    transform: scale(1.08);
}

@media (min-width: 840px) {
    .bestseller-card-layout {
        grid-template-columns: 1fr 1.2fr;
        padding: 32px;
        gap: 40px;
    }
    .bestseller-main-img {
        max-height: 440px;
    }
    .bestseller-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   HOMEPAGE: 3-VIDEO RESPONSIVE GRID (Desktop 3 in 1 row | Mobile 3 stacked)
   ========================================================================== */
.trendora-triple-videos-section {
    background: #111827;
    color: #ffffff;
}

.trendora-triple-videos-section .section-heading .title-serif {
    color: #ffffff;
}

.trendora-triple-videos-section .section-heading .subtitle {
    color: #94a3b8;
}

.trendora-triple-videos-section .section-heading .sub-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #fbbf24;
}

.triple-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
}

@media (max-width: 640px) {
    .triple-videos-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

.triple-video-card {
    background: #1f2937;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
}

.video-media-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #000;
    overflow: hidden;
}

.trendora-grid-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-grid-sound {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 3;
    transition: transform 0.2s ease, background 0.2s ease;
}

.btn-grid-sound:hover {
    transform: scale(1.1);
    background: rgba(0,0,0,0.85);
}

.video-card-overlay-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 3;
}

/* ==========================================================================
   HOMEPAGE: HOW IT WORKS / CRAFT JOURNEY (WITH IMAGE SLOT)
   ========================================================================== */
.trendora-how-it-works-section {
    background: #ffffff;
}

.how-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

.how-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
    background: #f8fafc;
}

.how-showcase-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.how-floating-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.9);
    padding: 12px 18px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}

.how-floating-badge .badge-icon {
    font-size: 1.8rem;
}

.how-floating-badge strong {
    display: block;
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.how-floating-badge p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.how-steps-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.how-step-item {
    display: flex;
    gap: 18px;
    padding: 18px 20px;
    background: #fdfbf9;
    border: 1px solid #faeee6;
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.how-step-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.how-step-item.highlight-step {
    background: #fff8f8;
    border-color: #fca5a5;
}

.how-step-item .step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: #ffffff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}

.how-step-item .step-content h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e1e24;
    margin-bottom: 4px;
}

.how-step-item .step-content p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 840px) {
    .how-layout-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 48px;
    }
}

/* ==========================================================================
   COMPLETE SINGLE PRODUCT PAGE CRO STYLING
   ========================================================================== */
.trendora-single-product-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 16px 50px;
}

.breadcrumb-nav {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.breadcrumb-nav a:hover {
    color: var(--primary-color);
}

.product-layout-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
}

@media (min-width: 768px) {
    .product-layout-columns {
        grid-template-columns: 1fr 1.15fr;
        gap: 44px;
    }
    .product-gallery-column {
        position: sticky;
        top: 90px;
    }
}

.gallery-main-wrapper {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eeddcc;
    box-shadow: 0 12px 36px rgba(0,0,0,0.06);
}

.product-badge-float {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.tag-handmade {
    background: #111827;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

.tag-delivery {
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 6px;
}

.main-prod-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #fdfbf9;
}

.product-thumbnails-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.thumb-img {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.thumb-img.active, .thumb-img:hover {
    border-color: var(--primary-color) !important;
    transform: scale(1.04);
}

.single-trust-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}

.st-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff8f8;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #fee2e2;
}

.st-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.st-item strong {
    display: block;
    font-size: 0.85rem;
    color: #111827;
    line-height: 1.25;
}

.st-item p {
    font-size: 0.76rem;
    color: #6b7280;
    line-height: 1.35;
    margin: 2px 0 0 0;
}

/* Buying Column */
.product-buying-column {
    display: flex;
    flex-direction: column;
}

.product-rating-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.product-rating-reviews .stars {
    color: #f59e0b;
    font-size: 1.1rem;
}

.product-rating-reviews .rating-num {
    font-weight: 800;
}

.product-rating-reviews .review-count-link {
    color: var(--text-muted);
}

.single-product-title {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.25;
    color: #111827;
    margin-bottom: 8px;
}

.single-product-urdu {
    font-size: 1rem;
    color: #9a3412;
    font-weight: 600;
    margin-bottom: 16px;
}

.single-price-box {
    background: #fff8f8;
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.price-figures {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 6px;
}

.price-figures .sale-price {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--primary-color);
}

.price-figures .regular-price {
    font-size: 1.3rem;
    color: #9ca3af;
    text-decoration: line-through;
}

.save-badge {
    background: #dcfce7;
    color: #15803d;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 6px;
}

.free-shipping-tag {
    font-size: 0.88rem;
    color: #9a3412;
    font-weight: 600;
}

.social-urgency-banner {
    background: #fef2f2;
    border: 1px dashed #ef4444;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #991b1b;
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.social-urgency-banner .flame-icon {
    font-size: 1.1rem;
}

.variant-selection-section {
    margin-bottom: 18px;
}

.variant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    color: #1e1e24;
}

.link-size-guide {
    color: var(--primary-color);
    text-decoration: underline;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: none;
}

.swatch-circles-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.swatch-color-pill {
    border: 2px solid #e2e8f0;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.swatch-color-pill.active, .swatch-color-pill:hover {
    border-color: var(--primary-color);
    background: #fff5f5;
    color: var(--primary-dark);
}

.swatch-color-pill .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
}

.size-pills-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.size-pill {
    border: 2px solid #e2e8f0;
    background: #ffffff;
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.size-pill.active, .size-pill:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #ffffff;
}

/* Bundles Scheme */
.quantity-bundle-box {
    margin-bottom: 22px;
}

.quantity-bundle-box label {
    display: block;
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e1e24;
    margin-bottom: 8px;
}

.bundle-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.single-bundle-card {
    border: 2px solid #e2e8f0;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.single-bundle-card.active {
    border-color: var(--primary-color);
    background: #fff8f8;
}

.single-bundle-card.best-value {
    border-color: var(--gold-accent);
}

.b-badge-corner {
    position: absolute;
    top: -10px;
    right: 14px;
    background: var(--gold-accent);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.b-select-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: transparent;
    font-weight: 800;
    flex-shrink: 0;
}

.single-bundle-card.active .b-select-circle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.b-info {
    flex: 1;
}

.b-info strong {
    display: block;
    font-size: 0.95rem;
    color: #111827;
}

.b-info small {
    font-size: 0.8rem;
    color: #64748b;
}

.b-pricing {
    text-align: right;
}

.b-pricing .b-price {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-color);
}

.b-pricing .b-cut {
    font-size: 0.82rem;
    color: #94a3b8;
    text-decoration: line-through;
}

/* Buying Action Buttons */
.single-buying-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-primary-order {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: #ffffff !important;
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(211, 47, 47, 0.35);
    cursor: pointer;
    text-align: left;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(211, 47, 47, 0.45);
}

.btn-primary-order .btn-icon {
    font-size: 1.7rem;
}

.btn-primary-order .btn-text strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
}

.btn-primary-order .btn-text small {
    font-size: 0.8rem;
    opacity: 0.92;
}

.btn-add-to-cart-drawer {
    background: #1e1e24;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 14px 22px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: background 0.2s ease;
}

.btn-add-to-cart-drawer:hover {
    background: #000000;
}

.btn-primary-wa {
    background: var(--whatsapp-green);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 22px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
    transition: transform 0.2s ease;
}

.btn-primary-wa:hover {
    transform: scale(1.02);
}

.product-guarantee-ribbon {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.84rem;
    color: #475569;
}

/* Deep Dive Craft Section Below Product */
.deep-dive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .deep-dive-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

.deep-dive-card {
    background: #ffffff;
    border: 1px solid #eeddcc;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.dd-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.dd-content {
    padding: 18px 16px;
}

.dd-content h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
}

.dd-content p {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.washing-care-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 18px 22px;
}

.washing-care-box .care-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.washing-care-box h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #166534;
    margin-bottom: 4px;
}

.washing-care-box p {
    font-size: 0.88rem;
    color: #15803d;
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   DEDICATED CART & CHECKOUT DRAWER
   ========================================================================== */
.trendora-cart-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.trendora-cart-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.trendora-cart-drawer {
    position: fixed;
    top: 0;
    right: -480px;
    width: 100%;
    max-width: 440px;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    box-shadow: -8px 0 35px rgba(0, 0, 0, 0.2);
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.trendora-cart-drawer.open {
    right: 0;
}

.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.cd-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-title-wrap h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.cd-count-badge {
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 50%;
}

.btn-close-drawer {
    font-size: 1.8rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    border: none;
    background: none;
}

.cart-free-shipping-bar {
    background: #fffbeb;
    padding: 10px 20px;
    border-bottom: 1px solid #fef3c7;
    font-size: 0.82rem;
    color: #92400e;
}

.shipping-meter-track {
    width: 100%;
    height: 6px;
    background: #fde68a;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 5px;
}

.shipping-meter-fill {
    height: 100%;
    background: #16a34a;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.cart-items-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.cart-item-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.ci-thumb {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    object-fit: cover;
    background: #f8fafc;
}

.ci-details {
    flex: 1;
}

.ci-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
}

.ci-meta {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 6px;
}

.ci-qty-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ci-qty-ctrls {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
}

.ci-qty-ctrls button {
    width: 26px;
    height: 26px;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.ci-qty-ctrls span {
    padding: 0 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.ci-price {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary-color);
}

.ci-remove {
    position: absolute;
    top: 10px;
    right: 0;
    color: #94a3b8;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
}

.cart-coupon-section {
    margin: 16px 0;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.cart-coupon-section label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    display: block;
    margin-bottom: 6px;
}

.coupon-input-row {
    display: flex;
    gap: 8px;
}

.coupon-input-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.coupon-input-row button {
    background: #111827;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.coupon-applied-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    margin-top: 6px;
}

.cart-bill-summary {
    padding: 12px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.bill-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #475569;
}

.grand-total-row {
    font-size: 1.1rem;
    color: #111827;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #cbd5e1;
}

.cart-checkout-form-box {
    background: #fdfbf9;
    border: 1px solid #faeee6;
    border-radius: 12px;
    padding: 16px;
}

.cart-checkout-form-box h4 {
    font-size: 0.98rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.cart-checkout-form-box .form-sub {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 12px;
}

.form-field {
    margin-bottom: 10px;
}

.form-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    box-sizing: border-box;
}

.btn-drawer-checkout-submit {
    width: 100%;
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    padding: 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.35);
    margin-top: 6px;
}

.btn-drawer-wa-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--whatsapp-green);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 11px;
    border-radius: 10px;
    margin-top: 8px;
    text-align: center;
}

.drawer-guarantee-note {
    font-size: 0.78rem;
    color: #64748b;
    text-align: center;
    margin-top: 10px;
}

/* Cart Success View */
.cart-order-success-view {
    padding: 40px 24px;
    text-align: center;
}

.cart-order-success-view .success-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.cart-order-success-view h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #166534;
    margin-bottom: 6px;
}

.success-order-num {
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.95rem;
    display: inline-block;
    margin-bottom: 12px;
}

.btn-success-wa {
    display: block;
    background: var(--whatsapp-green);
    color: #ffffff !important;
    font-weight: 800;
    padding: 13px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.btn-continue-browsing {
    background: #1e1e24;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 700;
}

/* ==========================================================================
   HOMEPAGE: LUCKY DISCOUNT SPINNER WHEEL
   ========================================================================== */
.trendora-spin-wheel-section {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    color: #ffffff;
}

.trendora-spin-wheel-section .section-heading .title-serif {
    color: #ffffff;
}

.trendora-spin-wheel-section .section-heading .subtitle {
    color: #94a3b8;
}

.spin-wheel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.wheel-outer-frame {
    position: relative;
    width: 360px;
    height: 360px;
    max-width: 88vw;
    max-height: 88vw;
    border-radius: 50%;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45), 0 0 0 6px #f59e0b, 0 0 0 12px #ffffff;
    background: #1e1b4b;
}

.wheel-pointer {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 38px;
    color: #ef4444;
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
    line-height: 1;
}

.wheel-svg-wrap {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.trendora-svg-wheel {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    transform-origin: 50% 50%;
    transition: transform 4.8s cubic-bezier(0.12, 0.88, 0.18, 1);
}

.btn-spin-wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    color: #111827;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border: 4px solid #f59e0b;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    z-index: 5;
    transition: transform 0.2s ease;
}

.btn-spin-wheel:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.btn-spin-wheel span {
    font-size: 0.95rem;
    line-height: 1;
}

.btn-spin-wheel small {
    font-size: 0.65rem;
    color: #b91c1c;
}

.spin-result-card {
    background: #ffffff;
    color: #111827;
    padding: 24px 30px;
    border-radius: 16px;
    max-width: 480px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.3);
    animation: fadeInUp 0.4s ease both;
}

.result-celebration {
    font-size: 2.6rem;
    margin-bottom: 6px;
}

.result-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #15803d;
    margin-bottom: 6px;
}

.result-msg {
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 16px;
}

.promo-pill {
    background: #fee2e2;
    color: #b91c1c;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1.1rem;
}

.result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-apply-discount {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.btn-shop-with-discount {
    background: #111827;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 18px;
    border-radius: 8px;
}

/* ==========================================================================
   Category Filter Tabs
   ========================================================================== */
.category-filter-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    overflow-x: auto;
    padding: 6px 4px;
    -webkit-overflow-scrolling: touch;
}

.category-filter-tabs {
    display: inline-flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
}

.cat-tab-btn {
    background: transparent;
    border: none;
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cat-tab-btn:hover {
    color: #991b1b;
    background: rgba(255, 255, 255, 0.7);
}

.cat-tab-btn.active {
    background: #991b1b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(153, 27, 27, 0.3);
}

/* ==========================================================================
   Bestseller Card Color & Size Interactive Chips
   ========================================================================== */
.bs-color-chips {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-chip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.color-chip:hover {
    transform: scale(1.15);
}

.color-chip.active {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #991b1b;
}

.bs-size-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.size-chip {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.size-chip:hover {
    border-color: #991b1b;
    color: #991b1b;
}

.size-chip.active {
    background: #991b1b;
    color: #ffffff;
    border-color: #991b1b;
    box-shadow: 0 3px 10px rgba(153, 27, 27, 0.25);
}

/* ==========================================================================
   Responsive Comparison Section (Desktop Table vs Mobile Cards)
   ========================================================================== */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: grid !important;
    }
}

.comparison-cards-mobile {
    grid-template-columns: 1fr;
    gap: 14px;
}

.comp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.comp-card-header {
    background: #f8fafc;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.comp-card-header .comp-icon {
    font-size: 1.3rem;
}

.comp-card-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.comp-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comp-side {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.comp-side.bad {
    background: #fef2f2;
    color: #991b1b;
    border-left: 3px solid #ef4444;
}

.comp-side.bad .cross {
    font-weight: 800;
    display: block;
    margin-bottom: 2px;
}

.comp-side.good {
    background: #f0fdf4;
    color: #166534;
    border-left: 3px solid #22c55e;
}

.comp-side.good .tick {
    font-weight: 800;
    display: block;
    margin-bottom: 2px;
}

/* ==========================================================================
   Floating Lucky Spin Tab Widget
   ========================================================================== */
.floating-spin-widget {
    position: fixed;
    bottom: 95px;
    left: 18px;
    z-index: 995;
}

.spin-float-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #b91c1c 0%, #d97706 100%);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(185, 28, 28, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: floatPulse 3.5s ease-in-out infinite;
}

.spin-float-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 30px rgba(185, 28, 28, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.spin-float-btn .spin-icon {
    font-size: 1.4rem;
    animation: rotateSlow 8s linear infinite;
}

.spin-float-btn .spin-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.spin-float-btn .spin-main-text {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.spin-float-btn .spin-sub-text {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.92;
}

.spin-float-btn .spin-badge-live {
    background: #ffffff;
    color: #b91c1c;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes floatPulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes rotateSlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .floating-spin-widget {
        bottom: 80px;
        left: 12px;
    }

    .spin-float-btn {
        padding: 8px 12px;
    }

    .spin-float-btn .spin-sub-text {
        display: none;
    }
}

/* ==========================================================================
   Spotlight Review Card
   ========================================================================== */
.spotlight-review {
    background: #ffffff;
    border: 1px solid #fecaca;
    box-shadow: 0 12px 36px rgba(153, 27, 27, 0.08);
    border-radius: 18px;
    padding: 30px;
    text-align: center;
}

.spotlight-review .review-stars {
    color: #f59e0b;
    font-size: 1.4rem;
    margin-bottom: 12px;
}

.spotlight-review .review-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #991b1b;
    margin-bottom: 12px;
}

.spotlight-review .review-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 20px;
}

.spotlight-review .reviewer-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* ==========================================================================
   SITEWIDE SPIN WHEEL MODAL DIALOG
   ========================================================================== */
.modal-dialog-spin {
    max-width: 440px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #334155;
}

.modal-dialog-spin .modal-header {
    border-bottom: 1px solid #1e293b !important;
}

.modal-dialog-spin .modal-title {
    color: #ffffff !important;
    font-size: 1.15rem !important;
}

.modal-dialog-spin .modal-sub {
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
}

.modal-dialog-spin .btn-close-modal {
    color: #94a3b8 !important;
}

.modal-dialog-spin .wheel-outer-frame {
    width: 300px;
    height: 300px;
    max-width: 78vw;
    max-height: 78vw;
    margin: 0 auto;
}

.modal-dialog-spin .btn-spin-wheel {
    width: 62px;
    height: 62px;
}

.modal-dialog-spin .btn-spin-wheel span {
    font-size: 0.88rem;
}

.modal-dialog-spin .btn-spin-wheel small {
    font-size: 0.6rem;
}

.slide-media-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ==========================================================================
   MOBILE-ONLY ALIGNMENT & OVERFLOW PREVENTION (STRICTLY <= 768px)
   Preserves 100% natural font sizes and button weights
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Mobile Header Alignment: Hide header WhatsApp button so Trendora logo has full space */
    .btn-header-wa {
        display: none !important;
    }
    .header-inner {
        padding: 0 16px;
    }
    .site-branding .site-logo-link {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* 2. Hero Banner Slider: Clean height without overlay cards */
    .trendora-hero-slider-section .slider-wrapper,
    .trendora-hero-slider-section .slider-slide {
        min-height: 240px;
        height: 60vw;
        max-height: 420px;
    }

    /* 3. Product Page Layout: Prevent horizontal scroll while keeping normal sizing */
    .trendora-single-product-page,
    .woocommerce-product-page-custom {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .product-layout-columns {
        display: flex;
        flex-direction: column;
        gap: 28px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .product-gallery-column,
    .product-buying-column {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Size pills: Wrap neatly without cutting off */
    .size-pills-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    .size-pill {
        flex: 0 0 auto;
        box-sizing: border-box;
    }

    /* Savings Scheme Bundles: Full width fit */
    .quantity-bundle-box,
    .bundle-cards-list {
        width: 100%;
        box-sizing: border-box;
    }
    .single-bundle-card {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
    }
    .single-bundle-card .b-info {
        flex: 1 1 auto;
        min-width: 0;
    }
    .single-bundle-card .b-pricing {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Trust Features Grid: Clean 2 columns with neat spacing */
    .single-trust-features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .single-trust-features-grid .st-item {
        min-width: 0;
        box-sizing: border-box;
    }

    /* Action Buttons: Full width fit */
    .single-buying-actions {
        width: 100%;
        box-sizing: border-box;
    }
    .btn-primary-order,
    .btn-add-to-cart-drawer,
    .btn-primary-wa {
        width: 100%;
        box-sizing: border-box;
    }

    /* 4. Bottom Sticky Bar & Floating Buttons Alignment */
    .trendora-sticky-mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        z-index: 990;
        background: #ffffff;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        box-sizing: border-box;
    }
    .floating-whatsapp-widget {
        bottom: 74px !important;
        right: 14px !important;
        z-index: 995 !important;
    }
    .wa-float-circle {
        width: 48px !important;
        height: 48px !important;
    }
    .wa-float-circle svg {
        width: 26px !important;
        height: 26px !important;
    }
    .floating-spin-widget {
        bottom: 74px !important;
        left: 14px !important;
        z-index: 995 !important;
    }
    .spin-float-btn {
        padding: 8px 14px !important;
        border-radius: 40px !important;
    }
    .spin-float-btn .spin-sub-text {
        display: none !important;
    }
    .trendora-live-toast {
        top: 70px !important;
        bottom: auto !important;
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 1200 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    }
}