/* ========================================================= SAGVIRA LUXURY DESIGN SYSTEM The Sagvira brand design system for sagvira.com Fully responsive across Mobile (320px - 576px), Tablet (577px - 992px), Laptop (993px - 1200px) & Desktop (1201px+) ========================================================= */ :root { --sag-black: #111111; --sag-charcoal: #222222; --sag-stone-bg: #FAF8F5; --sag-card-bg: #F8F6F2; --sag-border: #EEEEEE; --sag-border-gold: #E8DCC8; --sag-gold: #C7A15A; --sag-gold-hover: #b38e47; --sag-gold-light: rgba(199, 161, 90, 0.12); --sag-green: #1B7232; --sag-green-bg: #F3F9F4; --sag-gray-text: #666666; --sag-muted: #868686; /* One humanist sans across the whole site, the way Amazon and Palmonas do it. The fallback chain is the native system stack, so the site still reads correctly if Google Fonts is blocked, slow, or unavailable. */ --sag-font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* Display face for headings. Same family, heavier and tighter, which keeps headings distinct without loading a second font file. */ --sag-font-display: var(--sag-font-sans); /* Retained so existing rules keep working; it is no longer a serif. */ --sag-font-serif: var(--sag-font-display); /* Casual wave handwritten script for brand commitments and signature accents. */ --sag-font-script: 'Caveat', 'Dancing Script', 'Brush Script MT', cursive, sans-serif; --sag-heading-weight: 700; --sag-heading-tracking: -0.01em; --sag-radius: 6px; --sag-shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --sag-shadow-md: 0 8px 24px rgba(0,0,0,0.08); } /* ========================================================= TYPOGRAPHY BASE Headings use Nunito Sans with balanced weight and tracking so text reads cleanly across desktop, tablet, and mobile. ========================================================= */ h1, h2, h3, h4, h5, h6 { font-family: var(--sag-font-display); font-weight: var(--sag-heading-weight); letter-spacing: var(--sag-heading-tracking); line-height: 1.25; color: var(--sag-black); word-break: break-word; overflow-wrap: break-word; } h1 { letter-spacing: -0.02em; } /* Display tokens */ [style*="--sag-font-serif"], .sag-hero-title, .sag-section-title, .sag-page-head h1, .sag-empty h2, .sag-404-code { font-family: var(--sag-font-display); font-weight: var(--sag-heading-weight); letter-spacing: var(--sag-heading-tracking); word-break: break-word; overflow-wrap: break-word; } /* ========================================================= RESET & GLOBAL UTILITIES ========================================================= */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Only the root element clips horizontally. Setting overflow-x on as well used to look harmless, but CSS computes the other axis to `auto` whenever one axis is not `visible` -- so quietly became a second scroll container nested inside the viewport's. A touch drag landed on , which had almost nothing to scroll, and `overscroll-behavior-y: contain` below stopped the gesture chaining up to the real scroller. The page simply would not move under a finger. Programmatic window.scrollTo() still worked, which is why every automated check passed. 100vw also includes the scrollbar, so it caused the very overflow it was hiding. */ html { max-width: 100%; overflow-x: hidden; } body { max-width: 100%; } body { font-family: var(--sag-font-sans); color: var(--sag-charcoal); background-color: #FFFFFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: 0; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* ========================================================= 1. ROTATING TOP ANNOUNCEMENT BAR ========================================================= */ .sag-announcement-bar { background-color: var(--sag-black); color: #FFFFFF; text-align: center; padding: 9px 16px; font-size: 11px; letter-spacing: 1.8px; font-weight: 600; text-transform: uppercase; position: relative; overflow: hidden; height: 38px; display: flex; align-items: center; justify-content: center; z-index: 1001; } .sag-ticker-item { transition: opacity 0.4s ease, transform 0.4s ease; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .sag-ticker-item .highlight { color: var(--sag-gold); font-weight: 700; } /* ========================================================= 2. SAGVIRA CLEAN STICKY HEADER ========================================================= */ .sag-header { background: #FFFFFF; border-bottom: 1px solid var(--sag-border); position: sticky; top: 0; z-index: 1000; transition: box-shadow 0.3s ease, background 0.3s ease; } .sag-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .sag-header-container { max-width: 1440px; margin: 0 auto; padding: 0 32px; height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .sag-logo a { font-family: var(--sag-font-sans); font-size: 22px; font-weight: 800; letter-spacing: 3px; color: var(--sag-black); text-decoration: none; text-transform: uppercase; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .sag-logo a span.sub { font-size: 9px; letter-spacing: 2px; color: var(--sag-gold); font-weight: 700; } /* Desktop Navigation */ .sag-desktop-nav { display: flex; align-items: center; gap: 22px; } .sag-nav-link { font-size: 13px; font-weight: 600; color: var(--sag-charcoal); text-decoration: none; letter-spacing: 0.5px; text-transform: capitalize; position: relative; padding: 6px 0; transition: color 0.2s ease; } .sag-nav-link:hover, .sag-nav-link.active { color: var(--sag-black); } .sag-nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--sag-gold); transition: width 0.25s ease; } .sag-nav-link:hover::after, .sag-nav-link.active::after { width: 100%; } .sag-nav-link.badge-link { color: var(--sag-gold); font-weight: 700; } /* Header Search */ .sag-search-wrap { flex: 0 1 280px; position: relative; } .sag-search-wrap input { width: 100%; height: 38px; background: var(--sag-stone-bg); border: 1px solid var(--sag-border); border-radius: 20px; padding: 0 38px 0 16px; font-size: 13px; font-family: var(--sag-font-sans); outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .sag-search-wrap input:focus { border-color: var(--sag-gold); background: #FFFFFF; } .sag-search-wrap i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--sag-gray-text); font-size: 13px; pointer-events: none; } /* Header Actions */ .sag-header-actions { display: flex; align-items: center; gap: 16px; } .sag-action-btn { position: relative; color: var(--sag-black); font-size: 18px; text-decoration: none; padding: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; } .sag-track-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--sag-black); text-transform: uppercase; letter-spacing: 0.8px; padding: 6px 14px; border-radius: 20px; background: var(--sag-stone-bg); border: 1px solid var(--sag-border); transition: all 0.2s ease; text-decoration: none; white-space: nowrap; } .sag-track-btn:hover { background: var(--sag-black); color: #FFFFFF; border-color: var(--sag-black); } .sag-track-btn i { color: var(--sag-gold); font-size: 12px; } .sag-track-btn:hover i { color: #FFFFFF; } /* ========================================================= TRACK ORDER COMPONENT & LIVE SHIPMENT TIMELINE ========================================================= */ .sag-track-section { max-width: 860px; margin: 40px auto 80px; padding: 0 20px; } .sag-track-card { background: #FFFFFF; border: 1px solid var(--sag-border); border-radius: 8px; padding: 36px 32px; box-shadow: var(--sag-shadow-sm); } .sag-track-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } /* A 48px input and a 161px button do not fit side by side on a 320px phone; the button used to hang 98px off the screen edge. Below the width where both fit, the button takes its own full-width row. */ @media (max-width: 420px) { .sag-track-input, .sag-track-submit { flex: 1 1 100%; min-width: 0; } } .sag-track-input { flex: 1; height: 48px; padding: 0 16px; border: 1.5px solid var(--sag-border); border-radius: var(--sag-radius); font-family: var(--sag-font-sans); font-size: 14px; outline: none; transition: border-color 0.2s ease; } .sag-track-input:focus { border-color: var(--sag-black); } .sag-track-submit { height: 48px; padding: 0 28px; background: var(--sag-black); color: #FFFFFF; border: none; border-radius: var(--sag-radius); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .sag-track-submit:hover { background: var(--sag-gold); color: var(--sag-black); } .sag-timeline-wrap { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--sag-border); } .sag-timeline-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; background: var(--sag-stone-bg); padding: 16px 20px; border-radius: 6px; } .sag-timeline-steps { display: grid; /* `1fr` cannot shrink past its own min-content, so five checkpoint labels held the row at ~344px and it hung off a 320px screen. minmax(0, 1fr) lets the columns give. */ grid-template-columns: repeat(var(--sag-steps, 5), minmax(0, 1fr)); position: relative; margin: 24px 0 16px; gap: 4px; } /* Below that, five columns stop being legible at all, so the timeline turns vertical: one checkpoint per row, which is how a courier app shows it anyway. */ @media (max-width: 380px) { .sag-timeline-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; } .sag-timeline-steps::before, .sag-timeline-steps::after { display: none; } .sag-step-item { flex-direction: row; align-items: center; gap: 12px; text-align: left; } .sag-step-dot { flex: 0 0 auto; } } .sag-timeline-steps::before { content: ''; position: absolute; top: 18px; left: 12%; right: 12%; height: 3px; background: #E0E0E0; z-index: 1; } .sag-timeline-steps::after { content: ''; position: absolute; top: 18px; left: 12%; width: var(--sag-progress, 0%); max-width: 76%; height: 3px; background: var(--sag-green); z-index: 2; transition: width 0.5s ease; } .sag-step-item { position: relative; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; } .sag-step-dot { width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; border: 3px solid #CCCCCC; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #999999; margin-bottom: 8px; } .sag-step-item.completed .sag-step-dot { background: var(--sag-green); border-color: var(--sag-green); color: #FFFFFF; } .sag-step-item.current .sag-step-dot { background: var(--sag-gold); border-color: var(--sag-black); color: var(--sag-black); box-shadow: 0 0 0 4px rgba(199, 161, 90, 0.25); } .sag-step-title { font-size: 12px; font-weight: 700; color: var(--sag-black); margin-bottom: 2px; } .sag-step-date { font-size: 11px; color: var(--sag-muted); } .sag-action-btn:hover { color: var(--sag-gold); } .sag-action-badge { position: absolute; top: -2px; right: -4px; background: var(--sag-black); color: #FFFFFF; font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; display: flex; align-items: center; justify-content: center; } /* Hamburger Button */ .mobile-menu-btn { display: none; background: none; border: none; font-size: 20px; color: var(--sag-black); cursor: pointer; padding: 6px; align-items: center; justify-content: center; } /* ========================================================= MOBILE MENU DRAWER & OVERLAY (Fixed offscreen by default) ========================================================= */ .mobile-menu { position: fixed; top: 0; left: -100%; width: 320px; max-width: 85vw; height: 100vh; background: #FFFFFF; z-index: 100000; padding: 24px; transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 4px 0 25px rgba(0,0,0,0.15); overflow-y: auto; display: flex; flex-direction: column; } .mobile-menu.active { left: 0; } .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--sag-border); margin-bottom: 20px; } .mobile-menu-header h3 { font-family: var(--sag-font-sans); font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--sag-black); text-transform: uppercase; } .close-menu { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--sag-black); padding: 4px; display: flex; align-items: center; justify-content: center; } .mobile-nav { display: flex; flex-direction: column; gap: 12px; } .mobile-nav a { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sag-black); text-decoration: none; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; transition: color 0.2s ease, padding-left 0.2s ease; } .mobile-nav a:hover { color: var(--sag-gold); padding-left: 6px; } .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99998; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; backdrop-filter: blur(3px); } .overlay.active { opacity: 1; pointer-events: auto; } /* ========================================================= 3. CIRCULAR CATEGORY STORY BUBBLES (Sagvira Signature) ========================================================= */ .sag-stories-wrapper { background: #FFFFFF; border-bottom: 1px solid var(--sag-border); padding: 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sag-stories-wrapper::-webkit-scrollbar { display: none; } .sag-stories-container { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; gap: 20px; justify-content: flex-start; align-items: flex-start; } .sag-story-bubble { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; flex-shrink: 0; width: 76px; text-align: center; cursor: pointer; transition: transform 0.25s ease; } .sag-story-bubble:hover { transform: translateY(-3px); } .sag-story-avatar-wrap { width: 68px; height: 68px; border-radius: 50%; padding: 2.5px; background: linear-gradient(135deg, #C7A15A, #E8DCC8, #C7A15A); position: relative; box-shadow: 0 4px 12px rgba(199, 161, 90, 0.2); flex-shrink: 0; } .sag-story-avatar-wrap.bestseller { background: linear-gradient(135deg, #111111, #C7A15A, #111111); } .sag-story-avatar-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #FAF6F0; border: 2px solid #FFFFFF; } .sag-story-avatar-inner img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .sag-story-bubble:hover .sag-story-avatar-inner img { transform: scale(1.1); } .sag-story-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--sag-charcoal); text-transform: uppercase; text-align: center; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= 4. HERO CAMPAIGN BANNER ========================================================= */ .sag-hero-section { position: relative; background: var(--sag-stone-bg); overflow: hidden; } .sag-hero-layout { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 520px; align-items: center; } .sag-hero-content { padding: 60px 48px; z-index: 2; } .sag-hero-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sag-gold); margin-bottom: 16px; background: var(--sag-gold-light); padding: 5px 14px; border-radius: 20px; } .sag-hero-title { font-family: var(--sag-font-serif); font-size: clamp(32px, 4.5vw, 54px); line-height: 1.15; color: var(--sag-black); font-weight: var(--sag-heading-weight); margin-bottom: 16px; letter-spacing: var(--sag-heading-tracking); } .sag-hero-desc { font-size: 15px; line-height: 1.7; color: var(--sag-gray-text); max-width: 480px; margin-bottom: 30px; } .sag-hero-cta-group { display: flex; gap: 16px; flex-wrap: wrap; } .sag-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 34px; background: var(--sag-black); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border-radius: var(--sag-radius); transition: all 0.3s ease; border: 1px solid var(--sag-black); cursor: pointer; } .sag-btn-primary:hover { background: var(--sag-gold); border-color: var(--sag-gold); color: var(--sag-black); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(199, 161, 90, 0.25); } .sag-btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 34px; background: #FFFFFF; color: var(--sag-black); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border-radius: var(--sag-radius); transition: all 0.3s ease; border: 1px solid var(--sag-black); cursor: pointer; } .sag-btn-secondary:hover { background: var(--sag-black); color: #FFFFFF; transform: translateY(-2px); } .sag-hero-media { position: relative; height: 100%; min-height: 480px; display: flex; } .sag-hero-media img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================= 5. 4-PILLAR TRUST STRIP ========================================================= */ .sag-trust-strip { background: #FFFFFF; border-top: 1px solid var(--sag-border); border-bottom: 1px solid var(--sag-border); padding: 24px 0; } .sag-trust-grid { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .sag-trust-item { display: flex; align-items: center; gap: 14px; } .sag-trust-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--sag-stone-bg); color: var(--sag-gold); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .sag-trust-text h4 { font-size: 13px; font-weight: 800; color: var(--sag-black); margin-bottom: 3px; } .sag-trust-text p { font-size: 11.5px; color: var(--sag-muted); line-height: 1.4; } /* ========================================================= 6. TABBED BESTSELLERS SECTION & PRODUCT CARDS ========================================================= */ .sag-section-header { text-align: center; max-width: 720px; margin: 60px auto 30px; padding: 0 20px; } .sag-section-kicker, .sag-sub-badge { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sag-gold); font-weight: 800; margin-bottom: 8px; display: block; } .sag-section-title { font-family: var(--sag-font-display); font-size: clamp(20px, 4.5vw, 36px); font-weight: var(--sag-heading-weight); color: var(--sag-black); letter-spacing: var(--sag-heading-tracking); line-height: 1.25; word-break: break-word; overflow-wrap: break-word; } .sag-tab-pills { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; } @media (max-width: 640px) { .sag-tab-pills { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; padding: 4px 16px 8px; gap: 8px; margin: 16px 0 0; scroll-padding: 0 16px; } .sag-tab-pills::-webkit-scrollbar { display: none; } .sag-tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 7px 16px; font-size: 11px; } } .sag-tab-btn { background: #FFFFFF; border: 1px solid var(--sag-border); padding: 8px 22px; border-radius: 30px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--sag-charcoal); cursor: pointer; transition: all 0.25s ease; } .sag-tab-btn:hover, .sag-tab-btn.active { background: var(--sag-black); color: #FFFFFF; border-color: var(--sag-black); } .sag-products-grid { max-width: 1440px; margin: 0 auto 70px; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; list-style-type: none; } .sag-products-grid > li, .sag-products-grid li.product, ul.products li.product { list-style: none !important; list-style-type: none !important; } .sag-card { background: #FFFFFF; border-radius: 14px; border: 1px solid #ECECEC; overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .sag-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); border-color: #D8D8D8; } .sag-card-img-wrap { position: relative; aspect-ratio: 1 / 1.15; overflow: hidden; background: var(--sag-card-bg, #F8F6F2); } .sag-card-img-wrap img.primary-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease, transform 0.45s ease; } .sag-card-img-wrap img.hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease, transform 0.45s ease; } .sag-card:hover .sag-card-img-wrap img.hover-img { opacity: 1; transform: scale(1.03); } .sag-card:hover .sag-card-img-wrap img.primary-img { opacity: 0; } /* Badges - matches 28% OFF red badge */ .sag-badge { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase; z-index: 3; line-height: 1.2; } .sag-badge.discount { background: #E53935; color: #FFFFFF; } .sag-badge.bestseller { background: #111111; color: #FFFFFF; } .sag-badge.trending { background: var(--sag-gold); color: #111111; } /* Wishlist Circular Floating Button */ .sag-wishlist-toggle { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); transition: transform 0.2s ease, color 0.2s ease; color: #1E1E1E; font-size: 15px; } .sag-wishlist-toggle:hover { transform: scale(1.08); color: #E53935; } .sag-wishlist-toggle.is-active { color: #E53935; } /* Card Body */ .sag-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; background: #FFFFFF; } .sag-rating-row { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sag-gold); margin-bottom: 6px; } .sag-rating-row span.count { color: var(--sag-muted); font-size: 10px; font-weight: 600; } .sag-card-title { font-size: 15px; font-weight: 600; color: #1E1E1E; margin-bottom: 12px; line-height: 1.35; min-height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sag-card-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .sag-card-title a:hover { color: var(--sag-gold); } .sag-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; margin-bottom: 14px; } .sag-price-row strong { font-size: 18px; font-weight: 800; color: #111111; letter-spacing: -0.2px; } .sag-price-row del { font-size: 13.5px; color: #8E8E93; font-weight: 400; text-decoration: line-through; } .sag-price-row .discount-percent { font-size: 12.5px; font-weight: 700; color: #1B8A4D; text-transform: uppercase; } /* Add to Bag Button */ .sag-add-bag-btn { width: 100%; height: 44px; background: #111111; color: #FFFFFF; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .sag-add-bag-btn:hover { background: #282828; color: #FFFFFF; } .sag-add-bag-btn:active { transform: scale(0.98); } /* ========================================================= 7. "WHY DEMI-FINE?" COMPARISON MATRIX ========================================================= */ .sag-comparison-section { background: var(--sag-stone-bg); padding: 70px 24px; margin-bottom: 70px; } .sag-comparison-table-wrap { max-width: 1100px; margin: 0 auto; background: #FFFFFF; border-radius: 8px; border: 1px solid var(--sag-border); overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--sag-shadow-sm); } .sag-comparison-table { width: 100%; min-width: 580px; border-collapse: collapse; text-align: center; } .sag-comparison-table th, .sag-comparison-table td { padding: 16px 18px; border-bottom: 1px solid var(--sag-border); font-size: 13px; } .sag-comparison-table th { background: #FAF8F5; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .sag-comparison-table th.featured { background: var(--sag-black); color: #FFFFFF; } .sag-comparison-table td.featured { background: rgba(199, 161, 90, 0.05); font-weight: 700; color: var(--sag-black); border-left: 2px solid var(--sag-gold); border-right: 2px solid var(--sag-gold); } .sag-check { color: var(--sag-green); font-weight: 700; } .sag-cross { color: #D32F2F; font-weight: 700; } /* ========================================================= 8. VIDEO REELS / REAL LIFE IN MOTION SHOWCASE ========================================================= */ .sag-reels-section { max-width: 1440px; margin: 0 auto 80px; } .sag-reels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sag-reel-card { position: relative; height: 380px; border-radius: var(--sag-radius); overflow: hidden; background: #111111; } .sag-reel-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: transform 0.5s ease; } .sag-reel-card:hover img { transform: scale(1.05); filter: brightness(0.75); } .sag-reel-overlay { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); color: #FFFFFF; } .sag-play-badge { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #FFFFFF; margin-bottom: auto; align-self: flex-start; } .sag-reel-title { font-family: var(--sag-font-serif); font-size: 20px; font-weight: var(--sag-heading-weight); margin-bottom: 4px; letter-spacing: var(--sag-heading-tracking); } .sag-reel-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.8); margin-bottom: 12px; } .sag-reel-btn { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--sag-gold); text-decoration: none; border-bottom: 1.5px solid var(--sag-gold); align-self: flex-start; padding-bottom: 2px; } /* ========================================================= 9. CURATED GIFTING HUB ========================================================= */ .sag-gifting-grid { max-width: 1440px; margin: 0 auto 80px; padding: 0 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sag-gifting-card { position: relative; height: 380px; border-radius: var(--sag-radius); overflow: hidden; display: flex; align-items: flex-end; padding: 30px; text-decoration: none; color: #FFFFFF; background: #111111; } .sag-gifting-card picture, .sag-gifting-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .sag-gifting-card img { filter: brightness(0.75); transition: transform 0.6s ease, filter 0.6s ease; } .sag-gifting-card:hover img { transform: scale(1.06); filter: brightness(0.65); } .sag-gifting-content { position: relative; z-index: 2; } .sag-gifting-tag { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--sag-gold); margin-bottom: 6px; display: block; } .sag-gifting-title { font-family: var(--sag-font-serif); font-size: 28px; margin-bottom: 8px; font-weight: var(--sag-heading-weight); letter-spacing: var(--sag-heading-tracking); } .sag-gifting-btn { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1.5px solid #FFFFFF; padding-bottom: 2px; display: inline-block; } /* ========================================================= 10. OUR PROMISE & VERIFIED REVIEWS ========================================================= */ .sag-reviews-section { background: var(--sag-stone-bg); padding: 70px 32px; margin-bottom: 80px; scroll-margin-top: 100px; } .sag-reviews-section .sag-section-header { text-align: center; margin-bottom: 36px; } .sag-reviews-section .sag-section-kicker, .sag-promise-kicker { font-family: var(--sag-font-script); font-size: clamp(28px, 4.8vw, 38px); font-weight: 600; color: var(--sag-gold); text-transform: none; letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transform: rotate(-1.5deg); } .sag-promise-wave-dash { width: 32px; height: 8px; color: var(--sag-gold); opacity: 0.85; flex-shrink: 0; } .sag-reviews-section .sag-section-kicker:not(:has(.sag-promise-wave-dash))::before, .sag-promise-kicker:not(:has(.sag-promise-wave-dash))::before { content: "〜"; margin-right: 6px; opacity: 0.75; font-family: var(--sag-font-sans); } .sag-reviews-section .sag-section-kicker:not(:has(.sag-promise-wave-dash))::after, .sag-promise-kicker:not(:has(.sag-promise-wave-dash))::after { content: "〜"; margin-left: 6px; opacity: 0.75; font-family: var(--sag-font-sans); } .sag-reviews-section .sag-section-title, .sag-promise-title-main { font-size: clamp(22px, 3.8vw, 34px); font-weight: 700; color: var(--sag-black); letter-spacing: -0.01em; line-height: 1.25; margin: 0; } .sag-reviews-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .sag-review-card { background: #FFFFFF; padding: clamp(22px, 2.5vw, 32px); border-radius: var(--sag-radius); border: 1px solid var(--sag-border); box-shadow: var(--sag-shadow-sm); display: flex; flex-direction: column; box-sizing: border-box; } .sag-review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .sag-review-badge, .sag-verified-badge { font-size: 10px; font-weight: 700; color: var(--sag-green); background: var(--sag-green-bg); padding: 3px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; } .sag-review-title { font-size: 15px; font-weight: var(--sag-heading-weight); color: var(--sag-black); margin-bottom: 8px; letter-spacing: var(--sag-heading-tracking); } .sag-review-text { font-size: 13.5px; color: #444444; line-height: 1.7; margin-bottom: 18px; font-style: italic; flex: 1; } .sag-review-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--sag-border); padding-top: 14px; } .sag-review-author strong { font-size: 13px; color: var(--sag-black); display: block; } .sag-review-author span { font-size: 11px; color: var(--sag-muted); } /* ========================================================= 11. SEO & FAQ ACCORDIONS ========================================================= */ .sag-faq-container { max-width: 900px; margin: 0 auto 80px; padding: 0 24px; } .sag-faq-item { border-bottom: 1px solid var(--sag-border); } .sag-faq-question { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 16px; } .sag-faq-question h3 { font-size: 15px; font-weight: 700; color: var(--sag-black); } .sag-faq-question i { font-size: 14px; color: var(--sag-muted); transition: transform 0.3s ease; } .sag-faq-item.active .sag-faq-question i { transform: rotate(180deg); color: var(--sag-gold); } .sag-faq-answer { padding-bottom: 22px; font-size: 13.5px; color: #555555; line-height: 1.7; display: none; } .sag-faq-item.active .sag-faq-answer { display: block; } /* ========================================================= 12. MOBILE BOTTOM STICKY NAVIGATION DOCK (Sagvira Signature) ========================================================= */ .sag-mobile-bottom-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: #FFFFFF; border-top: 1px solid var(--sag-border); box-shadow: 0 -4px 16px rgba(0,0,0,0.06); z-index: 99990; } .sag-mobile-dock { height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 0 4px; width: 100%; } .sag-dock-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--sag-muted); text-decoration: none; font-size: 10px; font-weight: 700; position: relative; padding: 6px 0; transition: color 0.2s ease; min-width: 0; overflow: hidden; } .sag-dock-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sag-dock-item i { font-size: 17px; } .sag-dock-item.active, .sag-dock-item:hover { color: var(--sag-black); } .sag-dock-badge { position: absolute; top: 2px; right: calc(50% - 16px); background: var(--sag-black); color: #FFFFFF; font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px; display: flex; align-items: center; justify-content: center; } /* Toast Notification */ .sag-toast { position: fixed; bottom: 74px; right: 24px; background: var(--sag-black); color: #FFFFFF; padding: 14px 24px; border-left: 4px solid var(--sag-gold); border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 99999; transform: translateY(100px); opacity: 0; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); font-size: 12.5px; font-weight: 600; } .sag-toast.active { transform: translateY(0); opacity: 1; } /* ========================================================= COMPREHENSIVE RESPONSIVE MEDIA QUERIES ========================================================= */ /* Desktop / Laptop Large Screens (<= 1200px) */ @media (max-width: 1200px) { .sag-products-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .sag-reels-grid { grid-template-columns: repeat(3, 1fr); } } /* Tablet & Mobile Screens (<= 992px) */ @media (max-width: 992px) { .mobile-menu-btn { display: flex !important; } .sag-desktop-nav { display: none !important; } .sag-logo a { font-size: 19px; letter-spacing: 2px; } .sag-hero-layout { grid-template-columns: 1fr; } .sag-hero-content { padding: 40px 24px 30px; text-align: center; } .sag-hero-desc { margin: 0 auto 24px; } .sag-hero-cta-group { justify-content: center; } .sag-hero-media { min-height: auto; height: 300px; } .sag-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; gap: 16px 14px; } .sag-trust-item { gap: 10px; align-items: flex-start; } .sag-trust-icon { width: 38px; height: 38px; font-size: 15px; flex-shrink: 0; } .sag-trust-text h4 { font-size: 12.5px; font-weight: 700; margin-bottom: 2px; line-height: 1.25; } .sag-trust-text p { font-size: 10.5px; line-height: 1.35; } .sag-reels-section { padding: 0 20px; } .sag-reels-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .sag-reel-card { height: 320px; } .sag-gifting-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 0 20px; gap: 18px; } .sag-gifting-card { height: 280px; padding: 24px; } .sag-reviews-section { padding: 50px 20px; } .sag-reviews-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } } /* Mobile Screens (<= 768px) */ @media (max-width: 768px) { body { padding-bottom: 60px !important; } .sag-mobile-bottom-bar { display: block !important; } .sag-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 12px; } .sag-card-body { padding: 10px; } .sag-card-title { font-size: 12.5px; line-height: 1.3; min-height: 32px; margin-bottom: 6px; } .sag-price-row { flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .sag-price-row strong { font-size: 14px; } .sag-price-row del { font-size: 11px; } .sag-price-row .discount-percent { font-size: 10px; } .sag-add-bag-btn { height: 34px; font-size: 10px; letter-spacing: 0.5px; } .sag-badge { font-size: 8.5px; padding: 3px 6px; top: 6px; left: 6px; } .sag-wishlist-toggle { width: 30px; height: 30px; font-size: 12px; top: 6px; right: 6px; } .sag-story-avatar-wrap { width: 60px; height: 60px; } .sag-story-bubble { width: 68px; } .sag-story-label { font-size: 9.5px; } .sag-toast { right: 12px; left: 12px; bottom: 70px; text-align: center; border-radius: 6px; } } /* Small Smartphone Screens (<= 480px) */ @media (max-width: 480px) { .sag-announcement-bar { font-size: 9.5px; letter-spacing: 1px; padding: 0 10px; } .sag-header-container { padding: 0 12px; height: 56px; } .sag-logo a { font-size: 17px; letter-spacing: 1.5px; } .sag-header-actions { gap: 10px; } .sag-action-btn { font-size: 16px; } .sag-hero-media { height: 220px; } .sag-hero-cta-group { flex-direction: column; width: 100%; gap: 10px; } .sag-btn-primary, .sag-btn-secondary { width: 100%; padding: 12px 20px; } .sag-reel-overlay { padding: 12px; } .sag-reel-title { font-size: 12px; } .sag-reel-sub { display: none; } .sag-play-badge { width: 32px; height: 32px; font-size: 11px; } .sag-tab-pills { gap: 6px; } .sag-tab-btn { padding: 6px 14px; font-size: 11px; } } /* ========================================================= 13. SAGVIRA LUXURY FOOTER ========================================================= */ .footer { background: #111111; color: #FFFFFF; padding: 80px 40px 100px; } .footer-top { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand h2 { font-size: 32px; font-family: var(--sag-font-serif); letter-spacing: 3px; margin-bottom: 16px; color: #FFFFFF; font-weight: var(--sag-heading-weight); } .footer-brand p { max-width: 420px; line-height: 1.8; color: rgba(255,255,255,0.7); font-size: 13.5px; } .footer-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--sag-gold); margin-bottom: 12px; font-weight: 700; } .footer-newsletter h3 { font-size: 28px; font-family: var(--sag-font-serif); margin-bottom: 20px; color: #FFFFFF; line-height: 1.2; font-weight: var(--sag-heading-weight); letter-spacing: var(--sag-heading-tracking); } .newsletter-form { display: flex; gap: 12px; max-width: 500px; } .newsletter-form input { flex: 1; height: 48px; padding: 0 18px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #FFFFFF; font-size: 13px; border-radius: var(--sag-radius); outline: none; font-family: var(--sag-font-sans); } .newsletter-form input:focus { border-color: var(--sag-gold); background: rgba(255,255,255,0.1); } .newsletter-form button { padding: 0 24px; height: 48px; border: none; background: var(--sag-gold); color: #111111; font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; border-radius: var(--sag-radius); cursor: pointer; transition: all 0.25s ease; white-space: nowrap; } .newsletter-form button:hover { background: #FFFFFF; color: #111111; } .footer-middle { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 60px 0; } .footer-column h4 { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 20px; } .footer-column a { display: block; font-size: 13.5px; color: rgba(255,255,255,0.65); text-decoration: none; margin-bottom: 12px; transition: color 0.2s ease, padding-left 0.2s ease; } .footer-column a:hover { color: var(--sag-gold); padding-left: 4px; } .footer-bottom { max-width: 1440px; margin: 0 auto; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 16px; } .payment-methods { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .payment-methods span { background: rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.8); } @media (max-width: 992px) { .footer { padding: 50px 20px 100px; } .footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; } .footer-middle { grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 40px 0; } .newsletter-form { max-width: 100%; } } @media (max-width: 576px) { .footer-middle { grid-template-columns: 1fr; gap: 24px; } .newsletter-form { flex-direction: column; } .newsletter-form button { width: 100%; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .payment-methods { justify-content: center; } }