/* ============================================================ VIZAG FLORIST - Premium Design System (Winni.in Level) Mobile-First | Human-Designed | Production Ready ============================================================ */ /* ── GOOGLE FONTS (loaded in ) ─────────────────────── */ /* Playfair Display 600,700 | Poppins 400,500,600,700 */ /* ── CSS CUSTOM PROPERTIES ──────────────────────────────── */ :root { /* Brand Colors */ --pink: #d4145a; --pink-dark: #a50f45; --pink-light: #fde8f0; --pink-50: #fff0f5; --orange: #f97316; --orange-lt: #fff7ed; --green: #16a34a; --green-lt: #f0fdf4; --gold: #f59e0b; --gold-lt: #fffbeb; --purple: #7c3aed; --blue: #2563eb; /* Neutral Scale */ --white: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* Typography */ --font-head: 'Playfair Display', Georgia, serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Shadows */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0/.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0/.1), 0 1px 2px -1px rgb(0 0 0/.1); --shadow: 0 4px 6px -1px rgb(0 0 0/.1), 0 2px 4px -2px rgb(0 0 0/.1); --shadow-md: 0 10px 15px -3px rgb(0 0 0/.1), 0 4px 6px -4px rgb(0 0 0/.1); --shadow-lg: 0 20px 25px -5px rgb(0 0 0/.1), 0 8px 10px -6px rgb(0 0 0/.1); --shadow-xl: 0 25px 50px -12px rgb(0 0 0/.25); --shadow-pink:0 4px 20px rgb(212 20 90 / .25); --shadow-card:0 2px 12px rgb(0 0 0/.08); /* Border radius */ --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-full:9999px; /* Layout */ --max-w: 1320px; --header-h: 68px; --topbar-h: 36px; /* Transitions */ --t-fast: 150ms ease; --t: 250ms ease; --t-slow: 400ms ease; } /* ── RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-body); font-size: 15px; color: var(--gray-800); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font-family: inherit; } :focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } /* ── SCROLLBAR ─────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--gray-100); } ::-webkit-scrollbar-thumb { background: var(--pink-light); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--pink); } ::selection { background: var(--pink-light); color: var(--pink-dark); } /* ── LAYOUT ───────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 16px; } @media (min-width: 640px) { .container { padding: 0 20px; } } @media (min-width: 1024px) { .container { padding: 0 24px; } } .section { padding: 48px 0; } .section-sm { padding: 32px 0; } .section-lg { padding: 72px 0; } .section-gray { background: var(--gray-50); } /* ── TYPOGRAPHY ───────────────────────────────────────── */ .font-head { font-family: var(--font-head); } h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); line-height: 1.25; } /* ── SECTION HEADER ───────────────────────────────────── */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .sec-title-wrap {} .sec-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pink); margin-bottom: 6px; } .sec-title { font-size: clamp(20px, 3.5vw, 30px); font-weight: 700; color: var(--gray-900); } .sec-sub { font-size: 14px; color: var(--gray-500); margin-top: 6px; } .view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pink); white-space: nowrap; transition: gap var(--t-fast); } .view-all:hover { gap: 10px; color: var(--pink-dark); } /* ── BUTTONS ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; font-size: 14px; font-weight: 600; line-height: 1; border-radius: var(--r-full); border: 2px solid transparent; cursor: pointer; transition: all var(--t); white-space: nowrap; text-decoration: none; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); color: var(--white); box-shadow: var(--shadow-pink); } .btn-primary:hover { box-shadow: 0 6px 25px rgb(212 20 90/.4); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--pink); border-color: var(--pink); } .btn-outline:hover { background: var(--pink); color: var(--white); } .btn-white { background: var(--white); color: var(--pink); border-color: transparent; box-shadow: var(--shadow-md); } .btn-white:hover { background: var(--pink); color: var(--white); } .btn-ghost { background: rgba(255,255,255,.15); color: var(--white); border-color: rgba(255,255,255,.4); backdrop-filter: blur(8px); } .btn-ghost:hover { background: rgba(255,255,255,.25); } .btn-sm { padding: 8px 18px; font-size: 13px; } .btn-lg { padding: 14px 32px; font-size: 16px; } .btn-xl { padding: 16px 40px; font-size: 17px; } .btn-block { width: 100%; } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; } .btn-add { flex: 1; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); color: var(--white); border: none; border-radius: var(--r-full); padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--t); font-family: var(--font-body); } .btn-add:hover { box-shadow: var(--shadow-pink); transform: translateY(-1px); } .btn-add.loading { opacity: .65; pointer-events: none; } /* ── BADGES ───────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .badge-off { background: var(--pink); color: var(--white); } .badge-new { background: var(--green); color: var(--white); } .badge-best { background: var(--orange); color: var(--white); } .badge-trend { background: var(--purple); color: var(--white); } .badge-same { background: var(--gray-900); color: var(--white); } .badge-mid { background: #0f172a; color: var(--gold); border: 1px solid var(--gold); } .badge-free { background: var(--green-lt); color: var(--green); border: 1px solid #bbf7d0; } /* ── FORM ELEMENTS ────────────────────────────────────── */ .form-control { width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: var(--r); font-size: 14px; color: var(--gray-800); background: var(--white); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); font-family: var(--font-body); } .form-control:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgb(212 20 90/.1); } .form-control::placeholder { color: var(--gray-400); } .form-control.is-error { border-color: #ef4444; } .form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; } textarea.form-control { resize: vertical; min-height: 90px; } select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 38px; } /* ── TOPBAR ───────────────────────────────────────────── */ .topbar { background: var(--gray-900); height: var(--topbar-h); display: flex; align-items: center; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 20px; } .topbar-ticker { display: flex; align-items: center; gap: 28px; overflow: hidden; flex: 1; } .topbar-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.8); white-space: nowrap; } .topbar-item i { color: var(--gold); font-size: 11px; } .topbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .topbar-right a { font-size: 12px; color: rgba(255,255,255,.75); transition: color var(--t-fast); } .topbar-right a:hover { color: var(--gold); } .topbar-sep { color: rgba(255,255,255,.2); } /* ── HEADER ───────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 800; background: var(--white); border-bottom: 1px solid var(--gray-100); box-shadow: 0 2px 12px rgb(0 0 0/.06); transition: box-shadow var(--t); } .site-header.scrolled { box-shadow: 0 4px 24px rgb(0 0 0/.1); } .header-main { height: var(--header-h); display: flex; align-items: center; gap: 20px; } /* Logo */ .site-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .site-logo img { height: 46px; width: auto; object-fit: contain; } .logo-fallback { display: flex; align-items: center; gap: 10px; } .logo-icon-box { width: 46px; height: 46px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--white); box-shadow: var(--shadow-pink); flex-shrink: 0; } .logo-text-wrap .logo-name { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--gray-900); line-height: 1.1; } .logo-text-wrap .logo-tag { font-size: 10px; color: var(--gray-400); letter-spacing: .5px; } /* Search */ .header-search { flex: 1; max-width: 520px; position: relative; } .search-wrap { display: flex; align-items: center; background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--r-full); transition: all var(--t-fast); overflow: visible; } .search-wrap:focus-within { border-color: var(--pink); background: var(--white); box-shadow: 0 0 0 3px rgb(212 20 90/.1); } .search-wrap input { flex: 1; border: none; background: transparent; padding: 10px 16px; font-size: 14px; color: var(--gray-800); outline: none; font-family: var(--font-body); min-width: 0; } .search-wrap input::placeholder { color: var(--gray-400); } .search-btn { width: 40px; height: 40px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); border: none; border-radius: var(--r-full); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 3px; font-size: 14px; flex-shrink: 0; transition: opacity var(--t-fast); } .search-btn:hover { opacity: .9; } /* Search dropdown */ .search-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); box-shadow: var(--shadow-xl); z-index: 9999; display: none; overflow: hidden; } .search-drop.show { display: block; } .sdrop-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background var(--t-fast); text-decoration: none; color: inherit; } .sdrop-item:hover { background: var(--gray-50); } .sdrop-img { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; background: var(--gray-100); flex-shrink: 0; } .sdrop-name { font-size: 13.5px; font-weight: 500; color: var(--gray-800); } .sdrop-price { font-size: 13px; color: var(--pink); font-weight: 700; } .sdrop-view-all { padding: 10px 16px; border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--pink); font-weight: 600; text-align: center; cursor: pointer; display: block; } .sdrop-view-all:hover { background: var(--pink-50); } /* Header Actions */ .header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; } .hact-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 10px; border-radius: var(--r); cursor: pointer; transition: background var(--t-fast); text-decoration: none; color: var(--gray-700); border: none; background: none; position: relative; } .hact-btn:hover { background: var(--pink-50); color: var(--pink); } .hact-ico { font-size: 20px; position: relative; } .hact-lbl { font-size: 10.5px; font-weight: 500; } .hact-cnt { position: absolute; top: -5px; right: -5px; background: var(--pink); color: var(--white); font-size: 9.5px; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); } /* ── NAVIGATION / MEGA MENU ──────────────────────────── */ .site-nav { border-top: 1px solid var(--gray-100); background: var(--white); } .nav-list { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 5px; padding: 12px 14px; font-size: 13.5px; font-weight: 500; color: var(--gray-700); white-space: nowrap; transition: color var(--t-fast); border-bottom: 3px solid transparent; text-decoration: none; } .nav-link:hover, .nav-link.active { color: var(--pink); border-bottom-color: var(--pink); } .nav-link.highlight { color: var(--orange); font-weight: 700; } .nav-link.highlight:hover { color: var(--orange); border-bottom-color: var(--orange); } .nav-link .nav-arrow { font-size: 10px; color: var(--gray-400); } /* Mega Menu */ .mega-drop { position: absolute; top: 100%; left: 0; transform: translateY(10px); background: var(--white); border: 1px solid var(--gray-200); border-top: 3px solid var(--pink); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-xl); padding: 24px 28px; width: max-content; max-width: min(760px, calc(100vw - 32px)); z-index: 950; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; pointer-events: none; } /* invisible hover bridge so the menu doesn't close in the gap */ .mega-drop::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-item:hover .mega-drop, .nav-item:focus-within .mega-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; } .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .mega-col-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--pink); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); } .mega-link { display: block; padding: 5px 0; font-size: 13px; color: var(--gray-600); transition: color var(--t-fast); } .mega-link:hover { color: var(--pink); padding-left: 4px; } /* ── MOBILE MENU BUTTON ───────────────────────────────── */ .mob-menu-btn { display: none; width: 40px; height: 40px; border: 1.5px solid var(--gray-200); border-radius: var(--r); align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--gray-700); background: none; flex-shrink: 0; } /* ── MOBILE DRAWER ────────────────────────────────────── */ .mob-nav { position: fixed; top: 0; left: -100%; width: min(340px, 90vw); height: 100dvh; background: var(--white); z-index: 9999; transition: left var(--t); overflow-y: auto; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; } .mob-nav.open { left: 0; } .mob-nav-overlay { position: fixed; inset: 0; background: rgb(0 0 0/.5); z-index: 9998; display: none; backdrop-filter: blur(2px); } .mob-nav-overlay.show { display: block; } .mob-nav-head { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .mob-nav-close { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); border: none; color: var(--white); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mob-nav-user { padding: 14px 20px; background: var(--pink-50); display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--gray-100); } .mob-nav-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 16px; flex-shrink: 0; } .mob-nav-body { flex: 1; padding: 8px 0; } .mob-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; font-size: 14px; color: var(--gray-700); border-bottom: 1px solid var(--gray-50); cursor: pointer; transition: background var(--t-fast); } .mob-nav-link:hover { background: var(--gray-50); color: var(--pink); } .mob-nav-link i { width: 20px; color: var(--pink); } .mob-sub-items { background: var(--gray-50); display: none; } .mob-sub-items.open { display: block; } .mob-sub-link { display: block; padding: 10px 20px 10px 48px; font-size: 13px; color: var(--gray-600); border-bottom: 1px solid var(--gray-100); transition: color var(--t-fast); } .mob-sub-link:hover { color: var(--pink); } /* ── MOBILE BOTTOM NAV ─────────────────────────────────── */ .mob-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--gray-200); z-index: 700; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 16px rgb(0 0 0/.1); } .mob-bottom-inner { display: flex; align-items: center; } .mob-bottom-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; font-size: 10.5px; font-weight: 500; color: var(--gray-400); text-decoration: none; transition: color var(--t-fast); position: relative; } .mob-bottom-item.active, .mob-bottom-item:hover { color: var(--pink); } .mob-bottom-item i { font-size: 20px; } .mob-bottom-cart { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; font-size: 10.5px; font-weight: 500; text-decoration: none; position: relative; } .mob-cart-circle { width: 50px; height: 50px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 20px; box-shadow: var(--shadow-pink); margin-top: -10px; } .mob-cart-lbl { color: var(--pink); font-weight: 600; } /* ── HERO SLIDER ──────────────────────────────────────── */ .hero-slider { position: relative; overflow: hidden; background: var(--gray-50); } .hero-slide { position: relative; height: clamp(320px, 50vw, 540px); overflow: hidden; display: flex; align-items: center; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: right center; transition: transform 7s ease; } .swiper-slide-active .hero-bg { transform: scale(1.05); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,24,39,.82) 0%, rgba(17,24,39,.55) 42%, rgba(17,24,39,.12) 70%, transparent 100%); } .hero-content { position: relative; z-index: 2; padding: 0 60px; max-width: 600px; color: var(--white); } .hero-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,20,90,.25); border: 1px solid rgba(212,20,90,.6); color: #ffa0c0; padding: 5px 14px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; } .hero-title { font-family: var(--font-head); font-size: clamp(26px, 4.5vw, 52px); font-weight: 700; color: var(--white); line-height: 1.15; margin-bottom: 14px; } .hero-title span { color: var(--gold); } .hero-desc { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 28px; line-height: 1.7; max-width: 480px; } .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* Hero pagination */ .hero-slider .swiper-pagination { bottom: 18px; } .hero-slider .swiper-pagination-bullet { width: 7px; height: 7px; background: rgba(255,255,255,.5); opacity: 1; transition: all var(--t); } .hero-slider .swiper-pagination-bullet-active { background: var(--gold); width: 24px; border-radius: 4px; } .hero-slider .swiper-button-next, .hero-slider .swiper-button-prev { width: 44px; height: 44px; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: var(--white); transition: all var(--t); } .hero-slider .swiper-button-next:hover, .hero-slider .swiper-button-prev:hover { background: var(--pink); border-color: var(--pink); } .hero-slider .swiper-button-next::after, .hero-slider .swiper-button-prev::after { font-size: 14px; font-weight: 700; } /* ── USP STRIP ────────────────────────────────────────── */ .usp-strip { background: linear-gradient(135deg, var(--gray-900) 0%, #1a1a2e 100%); padding: 14px 0; } .usp-list { display: flex; align-items: center; justify-content: center; gap: 0; } .usp-item { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: center; padding: 0 24px; color: var(--white); border-right: 1px solid rgba(255,255,255,.08); } .usp-item:last-child { border-right: none; } .usp-ico { width: 40px; height: 40px; background: rgba(249,163,22,.15); border: 1px solid rgba(249,163,22,.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--gold); flex-shrink: 0; } .usp-title { font-size: 13.5px; font-weight: 600; display: block; color: var(--white); } .usp-sub { font-size: 11px; color: rgba(255,255,255,.55); } /* ── OCCASION PILLS ───────────────────────────────────── */ .occ-pills { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .occ-pills::-webkit-scrollbar { display: none; } .occ-pill { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; cursor: pointer; padding: 4px 6px; border-radius: var(--r-md); transition: transform var(--t); } .occ-pill:hover { transform: translateY(-3px); } .occ-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--pink-50); display: flex; align-items: center; justify-content: center; font-size: 28px; transition: all var(--t); border: 2px solid transparent; } .occ-pill:hover .occ-circle, .occ-pill.active .occ-circle { background: var(--pink); border-color: var(--pink); } .occ-circle img { width: 44px; height: 44px; object-fit: contain; } .occ-name { font-size: 11.5px; font-weight: 600; color: var(--gray-600); text-align: center; max-width: 72px; line-height: 1.3; } .occ-pill:hover .occ-name { color: var(--pink); } /* ── CATEGORY CARDS ───────────────────────────────────── */ .cat-card { position: relative; border-radius: var(--r-lg); overflow: hidden; display: block; text-decoration: none; } .cat-card img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s ease; } .cat-card:hover img { transform: scale(1.08); } .cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(17,24,39,.85) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; } .cat-card-name { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 2px; } .cat-card-count { font-size: 12px; color: rgba(255,255,255,.7); } .cat-card-arrow { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 12px; opacity: 0; transform: scale(.8); transition: all var(--t); } .cat-card:hover .cat-card-arrow { opacity: 1; transform: scale(1); } /* ── PRODUCT CARDS ───────────────────────────────────── */ .product-card { background: var(--white); border-radius: var(--r-md); border: 1px solid var(--gray-200); overflow: hidden; display: flex; flex-direction: column; transition: all var(--t); position: relative; } .product-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-5px); } /* Product image area */ .pc-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--gray-100); } .pc-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .product-card:hover .pc-img-wrap img { transform: scale(1.06); } /* Badges on image */ .pc-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; } /* Quick actions */ .pc-actions { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 7px; z-index: 2; opacity: 0; transform: translateX(8px); transition: all var(--t); } .product-card:hover .pc-actions { opacity: 1; transform: translateX(0); } .pc-act-btn { width: 34px; height: 34px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--gray-500); box-shadow: var(--shadow-sm); transition: all var(--t-fast); } .pc-act-btn:hover { background: var(--pink); color: var(--white); border-color: var(--pink); } .pc-act-btn.wishlisted { background: var(--pink); color: var(--white); border-color: var(--pink); } /* Delivery tags on image */ .pc-delivery-tags { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; gap: 5px; flex-wrap: wrap; z-index: 2; } .pc-del-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(17,24,39,.8); backdrop-filter: blur(6px); color: var(--white); padding: 3px 8px; border-radius: var(--r-sm); font-size: 10.5px; font-weight: 600; } .pc-del-tag.same i { color: var(--gold); } .pc-del-tag.free i { color: #86efac; } /* Product card body */ .pc-body { padding: 14px; flex: 1; display: flex; flex-direction: column; } .pc-cat { font-size: 11px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 5px; } .pc-name { font-size: 14px; font-weight: 500; color: var(--gray-800); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 7px; text-decoration: none; } .pc-name:hover { color: var(--pink); } a.pc-name { display: -webkit-box; } .pc-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } .pc-stars { color: var(--gold); font-size: 12px; letter-spacing: -1px; } .pc-rev { font-size: 12px; color: var(--gray-400); } .pc-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; } .pc-price-now { font-size: 18px; font-weight: 700; color: var(--pink); } .pc-price-was { font-size: 13px; color: var(--gray-400); text-decoration: line-through; } .pc-price-save { font-size: 12px; color: var(--green); font-weight: 600; } .pc-footer { margin-top: auto; display: flex; gap: 8px; } /* ── OCCASION CARD (grid) ─────────────────────────────── */ .occ-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); text-decoration: none; text-align: center; transition: all var(--t); cursor: pointer; } .occ-card:hover { border-color: var(--pink); box-shadow: 0 4px 16px rgb(212 20 90/.12); transform: translateY(-3px); } .occ-card-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--pink-50); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--pink); transition: all var(--t); } .occ-card:hover .occ-card-ico { background: var(--pink); color: var(--white); } .occ-card-name { font-size: 13px; font-weight: 600; color: var(--gray-700); } /* ── TESTIMONIALS ─────────────────────────────────────── */ .testi-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 24px; transition: box-shadow var(--t); position: relative; } .testi-card:hover { box-shadow: var(--shadow-md); } .testi-quote { font-size: 40px; color: var(--pink-light); font-family: Georgia, serif; line-height: 1; margin-bottom: 4px; } .testi-text { font-size: 14px; color: var(--gray-600); line-height: 1.7; font-style: italic; margin-bottom: 18px; } .testi-author { display: flex; align-items: center; gap: 12px; } .testi-avatar-wrap {} .testi-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .testi-avatar-initials { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 16px; } .testi-name { font-weight: 600; font-size: 14px; color: var(--gray-800); } .testi-loc { font-size: 12px; color: var(--gray-400); } .testi-tag { display: inline-block; font-size: 11px; background: var(--pink-50); color: var(--pink); padding: 2px 8px; border-radius: var(--r-full); margin-top: 3px; } .testi-stars { color: var(--gold); font-size: 13px; margin-bottom: 10px; } /* ── BLOG CARDS ───────────────────────────────────────── */ .blog-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: all var(--t); } .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .blog-img { aspect-ratio: 16/10; overflow: hidden; background: var(--gray-100); } .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .blog-card:hover .blog-img img { transform: scale(1.05); } .blog-body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .blog-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--pink); margin-bottom: 7px; } .blog-title { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--gray-800); line-height: 1.4; margin-bottom: 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-excerpt { font-size: 13.5px; color: var(--gray-500); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; } .blog-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gray-400); margin-top: auto; } /* ── NEWSLETTER SECTION ───────────────────────────────── */ .nl-section { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); padding: 56px 0; position: relative; overflow: hidden; } .nl-section::before { content: ''; position: absolute; top: -50%; right: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 70%); pointer-events: none; } .nl-content { text-align: center; color: var(--white); position: relative; z-index: 1; } .nl-title { font-family: var(--font-head); font-size: clamp(22px, 4vw, 34px); font-weight: 700; color: var(--white); margin-bottom: 10px; } .nl-sub { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 28px; } .nl-form { display: flex; gap: 0; max-width: 480px; margin: 0 auto; background: var(--white); border-radius: var(--r-full); padding: 4px; box-shadow: 0 8px 40px rgb(0 0 0/.2); } .nl-input { flex: 1; border: none; background: transparent; padding: 11px 18px; font-size: 14px; color: var(--gray-800); outline: none; font-family: var(--font-body); min-width: 0; } .nl-input::placeholder { color: var(--gray-400); } .nl-btn { background: var(--gray-900); color: var(--white); border: none; border-radius: var(--r-full); padding: 11px 24px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; font-family: var(--font-body); transition: background var(--t-fast); } .nl-btn:hover { background: var(--pink-dark); } /* ── FOOTER ───────────────────────────────────────────── */ .site-footer { background: linear-gradient(180deg, #0f172a 0%, #07090f 100%); color: rgba(255,255,255,.75); padding-top: 60px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.06); } .footer-logo-wrap { margin-bottom: 16px; } .footer-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); opacity: .9; } .footer-logo .logo-fallback .logo-name { color: var(--white); } .footer-about { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.7; margin: 14px 0 20px; } .footer-contacts { display: flex; flex-direction: column; gap: 9px; } .footer-contact { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.65); } .footer-contact i { color: var(--gold); width: 16px; flex-shrink: 0; margin-top: 2px; } .footer-contact a { color: rgba(255,255,255,.65); } .footer-contact a:hover { color: var(--gold); } .social-row { display: flex; gap: 8px; margin-top: 20px; } .soc-btn { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.65); font-size: 14px; transition: all var(--t-fast); text-decoration: none; } .soc-btn:hover { background: var(--pink); border-color: var(--pink); color: var(--white); } .footer-heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--white); margin-bottom: 18px; } .footer-links { display: flex; flex-direction: column; gap: 8px; } .footer-link { font-size: 13.5px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 7px; transition: color var(--t-fast), padding-left var(--t-fast); text-decoration: none; } .footer-link:hover { color: var(--gold); padding-left: 4px; } .footer-link::before { content: '›'; font-size: 16px; color: var(--pink); } .footer-bottom { padding: 18px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.35); gap: 20px; flex-wrap: wrap; } .pay-icons { display: flex; align-items: center; gap: 6px; } .pay-icon { background: rgba(255,255,255,.1); padding: 4px 10px; border-radius: 4px; font-size: 11px; color: rgba(255,255,255,.5); } /* ── CART PAGE ────────────────────────────────────────── */ .cart-table { background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--gray-200); overflow: hidden; } .cart-item { display: grid; grid-template-columns: 90px 1fr auto auto; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--gray-100); transition: background var(--t-fast); } .cart-item:hover { background: var(--gray-50); } .cart-item:last-child { border-bottom: none; } .cart-img { width: 90px; height: 90px; border-radius: var(--r); overflow: hidden; background: var(--gray-100); } .cart-img img { width: 100%; height: 100%; object-fit: cover; } .cart-name { font-weight: 500; font-size: 14.5px; color: var(--gray-800); margin-bottom: 4px; } .cart-variant { font-size: 12px; color: var(--gray-400); } .cart-delivery { font-size: 12px; color: var(--green); margin-top: 3px; } .cart-addon-info { font-size: 11.5px; background: var(--gray-50); color: var(--gray-500); padding: 4px 10px; border-radius: 5px; margin-top: 6px; display: inline-block; } .cart-item-acts { display: flex; gap: 10px; margin-top: 8px; } .cart-act-link { font-size: 12px; color: var(--gray-400); background: none; border: none; cursor: pointer; transition: color var(--t-fast); padding: 0; } .cart-act-link:hover { color: var(--pink); } .cart-act-link.del:hover { color: #ef4444; } .cart-summary { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 22px; position: sticky; top: calc(var(--header-h) + 16px); } .cart-sum-title { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 18px; } .sum-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14px; color: var(--gray-700); border-bottom: 1px dashed var(--gray-100); } .sum-row:last-of-type { border-bottom: none; } .sum-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 8px; border-top: 2px solid var(--gray-200); margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--gray-900); } .sum-discount { color: var(--green); } .coupon-field { display: flex; gap: 8px; margin: 14px 0; } .coupon-input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); font-size: 13.5px; outline: none; text-transform: uppercase; font-family: var(--font-body); transition: border-color var(--t-fast); } .coupon-input:focus { border-color: var(--pink); } .qty-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--gray-200); border-radius: var(--r-full); overflow: hidden; } .qty-btn { width: 32px; height: 36px; border: none; background: var(--gray-100); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t-fast); font-weight: 700; color: var(--gray-700); } .qty-btn:hover { background: var(--pink); color: var(--white); } .qty-val { width: 36px; text-align: center; font-size: 15px; font-weight: 600; border: none; outline: none; background: transparent; } /* ── CHECKOUT ─────────────────────────────────────────── */ .checkout-step { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; } .checkout-step-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--gray-50); border-bottom: 1px solid var(--gray-100); } .step-num { width: 30px; height: 30px; background: var(--pink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 14px; flex-shrink: 0; } .step-ttl { font-weight: 600; font-size: 15px; color: var(--gray-900); } .checkout-step-body { padding: 22px; } /* Payment options */ .pay-opt { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid var(--gray-200); border-radius: var(--r); cursor: pointer; transition: all var(--t-fast); margin-bottom: 10px; } .pay-opt:hover { border-color: var(--pink); } .pay-opt.sel { border-color: var(--pink); background: var(--pink-50); } .pay-radio { width: 20px; height: 20px; border: 2px solid var(--gray-300); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); flex-shrink: 0; } .pay-opt.sel .pay-radio { border-color: var(--pink); background: var(--pink); } .pay-opt.sel .pay-radio::after { content: ''; width: 8px; height: 8px; background: var(--white); border-radius: 50%; } /* Date chips */ .date-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .date-chips::-webkit-scrollbar { display: none; } .date-chip { flex-shrink: 0; padding: 8px 14px; border: 2px solid var(--gray-200); border-radius: var(--r-sm); text-align: center; cursor: pointer; transition: all var(--t-fast); } .date-chip .d-day { font-weight: 700; font-size: 14px; display: block; } .date-chip .d-lbl { font-size: 11px; color: var(--gray-400); } .date-chip.active { border-color: var(--pink); background: var(--pink-50); } .date-chip.today { border-color: var(--gold); } .date-chip.today .d-day { color: var(--gold); } /* ── ACCOUNT PAGE ─────────────────────────────────────── */ .acc-sidebar { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; } .acc-user-head { padding: 22px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); color: var(--white); text-align: center; } .acc-avatar { width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; margin: 0 auto 12px; border: 3px solid rgba(255,255,255,.35); } .acc-nav { padding: 6px 0; } .acc-nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 14px; color: var(--gray-600); transition: all var(--t-fast); border-left: 3px solid transparent; text-decoration: none; cursor: pointer; background: none; border-top: none; border-right: none; border-bottom: none; width: 100%; text-align: left; font-family: var(--font-body); } .acc-nav-link:hover { background: var(--pink-50); color: var(--pink); border-left-color: var(--pink); } .acc-nav-link.active { background: var(--pink-50); color: var(--pink); border-left-color: var(--pink); font-weight: 600; } .acc-nav-link i { width: 18px; font-size: 15px; } /* Order cards */ .order-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 14px; transition: box-shadow var(--t-fast); } .order-card:hover { box-shadow: var(--shadow-md); } .order-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; text-transform: capitalize; } .s-placed { background: #dbeafe; color: #1e40af; } .s-confirmed { background: #f3e8ff; color: #7e22ce; } .s-processing { background: #fff7ed; color: #c2410c; } .s-out_for_delivery { background: #dcfce7; color: #15803d; } .s-delivered { background: #dcfce7; color: #14532d; } .s-cancelled { background: #fee2e2; color: #b91c1c; } /* ── PRODUCT DETAIL PAGE ──────────────────────────────── */ .pdp-gallery { display: grid; grid-template-columns: 76px 1fr; gap: 12px; } .pdp-thumbs { display: flex; flex-direction: column; gap: 8px; } .pdp-thumb { width: 76px; height: 76px; border-radius: var(--r); border: 2px solid transparent; overflow: hidden; cursor: pointer; transition: border-color var(--t-fast); background: var(--gray-100); } .pdp-thumb img { width: 100%; height: 100%; object-fit: cover; } .pdp-thumb.active { border-color: var(--pink); } .pdp-main { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; background: var(--gray-100); cursor: zoom-in; position: relative; } .pdp-main img { width: 100%; height: 100%; object-fit: cover; } .pdp-price-now { font-size: 30px; font-weight: 700; color: var(--pink); } .pdp-price-was { font-size: 17px; color: var(--gray-400); text-decoration: line-through; margin-left: 8px; } .pdp-save { font-size: 14px; color: var(--green); font-weight: 600; margin-top: 4px; display: block; } /* Addons */ .addon-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .addon-card { border: 2px solid var(--gray-200); border-radius: var(--r); padding: 10px; text-align: center; cursor: pointer; transition: all var(--t-fast); position: relative; } .addon-card:hover { border-color: var(--pink); } .addon-card.sel { border-color: var(--pink); background: var(--pink-50); } .addon-card img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; margin: 0 auto 6px; } .addon-card-ico { width: 52px; height: 52px; background: var(--gray-100); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; font-size: 22px; color: var(--gray-400); } .addon-name { font-size: 11.5px; font-weight: 500; color: var(--gray-700); } .addon-price { font-size: 12.5px; font-weight: 700; color: var(--pink); margin-top: 2px; } .addon-check { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; background: var(--pink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 11px; opacity: 0; transition: opacity var(--t-fast); } .addon-card.sel .addon-check { opacity: 1; } /* Variants */ .var-opts { display: flex; gap: 9px; flex-wrap: wrap; } .var-opt { padding: 8px 16px; border: 2px solid var(--gray-200); border-radius: var(--r-full); font-size: 13.5px; cursor: pointer; transition: all var(--t-fast); font-weight: 500; } .var-opt:hover { border-color: var(--pink); color: var(--pink); } .var-opt.active { border-color: var(--pink); background: var(--pink-50); color: var(--pink); } /* Delivery info block */ .delv-block { background: var(--gray-50); border-radius: var(--r); padding: 14px; margin-bottom: 18px; } .pincode-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; } .pincode-field { flex: 1; padding: 9px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--r-sm); font-size: 14px; outline: none; transition: border-color var(--t-fast); font-family: var(--font-body); } .pincode-field:focus { border-color: var(--pink); } /* ── ALERTS ───────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r); font-size: 14px; margin-bottom: 14px; } .alert-success { background: var(--green-lt); color: var(--green); border-left: 4px solid var(--green); } .alert-danger { background: #fef2f2; color: #b91c1c; border-left: 4px solid #ef4444; } .alert-warning { background: var(--gold-lt); color: #92400e; border-left: 4px solid var(--gold); } .alert-info { background: #eff6ff; color: var(--blue); border-left: 4px solid var(--blue); } /* ── TOASTS ───────────────────────────────────────────── */ .toast-wrap { position: fixed; bottom: 72px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } @media (min-width: 768px) { .toast-wrap { bottom: 24px; } } .toast { background: var(--gray-900); color: var(--white); padding: 12px 16px; border-radius: var(--r); font-size: 13.5px; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 340px; box-shadow: var(--shadow-lg); transform: translateX(120%); transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .toast.show { transform: translateX(0); } .toast.t-success { border-left: 4px solid var(--green); } .toast.t-error { border-left: 4px solid #ef4444; } .toast.t-info { border-left: 4px solid var(--blue); } .toast i { font-size: 17px; } /* ── MODALS ───────────────────────────────────────────── */ .modal-bg { position: fixed; inset: 0; background: rgb(0 0 0/.55); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--t); } .modal-bg.open { opacity: 1; visibility: visible; } .modal-box { background: var(--white); border-radius: var(--r-xl); max-width: 500px; width: 92%; max-height: 90dvh; overflow-y: auto; padding: 28px; box-shadow: var(--shadow-xl); transform: scale(.95); transition: transform var(--t); } .modal-bg.open .modal-box { transform: scale(1); } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--gray-900); } .modal-close { width: 34px; height: 34px; border: 1px solid var(--gray-200); border-radius: 50%; background: none; cursor: pointer; font-size: 16px; color: var(--gray-500); display: flex; align-items: center; justify-content: center; transition: all var(--t-fast); } .modal-close:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; } /* ── PROMO POPUP ──────────────────────────────────────── */ .popup-wrap { position: fixed; inset: 0; background: rgb(0 0 0/.65); backdrop-filter: blur(6px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .4s ease; } .popup-wrap.show { opacity: 1; visibility: visible; } .popup-box { background: var(--white); border-radius: var(--r-xl); max-width: 460px; width: 92%; overflow: hidden; position: relative; transform: scale(.88); transition: transform .4s cubic-bezier(.34,1.56,.64,1); box-shadow: var(--shadow-xl); } .popup-wrap.show .popup-box { transform: scale(1); } .popup-close-btn { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: rgba(0,0,0,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--white); font-size: 16px; z-index: 2; border: none; transition: background var(--t-fast); } .popup-close-btn:hover { background: rgba(0,0,0,.35); } /* ── SKELETON ─────────────────────────────────────────── */ .skel { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%); background-size: 200% 100%; animation: skel-anim 1.4s infinite; border-radius: 4px; } @keyframes skel-anim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── FILTER SIDEBAR ───────────────────────────────────── */ .filter-aside { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 20px; position: sticky; top: calc(var(--header-h) + 16px); } .filter-title { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; } .filter-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-100); } .filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .filter-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--gray-500); margin-bottom: 10px; } .filter-opt { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 13.5px; color: var(--gray-600); transition: color var(--t-fast); } .filter-opt:hover { color: var(--pink); } .filter-opt input[type="checkbox"], .filter-opt input[type="radio"] { accent-color: var(--pink); width: 14px; height: 14px; } /* Toolbar */ .cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r); margin-bottom: 20px; flex-wrap: wrap; } .cat-count { font-size: 14px; color: var(--gray-500); } .cat-count strong { color: var(--gray-800); } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 40px; flex-wrap: wrap; } .pg-btn { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); border-radius: var(--r); font-size: 14px; color: var(--gray-600); transition: all var(--t-fast); background: var(--white); padding: 0 10px; text-decoration: none; } .pg-btn.active { background: var(--pink); color: var(--white); border-color: var(--pink); } .pg-btn:hover:not(.active) { border-color: var(--pink); color: var(--pink); } /* ── TRACKING PAGE ────────────────────────────────────── */ .track-timeline { position: relative; padding-left: 0; } .track-step { display: flex; gap: 18px; margin-bottom: 24px; } .track-step-ico { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .track-ico-circle { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; border: 3px solid; flex-shrink: 0; z-index: 1; } .track-ico-circle.done { background: var(--green-lt); border-color: #86efac; color: var(--green); } .track-ico-circle.active { background: var(--pink); border-color: var(--pink); color: var(--white); box-shadow: 0 0 0 4px var(--pink-50); } .track-ico-circle.pending { background: var(--gray-50); border-color: var(--gray-200); color: var(--gray-400); } .track-ico-circle.cancelled { background: #fee2e2; border-color: #fecaca; color: #ef4444; } .track-line { width: 2px; flex: 1; background: var(--gray-200); margin: 4px 0; min-height: 20px; } .track-line.done { background: var(--green); } .track-step-info { flex: 1; padding-top: 8px; } .track-step-title { font-weight: 600; font-size: 15px; color: var(--gray-900); margin-bottom: 2px; } .track-step-sub { font-size: 13px; color: var(--gray-400); } .track-step-time { font-size: 12px; color: var(--pink); font-weight: 600; margin-top: 4px; } /* ── UTILITY CLASSES ──────────────────────────────────── */ .text-pink { color: var(--pink) !important; } .text-green { color: var(--green) !important; } .text-orange { color: var(--orange) !important; } .text-gold { color: var(--gold) !important; } .text-muted { color: var(--gray-400) !important; } .text-center { text-align: center; } .text-right { text-align: right; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .d-flex { display: flex; } .d-grid { display: grid; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .w-full { width: 100%; } .pos-rel { position: relative; } .overflow-hidden { overflow: hidden; } .divider { height: 1px; background: var(--gray-100); margin: 18px 0; } .rounded-full { border-radius: var(--r-full) !important; } .rounded-lg { border-radius: var(--r-lg) !important; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; background: var(--gray-100); border-radius: var(--r-full); font-size: 12.5px; color: var(--gray-500); } .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .p-16 { padding: 16px; } .p-20 { padding: 20px; } .p-24 { padding: 24px; } /* ── BACK TO TOP ──────────────────────────────────────── */ .back-top { position: fixed; bottom: 80px; right: 20px; width: 42px; height: 42px; background: var(--pink); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; box-shadow: var(--shadow-md); z-index: 600; opacity: 0; visibility: hidden; transition: all var(--t); } .back-top.vis { opacity: 1; visibility: visible; } .back-top:hover { background: var(--pink-dark); transform: translateY(-2px); } @media (min-width: 768px) { .back-top { bottom: 28px; right: 28px; } } /* ── WHATSAPP BTN ─────────────────────────────────────── */ .wa-btn { position: fixed; bottom: 140px; right: 20px; width: 50px; height: 50px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 24px; box-shadow: 0 4px 20px rgb(37 211 102/.4); z-index: 600; transition: all var(--t); } .wa-btn:hover { transform: scale(1.1); color: var(--white); } @media (min-width: 768px) { .wa-btn { bottom: 80px; right: 28px; } } /* ── ANIMATIONS ───────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } [data-aos] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } [data-aos].aos-on { opacity: 1; transform: translateY(0); } /* ── RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 1199px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 1023px) { .usp-item { padding: 0 16px; } .mega-drop { min-width: 560px; } } @media (max-width: 767px) { :root { --header-h: 60px; --topbar-h: 0px; } .topbar { display: none; } .header-main { gap: 10px; } .header-search { display: none; } .hact-lbl { display: none; } .hact-btn { padding: 7px 8px; } .site-nav { display: none; } .mob-menu-btn { display: flex; } .mob-bottom-nav { display: block; } body { padding-bottom: 64px; } .hero-slide { height: clamp(240px, 60vw, 380px); } .hero-content { padding: 0 20px; max-width: 100%; } .hero-title { font-size: clamp(20px, 6vw, 30px); } .hero-desc { font-size: 13px; margin-bottom: 20px; } .hero-btns { gap: 8px; } .hero-btns .btn { font-size: 13px; padding: 10px 18px; } .usp-list { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 0; } .usp-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: 10px 16px; } .usp-item:last-child { border-bottom: none; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .cart-item { grid-template-columns: 72px 1fr; } .pdp-gallery { grid-template-columns: 1fr; } .pdp-thumbs { flex-direction: row; overflow-x: auto; } .pdp-thumb { flex-shrink: 0; } .occ-pills { gap: 6px; } .occ-circle { width: 60px; height: 60px; font-size: 24px; } .sec-head { flex-direction: column; align-items: flex-start; } } @media (max-width: 479px) { .container { padding: 0 12px; } .hero-slide { height: 260px; } .hero-btns { flex-direction: column; } .hero-btns .btn { width: 100%; justify-content: center; } .nl-form { flex-direction: column; border-radius: var(--r-lg); } .nl-input { padding: 14px 18px; } .nl-btn { border-radius: var(--r); } } /* ============================================================ QUICK ADD-TO-CART (ADD-ONS) MODAL ============================================================ */ .qa-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.6); backdrop-filter: blur(5px); z-index: 9500; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } @media (min-width: 640px) { .qa-overlay { align-items: center; } } .qa-overlay.open { opacity: 1; visibility: visible; } .qa-box { background: var(--white); width: 100%; max-width: 560px; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow-y: auto; position: relative; transform: translateY(100%); transition: transform .38s cubic-bezier(.34,1.3,.5,1); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; } @media (min-width: 640px) { .qa-box { border-radius: var(--r-xl); transform: scale(.92) translateY(20px); } } .qa-overlay.open .qa-box { transform: translateY(0); } @media (min-width: 640px) { .qa-overlay.open .qa-box { transform: scale(1) translateY(0); } } .qa-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: rgba(255,255,255,.9); border: 1px solid var(--gray-200); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; color: var(--gray-600); z-index: 3; transition: all var(--t-fast); } .qa-close:hover { background: var(--pink); color: #fff; border-color: var(--pink); transform: rotate(90deg); } .qa-loading { padding: 70px 0; text-align: center; font-size: 30px; color: var(--pink); } /* drag handle on mobile */ .qa-box::before { content: ''; display: block; width: 40px; height: 4px; background: var(--gray-300); border-radius: 4px; margin: 8px auto 0; } @media (min-width: 640px) { .qa-box::before { display: none; } } .qa-head { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; background: var(--white); z-index: 2; } .qa-img { width: 84px; height: 84px; border-radius: var(--r); object-fit: cover; background: var(--gray-100); flex-shrink: 0; } .qa-head-info { flex: 1; min-width: 0; } .qa-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-400); margin-bottom: 3px; } .qa-name { font-size: 16px; font-weight: 600; color: var(--gray-900); line-height: 1.3; margin-bottom: 6px; } .qa-price-row { display: flex; align-items: baseline; gap: 8px; } .qa-price { font-size: 20px; font-weight: 700; color: var(--pink); } .qa-mrp { font-size: 13px; color: var(--gray-400); text-decoration: line-through; } .qa-deltags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .qa-deltag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-full); background: var(--gray-100); color: var(--gray-600); } .qa-deltag.same { background: var(--gold-lt); color: #92400e; } .qa-deltag.mid { background: #1e1b4b; color: var(--gold); } .qa-body { padding: 4px 20px 12px; flex: 1; } .qa-section { padding: 14px 0; border-bottom: 1px dashed var(--gray-100); } .qa-section:last-child { border-bottom: none; } .qa-sec-title { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--gray-800); margin-bottom: 12px; } .qa-sec-title i { margin-right: 6px; color: var(--gray-400); } .qa-sec-opt { font-size: 11px; font-weight: 500; color: var(--gray-400); text-transform: none; } /* variants */ .qa-variants { display: flex; gap: 8px; flex-wrap: wrap; } .qa-variant { padding: 8px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--r-full); font-size: 13px; cursor: pointer; transition: all var(--t-fast); } .qa-variant.sel { border-color: var(--pink); background: var(--pink-50); color: var(--pink); font-weight: 600; } /* dates */ .qa-dates { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .qa-dates::-webkit-scrollbar { display: none; } .qa-date { flex-shrink: 0; min-width: 64px; padding: 8px 10px; border: 1.5px solid var(--gray-200); border-radius: var(--r); text-align: center; cursor: pointer; transition: all var(--t-fast); } .qa-date.sel { border-color: var(--pink); background: var(--pink-50); } .qa-date .qd-d { font-size: 15px; font-weight: 700; color: var(--gray-900); display: block; } .qa-date.sel .qd-d { color: var(--pink); } .qa-date .qd-l { font-size: 10.5px; color: var(--gray-400); } /* add-ons grid */ .qa-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; } .qa-addon { border: 1.5px solid var(--gray-200); border-radius: var(--r); padding: 9px 8px; text-align: center; cursor: pointer; transition: all var(--t-fast); position: relative; background: var(--white); } .qa-addon:hover { border-color: var(--pink); } .qa-addon.sel { border-color: var(--pink); background: var(--pink-50); } .qa-addon-img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; margin: 0 auto 6px; background: var(--gray-100); } .qa-addon-ico { width: 46px; height: 46px; border-radius: 8px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; font-size: 19px; color: var(--pink); } .qa-addon-name { font-size: 11px; font-weight: 500; color: var(--gray-700); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 28px; } .qa-addon-price { font-size: 11.5px; font-weight: 700; color: var(--pink); margin-top: 3px; } .qa-addon-check { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; background: var(--pink); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; opacity: 0; transform: scale(.5); transition: all var(--t-fast); } .qa-addon.sel .qa-addon-check { opacity: 1; transform: scale(1); } .qa-msg { width: 100%; border: 1.5px solid var(--gray-200); border-radius: var(--r); padding: 10px 12px; font-size: 13.5px; font-family: var(--font-body); outline: none; resize: vertical; } .qa-msg:focus { border-color: var(--pink); } .qa-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--gray-100); position: sticky; bottom: 0; background: var(--white); box-shadow: 0 -4px 16px rgba(0,0,0,.05); } .qa-foot-left { flex-shrink: 0; } .qa-foot-label { font-size: 11px; color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; } .qa-foot-total { font-size: 20px; font-weight: 700; color: var(--gray-900); } .qa-qty { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: var(--r-full); overflow: hidden; } .qa-qty button { width: 32px; height: 36px; border: none; background: var(--gray-50); font-size: 16px; font-weight: 700; cursor: pointer; color: var(--gray-700); } .qa-qty button:hover { background: var(--pink); color: #fff; } .qa-qty span { width: 34px; text-align: center; font-weight: 600; font-size: 14px; } .qa-add-btn { flex: 1; } /* ============================================================ FRONTEND POLISH — premium card refinements ============================================================ */ .product-card { box-shadow: var(--shadow-card); } .product-card:hover { box-shadow: 0 16px 40px rgba(212,20,90,.13); } .pc-name { font-weight: 600; } /* "earliest delivery" chip under price */ .pc-earliest { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--green); font-weight: 500; margin-bottom: 8px; } .pc-earliest i { font-size: 10px; } /* rating pill (winni-style green badge) */ .pc-rating-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; } .pc-rating-pill i { font-size: 9px; } /* section title underline accent */ .sec-title { position: relative; display: inline-block; } /* occasion circle gradient ring */ .occ-circle { box-shadow: 0 4px 14px rgba(212,20,90,.1); } /* hero refinement */ .hero-slide { box-shadow: inset 0 -60px 80px -40px rgba(0,0,0,.3); } /* category card premium */ .cat-card { box-shadow: var(--shadow-card); } .cat-card:hover { box-shadow: var(--shadow-lg); } /* ============================================================ PREMIUM POLISH LAYER (v4) ============================================================ */ /* --- Section headers: centered, with accent underline --- */ .sec-head { margin-bottom: 32px; } .sec-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 3px; } .sec-label::before, .sec-label::after { content: ''; width: 18px; height: 2px; background: var(--pink); opacity: .5; display: inline-block; } .sec-label::before { display: none; } .sec-title { font-size: clamp(22px, 3.6vw, 32px); letter-spacing: -.5px; } .sec-title::after { content: ''; display: block; width: 52px; height: 3px; background: linear-gradient(90deg, var(--pink), var(--gold)); border-radius: 3px; margin-top: 10px; } .view-all { background: var(--white); border: 1.5px solid var(--gray-200); padding: 9px 18px; border-radius: var(--r-full); transition: all var(--t); } .view-all:hover { background: var(--pink); color: #fff; border-color: var(--pink); } /* --- Product card refinements --- */ .product-card { border-radius: var(--r-lg); border-color: var(--gray-100); } .pc-img-wrap { background: linear-gradient(135deg, var(--gray-50), #fff); } .pc-body { padding: 16px 14px 16px; } .pc-name { font-size: 14.5px; min-height: 40px; color: var(--gray-900); } .pc-price-now { font-size: 19px; letter-spacing: -.3px; } .btn-add { padding: 11px 14px; font-weight: 600; letter-spacing: .2px; border-radius: var(--r); background: var(--white); color: var(--pink); border: 1.5px solid var(--pink); box-shadow: none; } .btn-add:hover { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dark) 100%); color: #fff; border-color: transparent; box-shadow: var(--shadow-pink); } .btn-add i { transition: transform var(--t-fast); } .btn-add:hover i { transform: translateX(-1px) scale(1.1); } .pc-act-btn { width: 36px; height: 36px; box-shadow: 0 2px 8px rgba(0,0,0,.1); } /* --- Occasion circles: gradient ring --- */ .occ-circle { background: #fff; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, var(--pink), var(--gold)); background-origin: border-box; background-clip: content-box, border-box; padding: 4px; } .occ-pill:hover .occ-circle { transform: scale(1.06); box-shadow: 0 8px 20px rgba(212,20,90,.2); } .occ-name { font-weight: 600; } /* --- USP strip: cleaner --- */ .usp-strip { background: linear-gradient(135deg, #1f1430 0%, #2b1530 100%); padding: 16px 0; } .usp-ico { background: rgba(245,158,11,.14); } /* --- Hero content: stronger --- */ .hero-pill { backdrop-filter: blur(6px); } .hero-title { letter-spacing: -.5px; text-shadow: 0 2px 20px rgba(0,0,0,.2); } .hero-btns .btn-white { font-weight: 700; } /* --- Section vertical rhythm --- */ .section-sm { padding: 38px 0; } @media (min-width: 768px) { .section-sm { padding: 52px 0; } } /* --- Category tile labels stronger --- */ .cat-card-overlay { background: linear-gradient(180deg, transparent 35%, rgba(17,24,39,.9) 100%); } .cat-card-name { font-size: 17px; } /* --- Testimonials --- */ .testi-card { border-radius: var(--r-lg); border-color: var(--gray-100); } /* --- Buttons global polish --- */ .btn-primary { letter-spacing: .2px; } /* --- Trust ribbon under hero (optional decorative) --- */ .trust-ribbon { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 14px 0; } .trust-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--gray-600); background: var(--white); border: 1px solid var(--gray-200); padding: 7px 16px; border-radius: var(--r-full); } .trust-chip i { color: var(--pink); } /* --- Add-to-cart popup: extra premium --- */ .qa-box { box-shadow: 0 -10px 60px rgba(0,0,0,.3); } @media (min-width:640px){ .qa-box { box-shadow: var(--shadow-xl); } } .qa-head { background: linear-gradient(135deg, var(--pink-50), #fff); } .qa-add-btn { font-weight: 700; box-shadow: var(--shadow-pink); } .qa-sec-title { font-size: 14px; } .qa-addon.sel { box-shadow: 0 0 0 1px var(--pink) inset; } /* --- Smooth image fade-in --- */ .pc-img-wrap img, .cat-card img { transition: transform .5s ease, opacity .4s ease; } /* --- Mobile spacing tweaks --- */ @media (max-width: 767px) { .sec-title::after { margin-left: 0; } .pc-name { min-height: 36px; font-size: 13.5px; } .pc-body { padding: 12px 11px; } .section-sm { padding: 30px 0; } } /* ============================================================ WINNI-STYLE HOME SECTIONS (v5) ============================================================ */ /* --- Category circles row --- */ .cat-circles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; } @media (max-width: 767px) { .cat-circles { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 6px; scrollbar-width: none; } .cat-circles::-webkit-scrollbar { display: none; } } .cat-circle { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; cursor: pointer; flex-shrink: 0; } .cat-circle-img { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: var(--pink-50); border: 3px solid #fff; box-shadow: 0 5px 18px rgba(212,20,90,.14); transition: transform var(--t), box-shadow var(--t); } .cat-circle-img img { width: 100%; height: 100%; object-fit: cover; } .cat-circle:hover .cat-circle-img { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 26px rgba(212,20,90,.24); } .cat-circle-name { font-size: 12.5px; font-weight: 600; color: var(--gray-700); text-align: center; } @media (max-width:767px){ .cat-circle-img{width:76px;height:76px} .cat-circle-name{font-size:11.5px;max-width:84px} } /* --- Promo tiles row (under hero) --- */ .promo-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 767px) { .promo-tiles { grid-template-columns: 1fr; } } .promo-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/2; display: flex; align-items: center; padding: 0 24px; color: #fff; text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--t), box-shadow var(--t); } .promo-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .promo-tile-content { position: relative; z-index: 2; } .promo-tile-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: .9; } .promo-tile-title { font-family: var(--font-head); font-size: clamp(17px,2vw,22px); font-weight: 700; margin: 3px 0 8px; line-height: 1.2; } .promo-tile-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.95); color: var(--gray-900); padding: 6px 14px; border-radius: var(--r-full); } .promo-tile-emoji { position: absolute; right: 12px; bottom: -6px; font-size: 76px; opacity: .35; z-index: 1; } /* --- Split recipient banners (For Her / For Him) --- */ .split-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 767px) { .split-banners { grid-template-columns: 1fr; } } .split-banner { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 200px; display: flex; align-items: center; padding: 28px 32px; text-decoration: none; color: #fff; transition: transform var(--t), box-shadow var(--t); box-shadow: var(--shadow-card); } .split-banner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .split-banner.her { background: linear-gradient(120deg, #ec4899 0%, #be185d 100%); } .split-banner.him { background: linear-gradient(120deg, #6366f1 0%, #4338ca 100%); } .split-banner-content { position: relative; z-index: 2; max-width: 70%; } .split-banner-eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; } .split-banner-title { font-family: var(--font-head); font-size: clamp(22px,3vw,30px); font-weight: 700; margin: 4px 0 6px; } .split-banner-sub { font-size: 13.5px; opacity: .9; margin-bottom: 16px; } .split-banner-emoji { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 110px; opacity: .25; z-index: 1; } /* --- Wide promo banner --- */ .promo-wide { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 180px; display: flex; align-items: center; padding: 0 clamp(24px,5vw,60px); color: #fff; text-decoration: none; background: linear-gradient(120deg, var(--gray-900) 0%, #3b1d3a 60%, var(--pink-dark) 100%); } .promo-wide-content { position: relative; z-index: 2; max-width: 620px; } /* --- City / international delivery tiles --- */ .city-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; } .city-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--r); background: #fff; text-decoration: none; transition: all var(--t-fast); } .city-tile:hover { border-color: var(--pink); box-shadow: 0 4px 14px rgba(212,20,90,.12); transform: translateY(-2px); } .city-tile i { width: 38px; height: 38px; background: var(--pink-50); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--pink); flex-shrink: 0; } .city-tile-name { font-size: 13.5px; font-weight: 600; color: var(--gray-800); } .city-tile-sub { font-size: 11.5px; color: var(--gray-400); } /* --- Product grid (non-carousel, Winni-style) --- */ .prod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1199px) { .prod-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 991px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* --- Why choose us band --- */ .why-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } @media (max-width:767px){ .why-band { grid-template-columns: repeat(2,1fr); } } .why-card { text-align: center; padding: 24px 16px; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); transition: all var(--t); } .why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .why-ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--pink-50); display: flex; align-items: center; justify-content: center; font-size: 23px; color: var(--pink); } .why-title { font-weight: 600; font-size: 14px; color: var(--gray-900); margin-bottom: 4px; } .why-sub { font-size: 12.5px; color: var(--gray-500); } /* ============================================================ LISTING PAGE — reviews band + SEO block (v6) ============================================================ */ .reviews-band { background: var(--gray-50); padding: 44px 0; border-top: 1px solid var(--gray-100); } .reviews-head { text-align: center; margin-bottom: 28px; } .reviews-title { font-family: var(--font-head); font-size: clamp(22px,3vw,30px); color: var(--gray-900); margin-bottom: 14px; } .reviews-score { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; } .reviews-score-num { font-size: 40px; font-weight: 800; color: var(--green); line-height: 1; } .reviews-score-num span { font-size: 20px; color: var(--gray-400); font-weight: 600; } .reviews-stars { color: var(--gold); font-size: 18px; } .reviews-count { font-size: 13px; color: var(--gray-500); } .reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } @media (max-width: 991px) { .reviews-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 575px) { .reviews-grid { grid-template-columns: 1fr; } } .review-mini { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-card); } .review-mini-stars { color: var(--gold); font-size: 13px; margin-bottom: 10px; } .review-mini-text { font-size: 13.5px; color: var(--gray-600); line-height: 1.6; font-style: italic; margin-bottom: 14px; min-height: 64px; } .review-mini-author { display: flex; align-items: center; gap: 10px; } .review-mini-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--pink),var(--pink-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .review-mini-name { font-size: 13.5px; font-weight: 600; color: var(--gray-800); } .review-mini-loc { font-size: 11.5px; color: var(--gray-400); } .seo-block { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); padding: 28px; } .seo-title { font-size: 19px; color: var(--gray-900); margin-bottom: 12px; } .seo-block p { color: var(--gray-500); line-height: 1.8; font-size: 14px; margin-bottom: 12px; } .seo-points { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gray-100); } @media (max-width: 767px) { .seo-points { grid-template-columns: repeat(2,1fr); } } .seo-point { display: flex; align-items: center; gap: 10px; } .seo-point i { width: 38px; height: 38px; background: var(--pink-50); color: var(--pink); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .seo-point strong { display: block; font-size: 13px; color: var(--gray-800); } .seo-point span { font-size: 11.5px; color: var(--gray-400); } /* listing toolbar refinement */ .cat-toolbar { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--r); } .cat-toolbar .form-control { border-radius: var(--r-full); } /* ============================================================ CATEGORY HERO BAND ============================================================ */ .cat-hero { position: relative; overflow: hidden; padding: 26px 0 30px; color: #fff; } .cat-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; } .cat-hero-crumb { font-size: 12.5px; display: flex; align-items: center; gap: 7px; margin-bottom: 14px; position: relative; z-index: 1; } .cat-hero-crumb a { color: rgba(255,255,255,.8); } .cat-hero-crumb a:hover { color: #fff; } .cat-hero-crumb i { font-size: 8px; opacity: .6; } .cat-hero-crumb span { color: #fff; font-weight: 600; } .cat-hero-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 1; } .cat-hero-title { font-family: var(--font-head); font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 8px; text-shadow: 0 2px 16px rgba(0,0,0,.15); } .cat-hero-sub { font-size: 14px; color: rgba(255,255,255,.9); margin-bottom: 14px; } .cat-hero-sub strong { color: var(--gold); } .cat-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; } .cat-hero-badges span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); padding: 6px 13px; border-radius: var(--r-full); backdrop-filter: blur(6px); } .cat-hero-badges i { color: var(--gold); } .cat-hero-emoji { font-size: clamp(64px, 9vw, 120px); line-height: 1; opacity: .9; flex-shrink: 0; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); } @media (max-width: 575px) { .cat-hero-emoji { display: none; } } /* sticky toolbar on desktop */ @media (min-width: 992px) { .cat-toolbar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 50; box-shadow: var(--shadow-sm); } } /* ============================================================ PRODUCT DETAIL — delivery banner ============================================================ */ .pdp-delivery-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(120deg, var(--green-lt) 0%, #ecfdf5 100%); border: 1px solid #bbf7d0; border-radius: var(--r); padding: 12px 16px; margin-bottom: 18px; } .pdp-del-main { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-700); } .pdp-del-main i { color: var(--green); font-size: 18px; } .pdp-del-main span { color: var(--gray-500); } .pdp-del-main strong { color: var(--green); font-weight: 700; } .pdp-del-tags { display: flex; gap: 6px; flex-wrap: wrap; } .pdp-del-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full); background: #fff; color: var(--gray-600); border: 1px solid var(--gray-200); } .pdp-del-chip.same { background: var(--gold-lt); color: #92400e; border-color: #fcd34d; } .pdp-del-chip.mid { background: #1e1b4b; color: var(--gold); border-color: #312e81; }