/* ================================================================ MONK SERA DARJEELING TEA - PREMIUM REDESIGN monk-sera-premium.css v2.0 Drop this into /public_html (or wherever your PHP root is) Then add ONE line to header.php (see header.php file). ALL existing PHP logic is untouched. CSS overrides only. ================================================================ */ /* ============================================================== 1. DESIGN TOKENS (expand on existing root vars) ============================================================== */ :root { /* Brand */ --ms-forest: #0E2A1B; --ms-deep: #071410; --ms-mid: #1a4d2e; --ms-sage: #3a6b4a; --ms-gold: #C9A227; --ms-gold-lt: #E8D7A5; --ms-gold-dk: #a07d18; --ms-cream: #F7F3EE; --ms-warm: #F0EBE3; --ms-white: #ffffff; --ms-text: #1E1E1E; --ms-muted: #6B6B6B; --ms-border: #E2DAD0; /* Shadows */ --ms-sh-xs: 0 1px 4px rgba(14,42,27,.06); --ms-sh-sm: 0 4px 16px rgba(14,42,27,.08); --ms-sh-md: 0 12px 40px rgba(14,42,27,.12); --ms-sh-lg: 0 24px 72px rgba(14,42,27,.18); --ms-sh-xl: 0 40px 100px rgba(14,42,27,.24); --ms-sh-gold: 0 8px 32px rgba(201,162,39,.28); /* Radius */ --ms-r-xs: 6px; --ms-r-sm: 10px; --ms-r-md: 16px; --ms-r-lg: 24px; --ms-r-xl: 32px; --ms-r-pill: 999px; /* Timing */ --ms-ease: cubic-bezier(.4,0,.2,1); --ms-spring: cubic-bezier(.34,1.56,.64,1); --ms-t1: 0.18s; --ms-t2: 0.32s; --ms-t3: 0.48s; /* Overwrite legacy vars so every file picks them up */ --monk-green: var(--ms-forest); --monk-dark: var(--ms-deep); --monk-gold: var(--ms-gold); --g: var(--ms-mid); --gd: var(--ms-forest); --gold: var(--ms-gold); --bg: var(--ms-cream); --card: var(--ms-white); --txt: var(--ms-text); --muted: var(--ms-muted); --border: var(--ms-border); } /* ============================================================== 2. GLOBAL BASE UPGRADES ============================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; /* stop sideways pan on mobile WITHOUT breaking position:sticky (overflow-x:hidden would make a scroll container) */ max-width: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--ms-cream); color: var(--ms-text); overflow-x: clip; /* clip won't break position:sticky (never use overflow-x:hidden on body) */ max-width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(201,162,39,.22); color: var(--ms-forest); } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--ms-warm); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ms-mid), var(--ms-gold)); border-radius: 3px; } /* Focus ring */ :focus-visible { outline: 2px solid var(--ms-gold); outline-offset: 3px; border-radius: 4px; } /* ============================================================== 3. KEYFRAMES ============================================================== */ @keyframes ms-fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } @keyframes ms-fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes ms-scaleIn { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } } @keyframes ms-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } @keyframes ms-spin { to { transform: rotate(360deg); } } @keyframes ms-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } } @keyframes ms-float { 0%,100% { transform:translateY(0) rotate(0deg); } 33% { transform:translateY(-6px) rotate(1deg); } 66% { transform:translateY(-3px) rotate(-1deg); } } @keyframes ms-ticker { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } @keyframes ms-toastIn { from { opacity:0; transform:translateY(20px) scale(.95); } to { opacity:1; transform:none; } } @keyframes ms-toastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(10px) scale(.96); } } /* ============================================================== 4. TOP ANNOUNCEMENT BAR (enhanced) ============================================================== */ .top-bar { background: var(--ms-deep); border-bottom: 1px solid rgba(201,162,39,.15); height: 34px !important; overflow: hidden; position: relative; } .top-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(201,162,39,.04) 50%, transparent 100%); pointer-events: none; } .top-bar-inner { animation: ms-ticker 26s linear infinite !important; } .top-bar-inner:hover { animation-play-state: paused !important; } .tb-item { font-family: 'Inter', sans-serif; font-size: 10.5px !important; letter-spacing: 2.2px !important; font-weight: 500 !important; color: rgba(247,243,238,.82) !important; padding: 0 48px !important; gap: 10px !important; } .tb-item i { color: var(--ms-gold) !important; } .tb-dot { background: var(--ms-gold) !important; opacity: .5 !important; } /* ============================================================== 5. NAVBAR (premium sticky) ============================================================== */ .navbar { background: rgba(14,42,27,.97) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; border-bottom: 1px solid rgba(201,162,39,.12) !important; height: 76px !important; padding: 0 56px !important; transition: height .3s var(--ms-ease), background .3s var(--ms-ease), box-shadow .3s var(--ms-ease) !important; } .navbar.scrolled { height: 62px !important; background: rgba(7,20,16,.98) !important; box-shadow: 0 4px 32px rgba(0,0,0,.32) !important; } /* Logo */ .logo-section { gap: 12px !important; text-decoration: none; } .logo-img { width: 68px !important; height: 68px !important; transition: transform .4s var(--ms-spring), filter .4s var(--ms-ease) !important; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)) !important; } .navbar.scrolled .logo-img { width: 52px !important; height: 52px !important; } .logo-section:hover .logo-img { transform: scale(1.06) rotate(-1deg) !important; filter: drop-shadow(0 4px 16px rgba(201,162,39,.38)) !important; } .logo-name { font-family: 'Great Vibes', cursive !important; font-size: 31px !important; transition: all .35s var(--ms-ease) !important; letter-spacing: .5px !important; } .logo-section:hover .logo-name { color: var(--ms-gold-lt) !important; text-shadow: 0 0 22px rgba(201,162,39,.35) !important; } .motto { font-family: 'Cormorant Garamond', serif !important; font-size: 9px !important; letter-spacing: 3px !important; color: rgba(255,255,255,.4) !important; transition: letter-spacing .35s var(--ms-ease), color .35s var(--ms-ease) !important; } .logo-section:hover .motto { letter-spacing: 3.5px !important; color: rgba(201,162,39,.6) !important; } /* Nav links */ .nav-center a { font-size: 10.5px !important; letter-spacing: 2.2px !important; font-weight: 500 !important; color: rgba(247,243,238,.78) !important; transition: color .28s var(--ms-ease) !important; padding: 6px 0 !important; } .nav-center a::after { background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-lt)) !important; height: 1.5px !important; transition: width .32s var(--ms-ease) !important; } .nav-center a:hover, .nav-center a.active { color: var(--ms-gold-lt) !important; } /* Icon buttons */ .icon-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; transition: all .28s var(--ms-ease) !important; } .icon-btn:hover { background: rgba(255,255,255,.08) !important; transform: translateY(-2px) !important; color: var(--ms-gold-lt) !important; } /* Cart icon - premium gold pill */ .cart-icon-btn { background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dk)) !important; color: var(--ms-forest) !important; width: 42px !important; height: 42px !important; box-shadow: 0 4px 16px rgba(201,162,39,.3) !important; } .cart-icon-btn:hover { background: linear-gradient(135deg, var(--ms-gold-lt), var(--ms-gold)) !important; transform: translateY(-3px) !important; box-shadow: var(--ms-sh-gold) !important; } .icon-badge { font-size: 8.5px !important; width: 18px !important; height: 18px !important; top: -3px !important; right: -3px !important; border: 2px solid var(--ms-forest) !important; animation: ms-pulse 3.5s ease-in-out infinite !important; } /* Search expand */ .search-expand form { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(201,162,39,.2) !important; border-radius: 24px !important; transition: all .3s var(--ms-ease) !important; } .search-expand form:focus-within { border-color: rgba(201,162,39,.5) !important; background: rgba(255,255,255,.1) !important; } .search-expand input { font-family: 'Cormorant Garamond', serif !important; font-size: 14px !important; letter-spacing: .8px !important; } /* Mobile toggle */ .mobile-toggle { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(201,162,39,.18) !important; } .mobile-toggle:hover { background: rgba(201,162,39,.12) !important; border-color: rgba(201,162,39,.4) !important; } /* ============================================================== 6. MOBILE NAV (full-screen premium) ============================================================== */ .mobile-nav { background: linear-gradient(160deg, #0E2A1B 0%, #071410 100%) !important; } .mobile-nav::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 20%, rgba(201,162,39,.06) 0%, transparent 60%); pointer-events: none; } .mobile-nav-header { border-bottom: 1px solid rgba(201,162,39,.12) !important; } .mobile-nav-links a { font-family: 'Cormorant Garamond', serif !important; font-size: 32px !important; font-weight: 300 !important; color: rgba(247,243,238,.75) !important; padding: 18px 0 !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; transition: color .28s, padding-left .28s !important; letter-spacing: .5px !important; } .mobile-nav-links a:hover { color: var(--ms-gold-lt) !important; padding-left: 10px !important; } .mobile-nav-footer { border-top: 1px solid rgba(201,162,39,.12) !important; } .mobile-search-form { border: 1px solid rgba(201,162,39,.18) !important; background: rgba(255,255,255,.04) !important; border-radius: 30px !important; transition: border-color .28s !important; } .mobile-search-form:focus-within { border-color: rgba(201,162,39,.45) !important; } .mobile-social a { border: 1px solid rgba(201,162,39,.2) !important; transition: all .28s var(--ms-ease) !important; } .mobile-social a:hover { background: rgba(201,162,39,.14) !important; border-color: var(--ms-gold) !important; color: var(--ms-gold) !important; transform: translateY(-3px) !important; } /* Search overlay */ .search-overlay { background: rgba(7,20,16,.97) !important; backdrop-filter: blur(16px) !important; } .search-overlay form { border-bottom: 1px solid rgba(201,162,39,.3) !important; } .search-overlay input { font-family: 'Cormorant Garamond', serif !important; font-size: 30px !important; } /* ============================================================== 7. HERO / SLIDER (homepage) ============================================================== */ .slider-box { height: 560px !important; position: relative; } .slide-overlay { background: linear-gradient(to bottom, rgba(14,42,27,.35) 0%, rgba(7,20,16,.82) 100%) !important; } .slide-text h1 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(36px, 5.5vw, 62px) !important; font-weight: 400 !important; letter-spacing: 2.5px !important; line-height: 1.15 !important; text-shadow: 0 4px 24px rgba(0,0,0,.4) !important; } .slide-text p { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(16px, 2vw, 21px) !important; letter-spacing: 2.5px !important; opacity: .88 !important; } .slide-text .highlight { color: var(--ms-gold) !important; } /* ============================================================== 8. SECTION CHROME ============================================================== */ .section { padding: 88px 56px !important; } .section-title { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(30px, 4vw, 44px) !important; color: var(--ms-forest) !important; font-weight: 400 !important; letter-spacing: 1.5px !important; line-height: 1.2 !important; } /* ============================================================== 9. BENEFIT CARDS (homepage) ============================================================== */ .benefits-grid { gap: 22px !important; } .benefit-card { background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-md) !important; padding: 32px 22px !important; box-shadow: var(--ms-sh-xs) !important; transition: transform .35s var(--ms-spring), box-shadow .35s var(--ms-ease), border-color .35s var(--ms-ease) !important; border-bottom: 3px solid transparent !important; position: relative; overflow: hidden; } .benefit-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,162,39,.04), transparent); opacity: 0; transition: opacity .35s; } .benefit-card:hover { transform: translateY(-8px) !important; box-shadow: var(--ms-sh-md) !important; border-color: rgba(201,162,39,.3) !important; border-bottom-color: var(--ms-gold) !important; } .benefit-card:hover::before { opacity: 1; } .benefit-card h4 { font-family: 'Cormorant Garamond', serif !important; color: var(--ms-forest) !important; font-size: 20px !important; font-weight: 500 !important; letter-spacing: .5px !important; } .benefit-card p { color: var(--ms-muted) !important; font-size: 13.5px !important; line-height: 1.7 !important; } /* ============================================================== 10. PRODUCT CARDS (homepage + shop grid) ============================================================== */ .product-card { background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-lg) !important; overflow: hidden !important; box-shadow: var(--ms-sh-xs) !important; transition: transform .4s var(--ms-spring), box-shadow .4s var(--ms-ease), border-color .4s var(--ms-ease) !important; position: relative; } .product-card:hover { transform: translateY(-10px) !important; box-shadow: var(--ms-sh-lg) !important; border-color: rgba(201,162,39,.2) !important; } /* Product image */ .product-card img, .product-image-wrap img { transition: transform .6s var(--ms-ease) !important; } .product-card:hover img, .product-card:hover .product-image-wrap img { transform: scale(1.08) !important; } /* Badges */ .badge { border-radius: 20px !important; font-size: 9.5px !important; letter-spacing: 1.2px !important; font-weight: 800 !important; padding: 5px 13px !important; } .badge-new, .badge.badge-new { background: var(--ms-gold) !important; color: #1a1a00 !important; } .badge-best, .badge.badge-best { background: #c0392b !important; color: #fff !important; } .badge-flush, .badge.badge-flush { background: #2e7d32 !important; color: #fff !important; } .badge-limited { background: var(--ms-forest) !important; color: var(--ms-gold) !important; } .badge-organic { background: #1b5e20 !important; color: #a5d6a7 !important; } /* Wishlist button */ .wishlist-btn, .product-wishlist { width: 40px !important; height: 40px !important; background: rgba(255,255,255,.92) !important; backdrop-filter: blur(8px) !important; border-radius: 50% !important; box-shadow: 0 4px 16px rgba(0,0,0,.14) !important; transition: all .28s var(--ms-ease) !important; } .wishlist-btn:hover, .product-wishlist:hover { background: #ff4757 !important; transform: scale(1.12) !important; box-shadow: 0 6px 20px rgba(255,71,87,.3) !important; } .wishlist-btn:hover i, .product-wishlist:hover i { color: #fff !important; } .wishlist-btn.active i, .product-wishlist.active i { color: #ff4757 !important; } /* Product info */ .product-info h3, .product-name { font-family: 'Cormorant Garamond', serif !important; color: var(--ms-forest) !important; font-size: 19px !important; font-weight: 500 !important; letter-spacing: .3px !important; line-height: 1.3 !important; } .product-info .price, .product-price { font-family: 'Inter', sans-serif !important; color: var(--ms-forest) !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.5px !important; } .product-cat { font-size: 10px !important; color: var(--ms-gold) !important; letter-spacing: 2px !important; font-weight: 700 !important; text-transform: uppercase !important; } /* Star ratings */ .stars i { font-size: 11.5px !important; color: #E0D5C8 !important; } .stars i.filled, .product-rating i { color: var(--ms-gold) !important; } .rating-count, .product-rating span { color: var(--ms-muted) !important; font-size: 12px !important; } /* Add-to-cart button on cards */ .btn-card-cart { width: 46px !important; height: 46px !important; background: linear-gradient(135deg, var(--ms-mid), var(--ms-forest)) !important; border-radius: 13px !important; box-shadow: 0 4px 14px rgba(14,42,27,.2) !important; transition: all .3s var(--ms-spring) !important; } .btn-card-cart:hover { background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dk)) !important; transform: scale(1.1) !important; box-shadow: 0 8px 24px rgba(201,162,39,.38) !important; } /* Shop page "add to cart" button inside product info */ .product-info .btn { background: linear-gradient(135deg, var(--ms-mid), var(--ms-forest)) !important; color: #fff !important; border-radius: var(--ms-r-pill) !important; font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: 2px !important; padding: 12px 18px !important; transition: all .3s var(--ms-ease) !important; box-shadow: 0 4px 14px rgba(14,42,27,.18) !important; } .product-info .btn:hover { background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dk)) !important; color: var(--ms-forest) !important; box-shadow: var(--ms-sh-gold) !important; transform: translateY(-2px) !important; } /* Quick view overlay on cards */ .card-actions-overlay { background: linear-gradient(to top, rgba(7,20,16,.78), transparent) !important; } .btn-quick-view { border-radius: 10px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .5px !important; transition: all .25s var(--ms-ease) !important; } .btn-quick-view:hover { background: var(--ms-gold) !important; color: var(--ms-forest) !important; } /* ============================================================== 11. GLOBAL BUTTONS ============================================================== */ .btn-gold { background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dk)) !important; color: var(--ms-forest) !important; border-radius: var(--ms-r-pill) !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: 2px !important; padding: 13px 34px !important; transition: all .3s var(--ms-ease) !important; box-shadow: 0 4px 18px rgba(201,162,39,.28) !important; border: none !important; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .btn-gold:hover { background: linear-gradient(135deg, var(--ms-gold-lt), var(--ms-gold)) !important; transform: translateY(-3px) !important; box-shadow: var(--ms-sh-gold) !important; } .btn-gold:active { transform: translateY(0) !important; } .btn-green { background: linear-gradient(135deg, var(--ms-mid), var(--ms-forest)) !important; color: #fff !important; border-radius: var(--ms-r-pill) !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: 2px !important; padding: 13px 34px !important; transition: all .3s var(--ms-ease) !important; box-shadow: 0 4px 18px rgba(14,42,27,.2) !important; border: none !important; cursor: pointer; } .btn-green:hover { background: linear-gradient(135deg, var(--ms-sage), var(--ms-mid)) !important; transform: translateY(-3px) !important; box-shadow: var(--ms-sh-md) !important; } /* ============================================================== 12. BREW BOX ============================================================== */ .brew-box { background: linear-gradient(135deg, var(--ms-mid) 0%, var(--ms-forest) 100%) !important; position: relative; overflow: hidden; } .brew-box::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 80%, rgba(201,162,39,.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(201,162,39,.06) 0%, transparent 50%); pointer-events: none; } .brew-box h2 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(26px, 3.5vw, 36px) !important; font-weight: 400 !important; letter-spacing: 1.5px !important; } .brew-item i { color: var(--ms-gold) !important; animation: ms-float 4s ease-in-out infinite; } .brew-item:nth-child(2) i { animation-delay: .5s; } .brew-item:nth-child(3) i { animation-delay: 1s; } .brew-item:nth-child(4) i { animation-delay: 1.5s; } /* ============================================================== 13. SHOP PAGE (hero + toolbar) ============================================================== */ .shop-hero { background: linear-gradient(135deg, var(--ms-mid) 0%, var(--ms-forest) 60%, var(--ms-deep) 100%) !important; padding: 64px 48px !important; position: relative; overflow: hidden; } .shop-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(201,162,39,.07) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='rgba(255,255,255,.03)' stroke-width='1'/%3E%3C/svg%3E") repeat; pointer-events: none; } .shop-hero h1 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(28px, 5vw, 52px) !important; font-weight: 400 !important; letter-spacing: 2px !important; color: #fff !important; position: relative; } .shop-hero p { color: rgba(247,243,238,.72) !important; font-size: 16.5px !important; font-family: 'Cormorant Garamond', serif !important; font-style: italic !important; letter-spacing: .8px !important; position: relative; } /* Toolbar */ .shop-toolbar { gap: 12px !important; margin: 24px 0 36px !important; } .toolbar-search { flex: 1; min-width: 200px; } .toolbar-search input { border: 1.5px solid var(--ms-border) !important; border-radius: var(--ms-r-pill) !important; padding: 12px 20px 12px 48px !important; font-size: 13.5px !important; background: var(--ms-white) !important; transition: border-color .25s, box-shadow .25s !important; font-family: 'Inter', sans-serif !important; } .toolbar-search input:focus { border-color: var(--ms-gold) !important; box-shadow: 0 0 0 4px rgba(201,162,39,.12) !important; outline: none !important; } .toolbar-search .search-icon { color: var(--ms-muted) !important; } .toolbar-select { border: 1.5px solid var(--ms-border) !important; border-radius: var(--ms-r-pill) !important; padding: 12px 38px 12px 18px !important; font-size: 13px !important; transition: border-color .25s !important; background-color: var(--ms-white) !important; } .toolbar-select:focus { border-color: var(--ms-gold) !important; outline: none !important; } .view-toggle { border: 1.5px solid var(--ms-border) !important; border-radius: 12px !important; } .view-btn { transition: all .2s !important; } .view-btn.active { background: var(--ms-forest) !important; } .results-count strong { color: var(--ms-forest) !important; } /* Products grid */ .products-grid { gap: 28px !important; } /* ============================================================== 14. PRODUCT DETAIL PAGE ============================================================== */ .detail-grid { gap: 64px !important; } .slider-stage { border-radius: var(--ms-r-lg) !important; box-shadow: var(--ms-sh-md) !important; } .slider-arrow { width: 44px !important; height: 44px !important; background: rgba(255,255,255,.9) !important; backdrop-filter: blur(12px) !important; box-shadow: 0 4px 18px rgba(0,0,0,.18) !important; transition: all .25s var(--ms-ease) !important; } .slider-arrow:hover { background: var(--ms-forest) !important; color: #fff !important; transform: translateY(-50%) scale(1.1) !important; } .detail-name { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(28px, 3.5vw, 38px) !important; color: var(--ms-forest) !important; font-weight: 400 !important; letter-spacing: .8px !important; line-height: 1.2 !important; } .detail-cat { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 2px !important; border-radius: 20px !important; padding: 5px 14px !important; } /* Rating row */ .detail-rating-row { display: flex; align-items: center; gap: 10px; } .detail-rating-row .stars i { font-size: 13px !important; } .rating-label { font-size: 13.5px !important; color: var(--ms-muted) !important; } /* Price display on detail */ .detail-price { font-family: 'Inter', sans-serif !important; font-size: 34px !important; font-weight: 800 !important; color: var(--ms-forest) !important; letter-spacing: -1px !important; } .detail-price .cur { font-size: 20px !important; font-weight: 600 !important; letter-spacing: 0 !important; } .detail-price .per-label { font-size: 13px !important; color: var(--ms-muted) !important; font-weight: 400 !important; } /* Variant selector */ .variant-btn { border: 2px solid var(--ms-border) !important; border-radius: 12px !important; padding: 12px 20px !important; font-size: 13px !important; font-weight: 600 !important; transition: all .25s var(--ms-ease) !important; background: var(--ms-white) !important; color: var(--ms-text) !important; cursor: pointer; } .variant-btn:hover { border-color: var(--ms-forest) !important; background: rgba(14,42,27,.04) !important; } .variant-btn.active, .variant-btn.selected { border-color: var(--ms-forest) !important; background: var(--ms-forest) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(14,42,27,.22) !important; } .variant-btn.oos { opacity: .45 !important; cursor: not-allowed !important; text-decoration: line-through !important; } /* Add to cart - detail page */ .btn-add-cart, .add-to-cart-btn, [class*="add-cart"], .detail-add-btn { background: linear-gradient(135deg, var(--ms-mid), var(--ms-forest)) !important; color: #fff !important; border: none !important; border-radius: var(--ms-r-pill) !important; padding: 17px 38px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all .35s var(--ms-ease) !important; box-shadow: 0 6px 24px rgba(14,42,27,.24) !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } .btn-add-cart:hover, .add-to-cart-btn:hover, [class*="add-cart"]:hover, .detail-add-btn:hover { background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dk)) !important; color: var(--ms-forest) !important; transform: translateY(-3px) !important; box-shadow: var(--ms-sh-gold) !important; } /* Feature icons grid */ .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .feature-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ms-cream); border-radius: var(--ms-r-sm); border: 1px solid var(--ms-border); transition: border-color .25s; } .feature-item:hover { border-color: rgba(201,162,39,.4); } .feature-item i { color: var(--ms-gold); font-size: 14px; } .feature-item span { font-size: 12.5px; color: var(--ms-muted); font-weight: 500; } /* Trust indicators strip */ .trust-row { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-top: 1px solid var(--ms-border); border-bottom: 1px solid var(--ms-border); margin: 20px 0; } .trust-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ms-muted); font-weight: 500; } .trust-item i { color: var(--ms-gold); font-size: 13px; } /* Product tabs */ .product-tab-btn { font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; padding: 12px 24px !important; border-radius: var(--ms-r-pill) !important; border: 2px solid var(--ms-border) !important; background: transparent !important; color: var(--ms-muted) !important; cursor: pointer; transition: all .25s var(--ms-ease) !important; } .product-tab-btn:hover { border-color: var(--ms-forest) !important; color: var(--ms-forest) !important; } .product-tab-btn.active { background: var(--ms-forest) !important; border-color: var(--ms-forest) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(14,42,27,.2) !important; } /* ============================================================== 15. QUICK VIEW MODAL ============================================================== */ .modal-overlay { backdrop-filter: blur(8px) !important; background: rgba(7,20,16,.65) !important; } .modal-box { border-radius: var(--ms-r-xl) !important; box-shadow: var(--ms-sh-xl) !important; animation: ms-scaleIn .32s var(--ms-ease) !important; } .modal-name { font-family: 'Cormorant Garamond', serif !important; font-size: 26px !important; font-weight: 400 !important; letter-spacing: .5px !important; color: var(--ms-forest) !important; } .modal-price { font-size: 28px !important; font-weight: 800 !important; color: var(--ms-forest) !important; } .modal-cat { color: var(--ms-gold) !important; letter-spacing: 2px !important; } .modal-tag { background: var(--ms-warm) !important; border: 1px solid var(--ms-border) !important; color: var(--ms-forest) !important; border-radius: 20px !important; font-weight: 600 !important; } .btn-modal-cart { background: linear-gradient(135deg, var(--ms-mid), var(--ms-forest)) !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px !important; transition: all .3s var(--ms-ease) !important; } .btn-modal-cart:hover { background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dk)) !important; color: var(--ms-forest) !important; transform: translateY(-2px) !important; box-shadow: var(--ms-sh-gold) !important; } .btn-modal-full { border: 2px solid var(--ms-border) !important; border-radius: 14px !important; color: var(--ms-forest) !important; font-weight: 700 !important; transition: all .3s var(--ms-ease) !important; } .btn-modal-full:hover { border-color: var(--ms-forest) !important; background: var(--ms-forest) !important; color: #fff !important; } .modal-close { transition: all .25s var(--ms-ease) !important; } .modal-close:hover { background: #e74c3c !important; color: #fff !important; transform: rotate(90deg) scale(1.1) !important; } /* ============================================================== 16. REVIEWS SECTION ============================================================== */ .reviews-section { border-radius: var(--ms-r-lg) !important; overflow: hidden; } .review-avg-box { background: linear-gradient(135deg, var(--ms-forest), var(--ms-mid)) !important; border-radius: var(--ms-r-md) !important; padding: 28px !important; text-align: center; } .review-avg-score { font-family: 'Cormorant Garamond', serif !important; font-size: 56px !important; font-weight: 300 !important; color: var(--ms-gold) !important; line-height: 1 !important; } .review-avg-label { font-size: 11px !important; letter-spacing: 2px !important; color: rgba(255,255,255,.5) !important; text-transform: uppercase !important; } /* Individual review cards */ .review-card { background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-md) !important; padding: 24px !important; transition: box-shadow .28s var(--ms-ease), border-color .28s !important; } .review-card:hover { box-shadow: var(--ms-sh-sm) !important; border-color: rgba(201,162,39,.2) !important; } .review-author { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; color: var(--ms-forest) !important; font-size: 15px !important; } .review-date { font-size: 12px !important; color: var(--ms-muted) !important; letter-spacing: .5px !important; } .review-text { font-size: 14.5px !important; color: #444 !important; line-height: 1.75 !important; font-family: 'Cormorant Garamond', serif !important; font-size: 16px !important; } /* Review form */ .review-form-section { background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-lg) !important; padding: 32px !important; box-shadow: var(--ms-sh-xs) !important; } .star-rating-input label { font-size: 28px !important; color: #ddd !important; cursor: pointer; transition: color .18s, transform .18s !important; } .star-rating-input input:checked ~ label, .star-rating-input label:hover, .star-rating-input label:hover ~ label { color: var(--ms-gold) !important; transform: scale(1.15) !important; } .review-form-section textarea, .review-form-section input[type="text"] { border: 1.5px solid var(--ms-border) !important; border-radius: var(--ms-r-sm) !important; padding: 12px 16px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; transition: border-color .25s, box-shadow .25s !important; background: var(--ms-cream) !important; } .review-form-section textarea:focus, .review-form-section input[type="text"]:focus { border-color: var(--ms-gold) !important; box-shadow: 0 0 0 4px rgba(201,162,39,.1) !important; outline: none !important; background: var(--ms-white) !important; } .upload-drop-zone { border: 2px dashed var(--ms-border) !important; border-radius: var(--ms-r-md) !important; transition: all .25s !important; } .upload-drop-zone:hover, .upload-drop-zone.drag-over { border-color: var(--ms-gold) !important; background: rgba(201,162,39,.04) !important; } /* ============================================================== 17. CART PAGE ============================================================== */ .cart-container { max-width: 1080px !important; padding: 48px 24px !important; } .cart-title { font-family: 'Cormorant Garamond', serif !important; font-size: 38px !important; font-weight: 400 !important; color: var(--ms-forest) !important; letter-spacing: 1px !important; margin-bottom: 36px !important; } .cart-title i { color: var(--ms-gold) !important; } .cart-items { border-radius: var(--ms-r-lg) !important; box-shadow: var(--ms-sh-xs) !important; border: 1px solid var(--ms-border) !important; overflow: hidden !important; } .cart-header { background: linear-gradient(135deg, var(--ms-forest), var(--ms-mid)) !important; padding: 16px 28px !important; font-size: 10px !important; letter-spacing: 2px !important; } .cart-item { padding: 22px 28px !important; transition: background .2s !important; } .cart-item:hover { background: rgba(247,243,238,.5) !important; } .item-name { font-family: 'Cormorant Garamond', serif !important; color: var(--ms-forest) !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: .3px !important; } .item-variant-tag { background: var(--ms-warm) !important; border: 1px solid var(--ms-border) !important; color: #5a3e1b !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 600 !important; } .item-price { color: var(--ms-gold) !important; font-weight: 800 !important; } /* Qty controls */ .qty-btn { width: 38px !important; height: 38px !important; border: 1.5px solid var(--ms-border) !important; border-radius: 11px !important; background: var(--ms-white) !important; font-size: 16px !important; transition: all .25s var(--ms-ease) !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; } .qty-btn:hover { background: var(--ms-gold) !important; border-color: var(--ms-gold) !important; color: var(--ms-forest) !important; transform: scale(1.08) !important; box-shadow: 0 4px 14px rgba(201,162,39,.28) !important; } .qty-display { font-weight: 700 !important; font-size: 15px !important; min-width: 32px !important; text-align: center !important; } .remove-btn { color: #dc3545 !important; transition: transform .25s var(--ms-spring), color .25s !important; } .remove-btn:hover { transform: scale(1.25) rotate(8deg) !important; } /* Sidebar cards */ .cart-sidebar { gap: 20px !important; } .sidebar-card { background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-lg) !important; padding: 28px !important; box-shadow: var(--ms-sh-xs) !important; transition: box-shadow .28s !important; } .sidebar-card:hover { box-shadow: var(--ms-sh-sm) !important; } .sidebar-card h3 { font-family: 'Cormorant Garamond', serif !important; font-size: 20px !important; font-weight: 500 !important; color: var(--ms-forest) !important; letter-spacing: .3px !important; } .sidebar-card h3 i { color: var(--ms-gold) !important; } /* Coupon form */ .coupon-form { gap: 10px !important; display: flex; } .coupon-form input { flex: 1 !important; border: 1.5px solid var(--ms-border) !important; border-radius: 12px !important; padding: 12px 16px !important; font-size: 13.5px !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; font-weight: 600 !important; transition: border-color .25s !important; background: var(--ms-cream) !important; } .coupon-form input:focus { border-color: var(--ms-forest) !important; outline: none !important; background: var(--ms-white) !important; } .coupon-form button { padding: 12px 20px !important; background: linear-gradient(135deg, var(--ms-mid), var(--ms-forest)) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: 1px !important; cursor: pointer !important; transition: all .3s var(--ms-ease) !important; } .coupon-form button:hover { background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dk)) !important; color: var(--ms-forest) !important; transform: scale(1.03) !important; } .coupon-message { border-radius: 10px !important; padding: 12px 16px !important; font-size: 13px !important; font-weight: 500 !important; } .coupon-success { background: #e8f5e9 !important; color: #1b5e20 !important; } .coupon-error { background: #ffebee !important; color: #b71c1c !important; } .applied-coupon { background: linear-gradient(135deg, #e8f5e9, #f1f8e9) !important; border: 1px solid #a5d6a7 !important; border-radius: 10px !important; padding: 12px 16px !important; } .applied-coupon span { color: #2e7d32 !important; font-weight: 700 !important; } /* Order summary */ .summary-row { padding: 11px 0 !important; border-bottom: 1px solid var(--ms-border) !important; font-size: 14px !important; color: var(--ms-muted) !important; } .summary-row.discount { color: #2e7d32 !important; font-weight: 600 !important; } .summary-row.shipping { color: #2e7d32 !important; font-weight: 600 !important; } .summary-total { padding-top: 16px !important; margin-top: 8px !important; border-top: 2px solid var(--ms-forest) !important; font-size: 20px !important; font-weight: 800 !important; } .summary-total .price { color: var(--ms-gold) !important; } /* Free shipping box */ .free-ship-box { background: linear-gradient(135deg, #e8f5e9, #f1f8e9) !important; border: 1px solid #a5d6a7 !important; color: #2e7d32 !important; border-radius: 10px !important; padding: 12px 16px !important; font-size: 13px !important; font-weight: 600 !important; } .shipping-notice { background: linear-gradient(135deg, #fff8e1, #fff3e0) !important; border: 1px solid #ffe082 !important; color: #e65100 !important; border-radius: 10px !important; padding: 12px 16px !important; font-size: 13px !important; font-weight: 600 !important; } /* Checkout button */ .checkout-btn { padding: 16px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2px !important; margin-top: 20px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: var(--ms-r-pill) !important; } .continue-link { display: block !important; text-align: center !important; margin-top: 14px !important; color: var(--ms-muted) !important; font-size: 13px !important; text-decoration: none !important; transition: color .25s !important; } .continue-link:hover { color: var(--ms-gold) !important; } /* Cart empty state */ .cart-empty { border-radius: var(--ms-r-xl) !important; padding: 80px 40px !important; border: 1px solid var(--ms-border) !important; box-shadow: var(--ms-sh-xs) !important; } .cart-empty i { animation: ms-float 3s ease-in-out infinite !important; } .cart-empty h2 { font-family: 'Cormorant Garamond', serif !important; color: var(--ms-forest) !important; font-weight: 400 !important; } /* ============================================================== 18. FORMS (login, register, checkout, contact) ============================================================== */ .form-control, input[type="text"]:not(.toolbar-search input):not(.coupon-form input), input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select:not(.toolbar-select), textarea { border: 1.5px solid var(--ms-border) !important; border-radius: var(--ms-r-sm) !important; padding: 13px 16px !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; transition: border-color .25s, box-shadow .25s !important; background: var(--ms-white) !important; color: var(--ms-text) !important; } .form-control:focus, input[type="text"]:not(.toolbar-search input):focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:not(.toolbar-select):focus, textarea:focus { border-color: var(--ms-gold) !important; box-shadow: 0 0 0 4px rgba(201,162,39,.1) !important; outline: none !important; } /* Labels */ label { font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--ms-muted) !important; margin-bottom: 6px !important; display: block !important; } /* Form submit buttons */ .btn-submit, button[type="submit"]:not(.coupon-form button):not(.search-expand button):not(.mobile-search-form button):not(.search-overlay button):not(.modal-close):not(.wishlist-btn):not(.qty-btn):not(.btn-card-cart):not(.remove-btn):not(.view-btn):not(.slider-arrow):not(.mobile-nav-close) { background: linear-gradient(135deg, var(--ms-mid), var(--ms-forest)) !important; color: #fff !important; border: none !important; border-radius: var(--ms-r-pill) !important; padding: 14px 36px !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all .3s var(--ms-ease) !important; box-shadow: 0 4px 18px rgba(14,42,27,.2) !important; } /* ============================================================== 19. TRACK ORDER PAGE ============================================================== */ .track-container, .tracking-box { max-width: 780px !important; margin: 0 auto !important; padding: 48px 24px !important; } .track-header { text-align: center; margin-bottom: 40px; } .track-header h1 { font-family: 'Cormorant Garamond', serif !important; font-size: 38px !important; font-weight: 400 !important; color: var(--ms-forest) !important; letter-spacing: 1px !important; } .track-header p { color: var(--ms-muted) !important; font-size: 15px !important; } /* Order status timeline */ .timeline-step { display: flex; align-items: flex-start; gap: 20px; padding: 20px 0; position: relative; } .timeline-step:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 48px; bottom: 0; width: 2px; background: var(--ms-border); } .timeline-step.done::after { background: var(--ms-gold); } .timeline-icon { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ms-border); background: var(--ms-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .3s; z-index: 1; } .timeline-step.done .timeline-icon { border-color: var(--ms-gold); background: var(--ms-gold); color: var(--ms-forest); } .timeline-step.done .timeline-icon i { color: var(--ms-forest); } /* ============================================================== 20. FAQ PAGE ============================================================== */ .faq-item { background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-md) !important; margin-bottom: 12px !important; overflow: hidden !important; transition: box-shadow .25s, border-color .25s !important; } .faq-item:hover { box-shadow: var(--ms-sh-sm) !important; border-color: rgba(201,162,39,.3) !important; } .faq-question { padding: 20px 24px !important; font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; font-weight: 500 !important; color: var(--ms-forest) !important; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: color .25s !important; } .faq-question:hover { color: var(--ms-mid) !important; } .faq-answer { padding: 0 24px 20px !important; color: var(--ms-muted) !important; font-size: 14.5px !important; line-height: 1.75 !important; } /* ============================================================== 21. ABOUT US PAGE ============================================================== */ .about-hero { position: relative; overflow: hidden; border-radius: var(--ms-r-xl); box-shadow: var(--ms-sh-md); } .about-story { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; line-height: 1.85 !important; color: #444 !important; font-weight: 400 !important; } .about-stat { text-align: center; padding: 32px 24px; background: var(--ms-white); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); transition: transform .35s var(--ms-spring), box-shadow .35s !important; } .about-stat:hover { transform: translateY(-8px) !important; box-shadow: var(--ms-sh-md) !important; } .about-stat-number { font-family: 'Cormorant Garamond', serif !important; font-size: 52px !important; font-weight: 300 !important; color: var(--ms-gold) !important; line-height: 1 !important; } .about-stat-label { font-size: 11px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--ms-muted) !important; margin-top: 8px !important; } /* ============================================================== 22. NEWSLETTER PAGE ============================================================== */ .newsletter-wrap { max-width: 680px; margin: 0 auto; padding: 64px 24px; text-align: center; } /* ============================================================== 23. FOOTER (enhanced) ============================================================== */ footer { position: relative; overflow: hidden; } footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,39,.4), transparent); } /* ============================================================== 24. TOAST NOTIFICATION SYSTEM ============================================================== */ .ms-toast-container { position: fixed; bottom: 28px; right: 24px; z-index: 99999; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; } .ms-toast { display: flex; align-items: center; gap: 14px; background: var(--ms-forest); color: #fff; border: 1px solid rgba(201,162,39,.3); border-radius: var(--ms-r-md); padding: 14px 18px; min-width: 280px; max-width: 380px; box-shadow: 0 16px 48px rgba(0,0,0,.24); pointer-events: all; animation: ms-toastIn .36s var(--ms-spring) both; backdrop-filter: blur(12px); } .ms-toast.ms-toast-out { animation: ms-toastOut .3s var(--ms-ease) forwards; } .ms-toast-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(201,162,39,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ms-gold); font-size: 15px; } .ms-toast-icon.success { background: rgba(46,125,50,.25); color: #66bb6a; } .ms-toast-icon.error { background: rgba(198,40,40,.25); color: #ef5350; } .ms-toast-title { font-size: 13.5px; font-weight: 700; margin-bottom: 1px; color: #fff; } .ms-toast-body { font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.4; } .ms-toast-close { margin-left: auto; background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 14px; padding: 4px; flex-shrink: 0; transition: color .2s; } .ms-toast-close:hover { color: rgba(255,255,255,.8); } /* ============================================================== 25. LOADING SKELETON ============================================================== */ .ms-skeleton { background: linear-gradient(90deg, #f0ece4 25%, #ebe7df 50%, #f0ece4 75%); background-size: 600px 100%; animation: ms-shimmer 1.6s ease-in-out infinite; border-radius: var(--ms-r-sm); } .ms-skeleton-card { background: var(--ms-white); border: 1px solid var(--ms-border); border-radius: var(--ms-r-lg); overflow: hidden; } .ms-skeleton-img { height: 260px; border-radius: 0; } .ms-skeleton-line { height: 14px; margin: 8px 16px; } .ms-skeleton-line.wide { width: 75%; } .ms-skeleton-line.short { width: 40%; } .ms-skeleton-line.price { height: 20px; width: 35%; } /* ============================================================== 26. SCROLL REVEAL (enhanced) ============================================================== */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ms-ease), transform .7s var(--ms-ease); } .reveal.active { opacity: 1; transform: none; } .reveal-left { transform: translateX(-40px); opacity: 0; transition: opacity .7s, transform .7s; } .reveal-left.active { opacity: 1; transform: none; } .reveal-right { transform: translateX(40px); opacity: 0; transition: opacity .7s, transform .7s; } .reveal-right.active { opacity: 1; transform: none; } .reveal-scale { transform: scale(.92); opacity: 0; transition: opacity .6s, transform .6s var(--ms-spring); } .reveal-scale.active { opacity: 1; transform: scale(1); } /* ============================================================== 27. BREADCRUMB ============================================================== */ .breadcrumb { padding: 16px 0 !important; font-size: 12.5px !important; color: var(--ms-muted) !important; gap: 8px !important; } .breadcrumb a { color: var(--ms-muted) !important; text-decoration: none !important; transition: color .2s !important; } .breadcrumb a:hover { color: var(--ms-forest) !important; } .breadcrumb .current { color: var(--ms-forest) !important; font-weight: 600 !important; } .breadcrumb .sep { color: #ccc !important; } /* ============================================================== 28. BACK LINK ============================================================== */ .back-link { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--ms-forest) !important; font-weight: 600 !important; font-size: 13px !important; padding: 10px 20px !important; background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-sm) !important; text-decoration: none !important; transition: all .25s var(--ms-ease) !important; letter-spacing: .5px !important; } .back-link:hover { background: var(--ms-forest) !important; color: #fff !important; border-color: var(--ms-forest) !important; transform: translateX(-4px) !important; box-shadow: var(--ms-sh-sm) !important; } /* ============================================================== 29. WISHLIST PAGE ============================================================== */ .wishlist-page-card { background: var(--ms-white) !important; border: 1px solid var(--ms-border) !important; border-radius: var(--ms-r-lg) !important; overflow: hidden !important; transition: transform .35s var(--ms-spring), box-shadow .35s !important; box-shadow: var(--ms-sh-xs) !important; } .wishlist-page-card:hover { transform: translateY(-6px) !important; box-shadow: var(--ms-sh-md) !important; } /* ============================================================== 30. PREMIUM STORYTELLING (homepage tea journey section) ============================================================== */ .tea-story-section { padding: 100px 56px; background: linear-gradient(160deg, var(--ms-forest) 0%, var(--ms-deep) 100%); position: relative; overflow: hidden; } .tea-story-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 50% 70% at 90% 50%, rgba(201,162,39,.08) 0%, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='38' fill='none' stroke='rgba(255,255,255,.025)' stroke-width='1'/%3E%3C/svg%3E") repeat; } .tea-story-label { font-size: 10px; letter-spacing: 3.5px; color: var(--ms-gold); text-transform: uppercase; font-weight: 700; margin-bottom: 16px; display: block; position: relative; } .tea-story-label::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--ms-gold); vertical-align: middle; margin-right: 12px; } .tea-story-heading { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 5vw, 56px); font-weight: 300; color: #fff; line-height: 1.15; letter-spacing: 1px; position: relative; } .tea-story-body { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: rgba(247,243,238,.7); line-height: 1.9; max-width: 480px; position: relative; } /* ============================================================== 31. MINI-CART SIDEBAR ============================================================== */ .ms-mini-cart { position: fixed; right: -420px; top: 0; bottom: 0; width: 400px; background: var(--ms-white); z-index: 9999; box-shadow: -8px 0 48px rgba(0,0,0,.18); transition: right .4s var(--ms-ease); display: flex; flex-direction: column; overflow: hidden; } .ms-mini-cart.open { right: 0; } .ms-mini-cart-overlay { position: fixed; inset: 0; background: rgba(7,20,16,.55); backdrop-filter: blur(4px); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .4s; } .ms-mini-cart-overlay.open { opacity: 1; pointer-events: all; } .ms-mini-cart-header { padding: 24px; border-bottom: 1px solid var(--ms-border); display: flex; align-items: center; justify-content: space-between; background: var(--ms-forest); color: #fff; } .ms-mini-cart-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; letter-spacing: .5px; } .ms-mini-cart-close { width: 36px; height: 36px; background: rgba(255,255,255,.1); border: none; border-radius: 50%; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .25s; } .ms-mini-cart-close:hover { background: rgba(255,255,255,.2); } .ms-mini-cart-body { flex: 1; overflow-y: auto; padding: 20px; } .ms-mini-cart-footer { padding: 20px; border-top: 1px solid var(--ms-border); background: var(--ms-cream); } /* ============================================================== 32. NO-PRODUCTS EMPTY STATE ============================================================== */ .no-products { padding: 100px 24px !important; text-align: center !important; } .no-products i { color: var(--ms-border) !important; font-size: 64px !important; } .no-products p { color: var(--ms-muted) !important; font-size: 16px !important; } /* ============================================================== 33. RESPONSIVE OVERRIDES ============================================================== */ @media (max-width: 1140px) { .navbar { padding: 0 32px !important; } .section { padding: 72px 32px !important; } } @media (max-width: 960px) { .navbar { padding: 0 20px !important; height: 68px !important; } .navbar.scrolled { height: 58px !important; } .logo-img { width: 58px !important; height: 58px !important; } .logo-name { font-size: 27px !important; } .section { padding: 56px 20px !important; } .detail-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .modal-box { grid-template-columns: 1fr !important; } .cart-layout { grid-template-columns: 1fr !important; } .shop-hero { padding: 48px 24px !important; } } @media (max-width: 768px) { .navbar { height: 62px !important; padding: 0 16px !important; } .logo-img { width: 50px !important; height: 50px !important; } .logo-name { font-size: 24px !important; } .motto { display: block !important; font-size: 8.5px !important; letter-spacing: 1.4px !important; white-space: nowrap !important; } .section { padding: 48px 16px !important; } .section-title { font-size: 28px !important; } .products-grid { grid-template-columns: repeat(2,1fr) !important; gap: 14px !important; } .cart-header { display: none !important; } .cart-item { grid-template-columns: 1fr !important; gap: 10px !important; } .slider-box { height: 360px !important; } .slide-text h1 { font-size: 28px !important; } .slide-text p { font-size: 15px !important; } .tea-story-section { padding: 64px 20px !important; } } @media (max-width: 480px) { .top-bar { height: 30px !important; } .navbar { height: 58px !important; padding: 0 12px !important; } .logo-img { width: 44px !important; height: 44px !important; } .logo-name { font-size: 21px !important; } .motto { font-size: 7.5px !important; letter-spacing: 1px !important; } .section { padding: 36px 12px !important; } .section-title { font-size: 24px !important; } .products-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .slider-box { height: 280px !important; } .slide-text h1 { font-size: 22px !important; } .benefit-card { padding: 20px 14px !important; } .cart-container { padding: 24px 12px !important; } .sidebar-card { padding: 18px !important; } .coupon-form { flex-direction: column !important; } .coupon-form button { width: 100% !important; } .ms-toast { min-width: 0 !important; max-width: calc(100vw - 32px) !important; right: 12px !important; } } @media (max-width: 380px) { .products-grid { grid-template-columns: 1fr !important; } .logo-name { font-size: 19px !important; } }