/* ================================================================
Maa Siddheshwari - Premium Design System
Modern, Professional & Luxurious E-Commerce CSS
================================================================ */
/* --- Design Tokens / CSS Variables --- */
:root {
/* Brand Colors */
--ms-primary: #2563eb;
--ms-primary-dark: #1d4ed8;
--ms-primary-light: #60a5fa;
--ms-primary-ultra-light: #eff6ff;
--ms-accent: #e63946;
--ms-accent-light: #fef2f2;
--ms-gold: #f59e0b;
--ms-gold-dark: #d97706;
--ms-gold-light: #fef3c7;
--ms-success: #10b981;
--ms-success-light: #ecfdf5;
--ms-purple: #8b5cf6;
--ms-purple-light: #f5f3ff;
--ms-cyan: #06b6d4;
/* Neutrals */
--ms-text: #0f172a;
--ms-text-secondary: #475569;
--ms-text-muted: #94a3b8;
--ms-border: #e2e8f0;
--ms-bg: #ffffff;
--ms-bg-subtle: #f8fafc;
--ms-bg-alt: #f1f5f9;
/* Spacing & Radius */
--ms-radius-sm: 8px;
--ms-radius-md: 12px;
--ms-radius-lg: 16px;
--ms-radius-xl: 24px;
--ms-radius-full: 50px;
/* Shadows - Premium Depth System */
--ms-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--ms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--ms-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--ms-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--ms-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--ms-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--ms-shadow-primary: 0 10px 25px -5px rgba(37, 99, 235, 0.35);
--ms-shadow-danger: 0 10px 25px -5px rgba(230, 57, 70, 0.35);
--ms-shadow-gold: 0 10px 25px -5px rgba(245, 158, 11, 0.35);
/* Transitions */
--ms-ease: cubic-bezier(0.4, 0, 0.2, 1);
--ms-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ms-transition: all 0.3s var(--ms-ease);
--ms-transition-fast: all 0.15s var(--ms-ease);
--ms-transition-slow: all 0.5s var(--ms-ease);
}
/* ================================================================
BASE & TYPOGRAPHY
================================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
color: var(--ms-text);
background-color: var(--ms-bg);
line-height: 1.6;
font-size: 15px;
font-weight: 400;
overflow-x: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
transition: var(--ms-transition-fast);
text-decoration: none;
color: var(--ms-primary);
}
a:hover {
color: var(--ms-primary-dark);
}
::selection {
background: var(--ms-primary);
color: #fff;
}
img {
max-width: 100%;
}
/* Utility Classes */
.fw-800 {
font-weight: 800 !important;
}
.fw-900 {
font-weight: 900 !important;
}
/* ================================================================
TOP BAR - PREMIUM GRADIENT
================================================================ */
.top-bar-premium {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
color: rgba(255, 255, 255, 0.92);
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
padding: 10px 0;
letter-spacing: 0.2px;
border-bottom: none;
font-weight: 500;
position: relative;
}
.top-bar-premium::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--ms-primary), #6366f1, var(--ms-primary));
opacity: 0.5;
}
.top-bar-premium span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.top-bar-premium a {
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
transition: all 0.2s ease;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.07);
}
.top-bar-premium a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.14);
transform: translateY(-1px);
}
.top-bar-premium .top-divider {
color: rgba(255, 255, 255, 0.15);
margin: 0 6px;
font-weight: 300;
}
.top-bar-premium i {
font-size: 0.72rem;
color: #60a5fa;
}
/* ================================================================
NAVBAR - ELEVATED PREMIUM
================================================================ */
.navbar-premium {
padding: 0.75rem 0;
background: #fff;
border-bottom: none;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1030;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.navbar-premium.scrolled {
padding: 0.6rem 0;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* Brand - Bold & Modern */
.navbar-brand {
position: relative;
padding-right: 1.8rem;
margin-right: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
text-decoration: none;
}
.navbar-brand::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1.5px;
height: 32px;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), transparent);
border-radius: 2px;
}
.brand-icon {
width: 46px;
height: 46px;
background: linear-gradient(135deg, var(--ms-primary) 0%, #4f46e5 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.brand-logo {
height: 44px;
width: auto;
max-height: 44px;
object-fit: contain;
transition: all 0.3s ease;
border-radius: 12px;
filter: none;
flex-shrink: 0;
}
.navbar-brand:hover .brand-icon {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
.navbar-brand:hover .brand-logo {
transform: translateY(-1px);
}
.brand-name {
font-family: 'Playfair Display', 'Georgia', serif;
font-weight: 800;
font-size: 1.6rem;
letter-spacing: -0.3px;
color: #0f172a;
transition: all 0.3s ease;
line-height: 1.2;
text-transform: none;
text-decoration: none;
}
.brand-name-accent {
background: linear-gradient(135deg, var(--ms-primary), #4f46e5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
}
.navbar-brand:hover .brand-name {
color: #1e293b;
text-decoration: none;
}
/* Nav Links - Clean & Professional */
.nav-link-premium {
font-family: 'Inter', sans-serif;
font-weight: 600;
color: #334155;
padding: 0.6rem 1.35rem;
font-size: 1.35rem;
position: relative;
transition: all 0.25s ease;
border-radius: 10px;
letter-spacing: 0;
text-transform: none;
}
.nav-link-premium:hover {
color: var(--ms-primary);
background: rgba(37, 99, 235, 0.06);
}
.nav-link-premium.active {
color: var(--ms-primary);
font-weight: 600;
background: rgba(37, 99, 235, 0.06);
}
/* Nav link underline removed for clean look */
.nav-link-premium::after {
display: none;
}
/* Dropdown - Modern Card */
.dropdown-menu-premium {
border-radius: 16px !important;
padding: 0.65rem !important;
min-width: 220px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04);
background: #fff;
animation: dropdownReveal 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dropdownReveal {
from {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.dropdown-menu-premium .dropdown-item {
border-radius: 10px;
padding: 0.65rem 1rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.2s ease;
color: #475569;
display: flex;
align-items: center;
}
.dropdown-menu-premium .dropdown-item i {
transition: all 0.2s ease;
font-size: 0.65rem;
opacity: 0.4;
}
.dropdown-menu-premium .dropdown-item:hover {
background: rgba(37, 99, 235, 0.06);
color: var(--ms-primary);
transform: translateX(4px);
}
.dropdown-menu-premium .dropdown-item:hover i {
color: var(--ms-primary);
opacity: 1;
}
.dropdown-menu-premium .dropdown-item:active {
background: rgba(37, 99, 235, 0.1);
}
/* Navbar Toggler - Refined */
.navbar-toggler {
width: 44px;
height: 44px;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
padding: 0 !important;
transition: all 0.25s ease;
background: var(--ms-bg-subtle);
}
.navbar-toggler:hover {
border-color: var(--ms-primary) !important;
background: rgba(37, 99, 235, 0.06);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.navbar-toggler i {
font-size: 1.15rem;
color: var(--ms-text);
transition: color 0.2s ease;
}
.navbar-toggler:hover i {
color: var(--ms-primary);
}
/* Mobile Menu - Card Style */
@media (max-width: 991.98px) {
.navbar-brand {
padding-right: 0;
margin-right: 0;
}
.navbar-brand::after {
display: none;
}
.navbar-collapse {
background: #fff;
border-radius: 18px;
margin-top: 0.85rem;
padding: 1.1rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.navbar-nav {
gap: 3px;
}
.nav-link-premium {
padding: 0.85rem 1.15rem;
font-size: 1rem;
border-radius: 12px;
text-transform: none;
letter-spacing: 0;
}
.nav-link-premium:hover {
background: rgba(37, 99, 235, 0.05);
}
.nav-link-premium::after {
display: none;
}
.search-premium {
max-width: 100%;
margin: 0.85rem 0;
}
.navbar-nav-icons {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
}
/* Scrolled State Adjustments - Classic (no-op) */
/* Dropdown Trigger */
.nav-item.dropdown:hover .dropdown-menu-premium {
display: block;
}
.dropdown-toggle::after {
transition: transform 0.25s ease;
margin-left: 0.35em;
vertical-align: 0.15em;
font-size: 0.65em;
}
.dropdown.show .dropdown-toggle::after {
transform: rotate(180deg);
}
/* Category Badge in Dropdown */
.dropdown-menu-premium .dropdown-item .badge {
margin-left: auto;
font-size: 0.65rem;
padding: 0.25em 0.5em;
}
/* ================================================================
SEARCH BAR - PREMIUM PILL
================================================================ */
.search-premium {
max-width: 300px;
position: relative;
z-index: 1040;
width: 100%;
}
.search-input-wrap {
position: relative;
width: 100%;
display: flex;
align-items: center;
}
.search-input-wrap .search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: var(--ms-text-muted);
font-size: 0.85rem;
z-index: 2;
pointer-events: none;
transition: color 0.25s ease;
}
.search-input-wrap .form-control {
background: var(--ms-bg-alt) !important;
border: 1.5px solid transparent;
border-radius: 50px;
padding: 0.55rem 1rem 0.55rem 2.65rem;
font-family: 'Inter', sans-serif;
font-size: 0.84rem;
font-weight: 400;
transition: all 0.25s ease;
color: var(--ms-text);
width: 100%;
height: 42px;
}
.search-input-wrap .form-control:hover {
border-color: rgba(37, 99, 235, 0.2);
background: #fff !important;
}
.search-input-wrap .form-control:focus {
background: #fff !important;
border-color: var(--ms-primary);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
outline: none;
}
.search-input-wrap .form-control:focus~.search-icon {
color: var(--ms-primary);
}
.search-input-wrap .form-control::placeholder {
color: #94a3b8;
font-weight: 400;
}
/* ================================================================
HEADER CTA BUTTONS - CLASSIC
================================================================ */
.btn-header-outline {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
padding: 0.5rem 1.25rem;
border-radius: 6px;
border: 1px solid #2563eb;
color: #2563eb;
background: transparent;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.btn-header-outline:hover {
background: #eff6ff;
color: #1d4ed8;
}
.btn-header-primary {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
padding: 0.5rem 1.25rem;
border-radius: 6px;
border: none;
color: #fff;
background: #2563eb;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.btn-header-primary:hover {
background: #1d4ed8;
color: #fff;
}
.btn-header-primary:hover {
color: #fff;
box-shadow: 0 6px 24px rgba(37, 99, 235, 0.4);
transform: translateY(-2px);
filter: brightness(1.08);
}
/* Mobile CTA buttons */
@media (max-width: 991.98px) {
.navbar-actions {
flex-wrap: wrap;
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: center;
gap: 10px;
}
.btn-header-outline,
.btn-header-primary {
flex: 1;
justify-content: center;
padding: 0.65rem 1rem;
}
}
/* ================================================================
NAVIGATION ACTION BUTTONS (Icons) - Clean
================================================================ */
.nav-icon-btn {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: #475569;
transition: all 0.25s ease;
position: relative;
font-size: 1.1rem;
background: transparent;
border: 1.5px solid transparent;
margin-left: 0.15rem;
}
.nav-icon-btn:hover {
color: var(--ms-primary);
background: rgba(37, 99, 235, 0.06);
border-color: rgba(37, 99, 235, 0.12);
}
.cart-count-badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 19px;
height: 19px;
padding: 0 5px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}
/* ================================================================
HERO SECTION - CLEAN & PROFESSIONAL
================================================================ */
.hero-premium {
position: relative;
overflow: hidden;
margin-top: 0;
}
.hero-bg-shapes {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
opacity: 0.05;
}
.hero-bg-shapes .shape {
position: absolute;
border-radius: 50%;
filter: blur(80px);
}
.shape-1 {
width: 400px;
height: 400px;
background: #fff;
top: -100px;
right: -100px;
opacity: 0.1;
}
.shape-2 {
width: 300px;
height: 300px;
background: #fbbf24;
bottom: -50px;
left: -50px;
opacity: 0.08;
}
.shape-3 {
width: 200px;
height: 200px;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.05;
}
/* Removed distracting float animations */
/* Hero Slides */
.hero-slide {
position: relative;
z-index: 1;
padding: 0;
}
/* Desktop/tablet: full viewport-height hero */
.hero-inner-row {
min-height: clamp(560px, calc(100vh - 130px), 900px);
}
/* ── Mobile hero: use ![]()
for full banner, no cropping ───────────────────── */
/* Mobile image link — hidden on desktop */
.hero-mobile-img { display: none; }
@media (max-width: 991.98px) {
/* Show the ![]()
on mobile, hide the bg-image slide */
.hero-mobile-img {
display: block;
line-height: 0; /* kill any inline gap below img */
}
.hero-mobile-img img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.hero-desktop-slide {
display: none !important;
}
.hero-premium {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Hide indicators on mobile */
.hero-indicators { display: none !important; }
/* Hide prev/next arrows on mobile — swipe works */
.hero-control { display: none !important; }
/* Tighten gap below slider */
.trust-strip { padding-top: 1rem; }
}
.hero-gradient-1 {
background: linear-gradient(135deg, #1e3a5f 0%, #0f2439 40%, #0a1628 100%);
color: #fff;
}
.hero-gradient-2 {
background: linear-gradient(135deg, #4a1942 0%, #2d1b3d 40%, #1a1025 100%);
color: #fff;
}
.hero-gradient-3 {
background: linear-gradient(135deg, #7c2d12 0%, #451a03 40%, #1c0a01 100%);
color: #fff;
}
/* Hero Badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
padding: 8px 18px;
border-radius: var(--ms-radius-full);
margin-bottom: 1.25rem;
letter-spacing: 0.5px;
text-transform: uppercase;
animation: fadeInDown 0.6s var(--ms-ease);
}
.hero-badge-danger {
background: rgba(230, 57, 70, 0.2);
border-color: rgba(230, 57, 70, 0.3);
}
.hero-badge-warning {
background: rgba(245, 158, 11, 0.2);
border-color: rgba(245, 158, 11, 0.3);
}
/* Hero Title */
.hero-title {
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.04em;
margin-bottom: 1.25rem;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3), 0 4px 60px rgba(0, 0, 0, 0.15);
word-spacing: 0.05em;
}
.text-gradient-gold {
background: linear-gradient(135deg, #fbbf24, #f59e0b, #fcd34d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
color: rgba(255, 255, 255, 0.85);
font-size: 1.125rem;
font-weight: 400;
max-width: 500px;
line-height: 1.75;
letter-spacing: 0.01em;
}
/* Hero Buttons */
.btn-premium {
background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-dark));
border: none;
color: #fff;
font-weight: 700;
font-size: 0.9375rem;
border-radius: 50px;
padding: 0.875rem 2.25rem;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.4), 0 4px 10px -3px rgba(37, 99, 235, 0.2);
position: relative;
overflow: hidden;
letter-spacing: 0.025em;
text-transform: none;
will-change: transform;
}
.btn-premium::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
opacity: 0;
transition: var(--ms-transition);
}
.btn-premium:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 16px 36px -10px rgba(37, 99, 235, 0.55), 0 8px 18px -5px rgba(37, 99, 235, 0.3);
color: #fff;
}
.btn-premium:hover::before {
opacity: 1;
}
.btn-premium:active {
transform: translateY(-1px);
}
.btn-premium-danger {
background: linear-gradient(135deg, var(--ms-accent), #c1121f);
border: none;
color: #fff;
font-weight: 600;
border-radius: var(--ms-radius-full);
padding: 0.75rem 2rem;
transition: var(--ms-transition);
box-shadow: var(--ms-shadow-danger);
letter-spacing: 0.02em;
}
.btn-premium-danger:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px -8px rgba(230, 57, 70, 0.5);
color: #fff;
}
.btn-premium-gold {
background: linear-gradient(135deg, var(--ms-gold), var(--ms-gold-dark));
border: none;
color: #fff;
font-weight: 700;
border-radius: var(--ms-radius-full);
padding: 0.75rem 2rem;
transition: var(--ms-transition);
box-shadow: var(--ms-shadow-gold);
letter-spacing: 0.02em;
}
.btn-premium-gold:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px -8px rgba(245, 158, 11, 0.5);
color: #fff;
}
.btn-premium-dark {
background: linear-gradient(135deg, #1e293b, #0f172a);
border: none;
color: #fff;
font-weight: 600;
border-radius: var(--ms-radius-full);
padding: 0.75rem 2rem;
transition: var(--ms-transition);
box-shadow: var(--ms-shadow-lg);
letter-spacing: 0.02em;
}
.btn-premium-dark:hover {
transform: translateY(-3px);
box-shadow: var(--ms-shadow-2xl);
color: #fff;
}
.btn-premium-sm {
background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-dark));
border: none;
color: #fff;
font-weight: 600;
border-radius: var(--ms-radius-full);
padding: 0.5rem 1.5rem;
font-size: 0.85rem;
transition: var(--ms-transition);
box-shadow: var(--ms-shadow-sm);
}
.btn-premium-sm:hover {
transform: translateY(-2px);
box-shadow: var(--ms-shadow-primary);
color: #fff;
}
.btn-glass {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
font-weight: 600;
transition: var(--ms-transition);
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.2) !important;
transform: translateY(-3px);
color: #fff !important;
}
.btn-outline-premium {
border: 2px solid var(--ms-primary);
color: var(--ms-primary);
font-weight: 600;
border-radius: var(--ms-radius-full);
padding: 0.5rem 1.5rem;
font-size: 0.88rem;
transition: var(--ms-transition);
background: transparent;
}
.btn-outline-premium:hover {
background: var(--ms-primary);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--ms-shadow-primary);
}
.btn-outline-dark-premium {
border-color: var(--ms-text);
color: var(--ms-text);
}
.btn-outline-dark-premium:hover {
background: var(--ms-text);
color: #fff;
border-color: var(--ms-text);
}
.btn-white {
background: #fff;
color: var(--ms-text);
font-weight: 600;
border: none;
border-radius: var(--ms-radius-full);
padding: 0.5rem 1.5rem;
transition: var(--ms-transition);
box-shadow: var(--ms-shadow-sm);
}
.btn-white:hover {
transform: translateY(-2px);
box-shadow: var(--ms-shadow-md);
color: var(--ms-primary);
}
/* Hero Visuals - Floating Elements */
.hero-visual {
position: relative;
width: 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-circle-lg {
width: 220px;
height: 220px;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.05));
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(255, 255, 255, 0.3);
position: relative;
box-shadow: 0 0 40px rgba(255, 255, 255, 0.05);
}
.hero-circle-lg::before {
content: '';
position: absolute;
inset: -20px;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.hero-circle-lg::after {
content: '';
position: absolute;
inset: -40px;
border: 1px dashed rgba(255, 255, 255, 0.05);
border-radius: 50%;
}
.hero-circle-danger {
background: linear-gradient(135deg, rgba(230, 57, 70, 0.2), rgba(230, 57, 70, 0.05));
}
/* Removed pulse and spin animations */
.floating-icon {
position: absolute;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--ms-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.7);
z-index: 2;
}
.floating-1 {
top: 50px;
left: 60px;
animation: floatIcon 6s ease-in-out infinite;
}
.floating-2 {
top: 40px;
right: 40px;
animation: floatIcon 8s ease-in-out 2s infinite;
}
.floating-3 {
bottom: 60px;
left: 40px;
animation: floatIcon 7s ease-in-out 1s infinite;
}
@keyframes floatIcon {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(5deg);
}
}
/* Hero Carousel Controls */
.hero-indicators button {
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
border: 2px solid rgba(255, 255, 255, 0.5) !important;
background: transparent !important;
opacity: 1 !important;
transition: var(--ms-transition);
margin: 0 4px !important;
}
.hero-indicators button.active {
background: #fff !important;
border-color: #fff !important;
width: 32px !important;
border-radius: var(--ms-radius-full) !important;
}
.hero-control {
width: 50px;
opacity: 0;
transition: var(--ms-transition);
}
.hero-premium:hover .hero-control {
opacity: 1;
}
.hero-control-icon {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
transition: var(--ms-transition);
}
.hero-control-icon:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
}
/* Sale Counter */
.sale-counter {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.sale-number {
font-family: 'Space Grotesk', sans-serif;
font-size: 5rem;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sale-number sup {
font-size: 2.5rem;
}
.sale-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 2.5rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.1em;
}
/* ================================================================
TRUST STRIP - PREMIUM
================================================================ */
.trust-strip {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-top: 1px solid rgba(226, 232, 240, 0.4);
border-bottom: 1px solid rgba(226, 232, 240, 0.4);
position: relative;
z-index: 10;
padding: 2.5rem 0 1.5rem;
}
.trust-item-premium {
display: flex;
align-items: center;
gap: 14px;
padding: 1rem 1.25rem;
background: #fff;
border-radius: 16px;
border: 1px solid rgba(226, 232, 240, 0.6);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
}
.trust-item-premium:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
border-color: transparent;
}
.trust-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
transition: all 0.3s ease;
}
.trust-icon-blue {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.15));
color: #2563eb;
}
.trust-icon-green {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.15));
color: #10b981;
}
.trust-icon-purple {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(167, 139, 250, 0.15));
color: #8b5cf6;
}
.trust-icon-orange {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.15));
color: #f59e0b;
}
.trust-item-premium:hover .trust-icon {
transform: scale(1.08);
}
.trust-content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.trust-title {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.92rem;
color: #0f172a;
line-height: 1.3;
}
.trust-sub {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
color: #94a3b8;
font-weight: 500;
}
@media (max-width: 767.98px) {
.trust-strip {
padding: 1rem 0;
}
.trust-item-premium {
flex-direction: column;
text-align: center;
padding: 1rem 0.75rem;
gap: 10px;
}
.trust-icon {
width: 44px;
height: 44px;
font-size: 1rem;
}
.trust-title {
font-size: 0.82rem;
}
.trust-sub {
font-size: 0.72rem;
}
}
/* ================================================================
SECTIONS - PREMIUM STYLING
================================================================ */
.section-premium {
position: relative;
padding: 5rem 0;
}
.bg-section-alt {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}
/* Section Header - Centered */
.section-header {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.section-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--ms-primary);
background: var(--ms-primary-ultra-light);
padding: 8px 20px;
border-radius: 50px;
margin-bottom: 1rem;
border: 1px solid rgba(37, 99, 235, 0.1);
}
.section-label-primary {
color: var(--ms-primary);
background: var(--ms-primary-ultra-light);
}
.section-label-danger {
color: var(--ms-accent);
background: var(--ms-accent-light);
}
.section-label-gold {
color: var(--ms-gold-dark);
background: var(--ms-gold-light);
}
.section-title-premium {
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -0.035em;
color: var(--ms-text);
line-height: 1.15;
margin-bottom: 0.5rem;
}
.section-desc {
color: var(--ms-text-secondary);
font-size: 1.0625rem;
max-width: 540px;
margin-left: auto;
margin-right: auto;
line-height: 1.65;
letter-spacing: 0.005em;
}
.title-divider {
text-align: center;
margin-top: 1rem;
}
.title-divider span {
display: inline-block;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--ms-primary), var(--ms-primary-light));
border-radius: 2px;
}
/* Section Header - Inline (left-aligned with action) */
.section-header-inline {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 1rem;
}
.section-header-inline .section-label {
display: inline-flex;
}
/* ================================================================
CATEGORY CARDS - PREMIUM
================================================================ */
.category-premium-card {
background: #fff;
border-radius: 22px;
padding: 2.5rem 1.5rem 2rem;
text-align: center;
border: 1px solid rgba(226, 232, 240, 0.5);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
cursor: pointer;
will-change: transform;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}
.category-premium-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 22px 22px 0 0;
transition: height 0.4s ease;
}
.category-premium-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: 22px;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
background: radial-gradient(ellipse at center top, rgba(255, 255, 255, 0.6), transparent 70%);
}
.category-premium-card.from-primary::before {
background: linear-gradient(90deg, #2563eb, #60a5fa);
}
.category-premium-card.from-danger::before {
background: linear-gradient(90deg, #e63946, #ff6b6b);
}
.category-premium-card.from-success::before {
background: linear-gradient(90deg, #10b981, #34d399);
}
.category-premium-card.from-warning::before {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.category-premium-card.from-info::before {
background: linear-gradient(90deg, #06b6d4, #22d3ee);
}
.category-premium-card.from-purple::before {
background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}
.category-premium-card:hover::before {
height: 100%;
opacity: 0.06;
}
.category-premium-card:hover::after {
opacity: 1;
}
.category-premium-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: rgba(255, 255, 255, 0.9);
}
.category-premium-card.from-primary:hover {
box-shadow: 0 20px 40px rgba(37, 99, 235, 0.18), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.category-premium-card.from-danger:hover {
box-shadow: 0 20px 40px rgba(230, 57, 70, 0.18), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.category-premium-card.from-success:hover {
box-shadow: 0 20px 40px rgba(16, 185, 129, 0.18), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.category-premium-card.from-warning:hover {
box-shadow: 0 20px 40px rgba(245, 158, 11, 0.18), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.category-premium-card.from-info:hover {
box-shadow: 0 20px 40px rgba(6, 182, 212, 0.18), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.category-premium-card.from-purple:hover {
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.18), 0 8px 16px rgba(0, 0, 0, 0.06);
}
.cat-icon-wrap {
width: 72px;
height: 72px;
margin: 0 auto 1rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.65rem;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.from-primary .cat-icon-wrap {
color: #2563eb;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.15));
}
.from-danger .cat-icon-wrap {
color: #e63946;
background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), rgba(255, 107, 107, 0.15));
}
.from-success .cat-icon-wrap {
color: #10b981;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(52, 211, 153, 0.15));
}
.from-warning .cat-icon-wrap {
color: #f59e0b;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.15));
}
.from-info .cat-icon-wrap {
color: #06b6d4;
background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(34, 211, 238, 0.15));
}
.from-purple .cat-icon-wrap {
color: #8b5cf6;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(167, 139, 250, 0.15));
}
.category-premium-card:hover .cat-icon-wrap {
transform: scale(1.12) rotate(-5deg);
}
.from-primary:hover .cat-icon-wrap {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(96, 165, 250, 0.25));
}
.from-danger:hover .cat-icon-wrap {
background: linear-gradient(135deg, rgba(230, 57, 70, 0.15), rgba(255, 107, 107, 0.25));
}
.from-success:hover .cat-icon-wrap {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.25));
}
.from-warning:hover .cat-icon-wrap {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.25));
}
.from-info:hover .cat-icon-wrap {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(34, 211, 238, 0.25));
}
.from-purple:hover .cat-icon-wrap {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(167, 139, 250, 0.25));
}
.cat-name {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.9rem;
color: var(--ms-text);
margin-bottom: 0.5rem;
transition: var(--ms-transition);
}
.category-premium-card:hover .cat-name {
color: #0f172a;
}
.cat-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ms-bg-alt);
font-size: 0.75rem;
color: var(--ms-text-muted);
opacity: 0;
transform: translateY(10px);
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.category-premium-card:hover .cat-arrow {
opacity: 1;
transform: translateY(0);
}
.from-primary:hover .cat-arrow {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
}
.from-danger:hover .cat-arrow {
background: rgba(230, 57, 70, 0.1);
color: #e63946;
}
.from-success:hover .cat-arrow {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}
.from-warning:hover .cat-arrow {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
}
.from-info:hover .cat-arrow {
background: rgba(6, 182, 212, 0.1);
color: #06b6d4;
}
.from-purple:hover .cat-arrow {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
}
/* ================================================================
CATEGORIES - CLASSIC DESIGN
================================================================ */
.categories-classic {
padding: 4rem 0;
background: #f8fafc;
}
.cat-section-header {
margin-bottom: 3rem;
position: relative;
}
.cat-section-title {
font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
font-size: 2.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.cat-divider {
width: 60px;
height: 4px;
background: #2563eb;
margin: 0 auto 1rem;
border-radius: 2px;
}
.cat-section-desc {
color: #64748b;
font-size: 1.05rem;
max-width: 600px;
margin: 0 auto;
}
/* Classic Cards */
/* Classic Cards - Colored Bottom Border */
.cat-classic-card {
background: #e0f2fe;
/* Light blue base for all */
border-radius: 20px;
padding: 2.5rem 1.5rem;
text-align: center;
border: 1px solid #bfdbfe;
border-bottom-width: 6px;
border-bottom-style: solid;
height: 100%;
cursor: pointer;
/* No hover transform/shadow effects as requested */
}
.cat-classic-icon {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin: 0 auto 1.25rem;
}
.cat-classic-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: #1e293b;
margin: 0;
}
/* Color Variants */
.cat-classic-card.from-primary {
border-bottom-color: #2563eb;
}
.cat-classic-card.from-primary .cat-classic-icon {
background: rgba(37, 99, 235, 0.15);
color: #2563eb;
}
.cat-classic-card.from-danger {
border-bottom-color: #dc2626;
}
.cat-classic-card.from-danger .cat-classic-icon {
background: rgba(220, 38, 38, 0.15);
color: #dc2626;
}
.cat-classic-card.from-success {
border-bottom-color: #16a34a;
}
.cat-classic-card.from-success .cat-classic-icon {
background: rgba(22, 163, 74, 0.15);
color: #16a34a;
}
.cat-classic-card.from-warning {
border-bottom-color: #d97706;
}
.cat-classic-card.from-warning .cat-classic-icon {
background: rgba(217, 119, 6, 0.15);
color: #d97706;
}
.cat-classic-card.from-info {
border-bottom-color: #0891b2;
}
.cat-classic-card.from-info .cat-classic-icon {
background: rgba(8, 145, 178, 0.15);
color: #0891b2;
}
.cat-classic-card.from-purple {
border-bottom-color: #7c3aed;
}
.cat-classic-card.from-purple .cat-classic-icon {
background: rgba(124, 58, 237, 0.15);
color: #7c3aed;
}
/* Hover effects removed as requested */
@media (max-width: 767.98px) {
.categories-classic {
padding: 3rem 0;
}
.cat-section-title {
font-size: 1.75rem;
}
.cat-classic-card {
padding: 1.5rem 1rem;
}
.cat-classic-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
}
/* ================================================================
PRODUCT CARD - PREMIUM
================================================================ */
.product-card {
border: 1px solid rgba(226, 232, 240, 0.8) !important;
border-radius: 18px !important;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
position: relative;
will-change: transform;
}
.product-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--ms-primary), var(--ms-primary-light));
transform: scaleX(0);
transition: transform 0.35s var(--ms-ease);
z-index: 2;
}
.product-card:hover {
transform: translateY(-10px) scale(1.01);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -5px rgba(0, 0, 0, 0.08);
border-color: rgba(37, 99, 235, 0.15) !important;
}
.product-card:hover::after {
transform: scaleX(1);
}
/* Product Image Container */
.product-img-wrap {
background: linear-gradient(135deg, #f0f4ff 0%, #e8edf8 100%);
position: relative;
overflow: hidden;
}
.product-card .product-img,
.product-card .card-img-top {
height: 240px;
object-fit: cover;
transition: transform 0.4s ease;
width: 100%;
background: linear-gradient(135deg, #f0f4ff 0%, #e8edf8 100%);
}
.product-card:hover .product-img,
.product-card:hover .card-img-top {
transform: scale(1.05);
}
.product-card .card-body {
padding: 1rem 1rem 1.25rem !important;
}
.product-card .product-title,
.product-card .card-title {
font-weight: 600;
font-size: 0.88rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
min-height: 2.5em;
color: var(--ms-text);
transition: var(--ms-transition);
}
.product-card:hover .product-title,
.product-card:hover .card-title {
color: var(--ms-primary);
}
.product-card .badge {
font-weight: 700;
font-size: 0.6875rem;
letter-spacing: 0.5px;
border-radius: 6px;
padding: 6px 12px;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4px);
}
/* Add to Cart Button in Product Card */
.product-card .btn-primary,
.product-card .btn-add-cart {
background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-dark));
border: none;
border-radius: var(--ms-radius-sm);
font-weight: 600;
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
transition: var(--ms-transition);
letter-spacing: 0.02em;
}
.product-card .btn-primary:hover,
.product-card .btn-add-cart:hover {
transform: translateY(-2px);
box-shadow: var(--ms-shadow-primary);
}
/* Quick View Overlay on Hover */
.product-card:hover .product-overlay {
opacity: 1 !important;
}
/* Wishlist Form Button in Product Card */
.product-card .ajax-wishlist-form button {
transition: all 0.3s ease;
}
.product-card .ajax-wishlist-form button:hover {
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3) !important;
}
.product-card .ajax-wishlist-form button.wishlisted {
background: #e11d48 !important;
}
.product-card .ajax-wishlist-form button.wishlisted i {
color: #fff !important;
}
/* ================================================================
PROMOTIONAL BANNERS - PREMIUM
================================================================ */
.promo-premium {
border-radius: 24px;
padding: 3rem 2.5rem;
position: relative;
overflow: hidden;
color: #fff;
min-height: 240px;
display: flex;
align-items: center;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2);
}
.promo-premium:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3), 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}
.promo-gradient-1 {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
}
.promo-gradient-2 {
background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
}
.promo-content {
position: relative;
z-index: 2;
}
.promo-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
padding: 5px 14px;
border-radius: var(--ms-radius-full);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.promo-badge-gold {
background: rgba(245, 158, 11, 0.3);
}
.promo-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 800;
font-size: 2rem;
letter-spacing: -0.025em;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.promo-text {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 1rem;
max-width: 280px;
}
.promo-icon-bg {
position: absolute;
right: -10px;
bottom: -10px;
font-size: 8rem;
color: rgba(255, 255, 255, 0.08);
z-index: 1;
transform: rotate(-10deg);
transition: var(--ms-transition-slow);
}
.promo-premium:hover .promo-icon-bg {
transform: rotate(-5deg) scale(1.1);
color: rgba(255, 255, 255, 0.12);
}
/* ================================================================
WHY CHOOSE US - PREMIUM CARDS
================================================================ */
.why-choose-premium {
background: linear-gradient(180deg, #fff 0%, var(--ms-bg-subtle) 100%);
}
.why-card {
text-align: center;
padding: 2.5rem 1.5rem;
background: #064e3b;
/* Dark Green */
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
height: 100%;
position: relative;
overflow: hidden;
}
.why-card:hover {
transform: translateY(-10px);
box-shadow: 0 24px 48px -12px rgba(6, 78, 59, 0.25), 0 12px 24px -6px rgba(6, 78, 59, 0.2);
border-color: rgba(255, 255, 255, 0.2);
}
.why-icon-wrap {
width: 72px;
height: 72px;
border-radius: var(--ms-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 1.25rem;
transition: var(--ms-transition);
}
.why-icon-blue {
background: rgba(255, 255, 255, 0.1);
color: #60a5fa;
}
.why-icon-green {
background: rgba(255, 255, 255, 0.1);
color: #34d399;
}
.why-icon-cyan {
background: rgba(255, 255, 255, 0.1);
color: #22d3ee;
}
.why-icon-amber {
background: rgba(255, 255, 255, 0.1);
color: #fbbf24;
}
.why-card:hover .why-icon-wrap {
transform: scale(1.1) rotate(-5deg);
}
.why-card:hover .why-icon-blue {
background: #3b82f6;
color: #fff;
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
}
.why-card:hover .why-icon-green {
background: #10b981;
color: #fff;
box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}
.why-card:hover .why-icon-cyan {
background: #06b6d4;
color: #fff;
box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.4);
}
.why-card:hover .why-icon-amber {
background: #f59e0b;
color: #fff;
box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4);
}
.why-title {
font-weight: 700;
font-size: 1rem;
color: #ffffff;
margin-bottom: 0.5rem;
}
.why-text {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
line-height: 1.6;
}
/* ================================================================
NEWSLETTER - PREMIUM
================================================================ */
.newsletter-premium {
background: linear-gradient(135deg, var(--ms-bg-subtle) 0%, #fff 100%);
}
.newsletter-inner {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 28px;
padding: 3.5rem 3rem;
position: relative;
overflow: hidden;
color: #fff;
box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}
.newsletter-inner::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(37, 99, 235, 0.1);
border-radius: 50%;
top: -100px;
right: -50px;
filter: blur(40px);
}
.newsletter-inner::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: rgba(245, 158, 11, 0.1);
border-radius: 50%;
bottom: -80px;
left: -30px;
filter: blur(40px);
}
.newsletter-icon-wrap {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-light));
border-radius: var(--ms-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #fff;
margin-bottom: 1rem;
box-shadow: var(--ms-shadow-primary);
}
.newsletter-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 800;
font-size: 2rem;
letter-spacing: -0.025em;
margin-bottom: 0.75rem;
line-height: 1.1;
}
.newsletter-text {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0;
}
.newsletter-form .input-group {
background: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(255, 255, 255, 0.12);
border-radius: 50px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.newsletter-form .input-group:focus-within {
border-color: rgba(37, 99, 235, 0.6);
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2),
0 0 0 4px rgba(37, 99, 235, 0.1);
}
/* ================================================================
TOP BAR - CLASSIC
================================================================ */
.top-bar-premium {
background: #1e293b;
padding: 10px 0;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
color: #f1f5f9;
border-bottom: 1px solid #334155;
}
.top-bar-premium a {
color: #f1f5f9;
text-decoration: none;
transition: color 0.2s ease;
}
.top-bar-premium a:hover {
color: #60a5fa;
}
.top-divider {
color: #475569;
margin: 0 10px;
}
/* ================================================================
NAVBAR - CLASSIC
================================================================ */
.navbar-premium {
padding: 1rem 0;
transition: none;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.navbar-brand {
padding: 0;
}
.brand-logo {
transition: none;
}
.brand-name {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 1.5rem;
color: #0f172a;
letter-spacing: -0.02em;
}
.brand-name-accent {
color: #2563eb;
}
.nav-link-premium {
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 500;
color: #334155;
padding: 0.5rem 1rem !important;
transition: color 0.2s ease;
}
.nav-link-premium:hover,
.nav-link-premium.active {
color: #2563eb;
}
.navbar-actions .nav-icon-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #334155;
font-size: 1.1rem;
transition: color 0.2s ease;
}
.navbar-actions .nav-icon-btn:hover {
color: #2563eb;
}
.cart-count-badge {
position: absolute;
top: -2px;
right: -2px;
background: #ef4444;
color: white;
font-size: 0.65rem;
font-weight: 700;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.newsletter-form .input-group-text {
background: transparent;
color: rgba(255, 255, 255, 0.5);
padding-left: 1.25rem;
}
.newsletter-form .form-control {
background: transparent !important;
color: #fff;
font-size: 0.9rem;
}
.newsletter-form .form-control::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.newsletter-form .btn-premium {
border-radius: var(--ms-radius-full) !important;
margin: 4px;
}
/* ================================================================
FOOTER - PREMIUM DARK
================================================================ */
.footer-premium {
background: linear-gradient(180deg, #0d1424 0%, #020617 100%);
color: rgba(255, 255, 255, 0.7);
position: relative;
box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
}
.footer-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.5), transparent);
}
/* Newsletter strip */
.footer-newsletter-strip {
background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 22px 0;
}
.footer-nl-input {
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
color: #fff !important;
border-radius: 6px !important;
font-size: 0.875rem;
}
.footer-nl-input::placeholder { color: rgba(255,255,255,0.38); }
.footer-nl-input:focus {
background: rgba(255,255,255,0.11) !important;
box-shadow: 0 0 0 3px rgba(37,99,235,0.2) !important;
border-color: var(--ms-primary) !important;
}
.footer-brand-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-dark));
border-radius: var(--ms-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
}
.footer-logo-img {
height: 40px;
width: auto;
object-fit: contain;
border-radius: 6px;
}
.footer-tagline {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--ms-primary);
}
.footer-desc {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
line-height: 1.75;
max-width: 340px;
}
.footer-heading {
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 1.8px;
color: #fff;
margin-bottom: 1.25rem;
position: relative;
padding-bottom: 0.75rem;
}
.footer-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 28px;
height: 2px;
background: var(--ms-primary);
border-radius: 2px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.55rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
transition: var(--ms-transition-fast);
display: inline-flex;
align-items: center;
gap: 0;
}
.footer-links a:hover {
color: #fff;
transform: translateX(4px);
}
.footer-links a::before {
content: '';
width: 0;
height: 1px;
background: var(--ms-primary);
margin-right: 0;
transition: var(--ms-transition);
flex-shrink: 0;
}
.footer-links a:hover::before {
width: 10px;
margin-right: 6px;
}
/* Social Links */
.social-link {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.65);
font-size: 0.88rem;
transition: var(--ms-transition);
text-decoration: none;
}
.social-link:hover { transform: translateY(-3px); color: #fff; }
.social-facebook:hover { background: #1877f2; border-color: #1877f2; box-shadow: 0 4px 14px rgba(24,119,242,0.4); }
.social-instagram:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #e6683c; box-shadow: 0 4px 14px rgba(220,39,67,0.35); }
.social-twitter:hover { background: #000; border-color: #000; box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.social-youtube:hover { background: #ff0000; border-color: #ff0000; box-shadow: 0 4px 14px rgba(255,0,0,0.4); }
/* Trust badges */
.footer-trust {
margin-top: 0.25rem;
}
.footer-trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: rgba(255,255,255,0.4);
}
.footer-trust-item i {
color: var(--ms-primary);
font-size: 0.85rem;
}
/* Contact info block */
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-contact-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
color: rgba(255,255,255,0.5);
line-height: 1.5;
}
.footer-contact-icon {
width: 26px;
height: 26px;
background: rgba(37,99,235,0.15);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #6ea8fe;
font-size: 0.72rem;
flex-shrink: 0;
}
/* Footer Newsletter */
.footer-newsletter {
border-radius: var(--ms-radius-full);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-newsletter .form-control {
background: rgba(255, 255, 255, 0.05);
border: none;
color: #fff;
font-size: 0.85rem;
padding: 0.6rem 1rem;
}
.footer-newsletter .form-control::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.footer-newsletter .form-control:focus {
background: rgba(255, 255, 255, 0.1);
box-shadow: none;
}
.footer-newsletter .btn-premium {
padding: 0.6rem 1.25rem;
border-radius: 0 var(--ms-radius-full) var(--ms-radius-full) 0 !important;
}
.payment-icons {
color: rgba(255, 255, 255, 0.35);
}
.payment-icons i {
transition: var(--ms-transition-fast);
}
.payment-icons i:hover {
color: rgba(255, 255, 255, 0.8);
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-bottom span,
.footer-bottom a {
color: rgba(255, 255, 255, 0.4);
font-size: 0.82rem;
}
.footer-bottom a:hover {
color: rgba(255, 255, 255, 0.8);
}
/* ================================================================
WHATSAPP FLOAT BUTTON - Standard
================================================================ */
.whatsapp-float {
position: fixed;
bottom: 28px;
right: 28px;
width: 60px;
height: 60px;
background: #25d366;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
z-index: 1050;
transition: transform 0.3s ease;
cursor: pointer;
}
.whatsapp-float:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5);
color: #fff;
}
/* Removed pulse animation */
/* ================================================================
STAR RATING (Review Form)
================================================================ */
.star-rating {
display: inline-flex;
flex-direction: row-reverse;
gap: 2px;
}
.star-rating input {
display: none;
}
.star-rating label {
cursor: pointer;
font-size: 1.5rem;
color: #ddd;
transition: color 0.15s;
}
.star-rating input:checked~label,
.star-rating label:hover,
.star-rating label:hover~label {
color: var(--ms-gold);
}
/* ================================================================
BREADCRUMB
================================================================ */
.breadcrumb-item+.breadcrumb-item::before {
content: "\f054";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0.6rem;
color: var(--ms-text-muted);
vertical-align: middle;
}
.breadcrumb-item a {
color: var(--ms-text-secondary);
font-weight: 500;
}
.breadcrumb-item a:hover {
color: var(--ms-primary);
}
.breadcrumb-item.active {
color: var(--ms-text-muted);
}
/* ================================================================
FLASH ALERTS
================================================================ */
.alert {
border-radius: var(--ms-radius-md) !important;
font-size: 0.9rem;
font-weight: 500;
}
/* ================================================================
GENERAL BUTTON ENHANCEMENTS
================================================================ */
.btn-primary {
background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-dark));
border: none;
font-weight: 600;
border-radius: var(--ms-radius-sm);
transition: var(--ms-transition);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--ms-shadow-primary);
background: linear-gradient(135deg, var(--ms-primary-dark), #1e3a8a);
}
.btn-outline-primary {
font-weight: 600;
border-width: 2px;
transition: var(--ms-transition);
border-radius: var(--ms-radius-sm);
}
.btn-outline-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.btn-danger {
transition: var(--ms-transition);
font-weight: 600;
border-radius: var(--ms-radius-sm);
}
.btn-danger:hover {
transform: translateY(-2px);
box-shadow: var(--ms-shadow-danger);
}
.btn-sm {
border-radius: var(--ms-radius-sm) !important;
}
/* ================================================================
CART & CHECKOUT STYLES
================================================================ */
.input-group .form-control[type="number"]::-webkit-inner-spin-button,
.input-group .form-control[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ================================================================
PRODUCT PAGE - THUMBNAILS
================================================================ */
.thumbnail-img {
transition: var(--ms-transition-fast);
cursor: pointer;
border-radius: var(--ms-radius-sm);
border: 2px solid transparent;
}
.thumbnail-img:hover,
.thumbnail-img.active {
border-color: var(--ms-primary) !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* ================================================================
CARD GENERICS
================================================================ */
.card {
border-radius: var(--ms-radius-md);
border-color: var(--ms-border);
transition: var(--ms-transition);
}
.card:hover {
box-shadow: var(--ms-shadow-md);
}
/* ================================================================
LOADING STATE
================================================================ */
.loading {
pointer-events: none;
opacity: 0.65;
}
/* ================================================================
ANIMATIONS
================================================================ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ================================================================
PRINT STYLES
================================================================ */
@media print {
.no-print {
display: none !important;
}
.navbar-premium,
.footer-premium,
.top-bar-premium,
.whatsapp-float {
display: none !important;
}
}
/* ================================================================
GLOBAL RESPONSIVE FOUNDATION
================================================================ */
html,
body {
overflow-x: hidden;
max-width: 100vw;
}
img {
max-width: 100%;
height: auto;
}
/* ================================================================
RESPONSIVE - TABLET (Up to 991px)
================================================================ */
@media (max-width: 991.98px) {
.hero-title {
font-size: 2.5rem !important;
}
.sale-number {
font-size: 4rem;
}
.search-premium {
max-width: 100%;
margin-top: 1rem;
}
.section-header-inline {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
/* Product Detail - Tablet */
.product-image-zoom {
height: 380px !important;
}
.main-image {
min-height: 380px !important;
}
.sticky-cart {
position: relative !important;
top: auto !important;
}
/* Product Listing - Filter sidebar becomes full width on tablet */
.mobile-filter-toggle {
display: inline-flex !important;
}
.filter-sidebar-collapse {
display: none;
}
.filter-sidebar-collapse.show {
display: block;
}
/* Cart page - compact cells */
.table td,
.table th {
font-size: 0.875rem;
padding: 0.5rem;
}
}
/* ================================================================
RESPONSIVE - TABLET ONLY (768px to 991px)
================================================================ */
@media (max-width: 991.98px) and (min-width: 768px) {
.section-premium {
padding: 4rem 0;
}
.category-premium-card {
padding: 1.75rem 1rem;
}
.row.g-4 {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
/* Product Detail - Tablet */
.product-gallery .thumbnail-img {
width: 75px !important;
height: 75px !important;
}
/* Product Tabs - Tablet */
#productTabs .nav-link {
padding: 0.65rem 1rem !important;
font-size: 0.85rem;
}
/* Reviews layout on tablet */
.reviews-list .border-bottom .d-flex {
flex-direction: column;
gap: 0.5rem;
}
}
/* ================================================================
RESPONSIVE - MOBILE (Up to 767px)
================================================================ */
@media (max-width: 767.98px) {
/* --- Hero Section --- */
.hero-slide .row {
min-height: 520px !important;
padding: 2rem 1rem;
}
.hero-title {
font-size: 2rem !important;
line-height: 1.25;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.hero-badge {
font-size: 0.7rem;
padding: 6px 14px;
}
/* Hero carousel controls - larger touch targets */
.hero-control {
width: 40px;
}
.hero-control-icon {
width: 36px;
height: 36px;
font-size: 0.9rem;
}
.hero-indicators button {
width: 10px;
height: 10px;
}
/* --- Section Headers --- */
.section-title-premium {
font-size: 1.5rem;
line-height: 1.3;
}
.section-desc {
font-size: 0.88rem;
}
.section-premium {
padding: 3rem 0;
}
.section-header-inline .btn {
align-self: flex-start;
}
/* --- Promotional Banners --- */
.promo-premium {
padding: 1.75rem;
min-height: auto;
}
.promo-title {
font-size: 1.35rem;
}
.promo-icon-bg {
font-size: 5rem;
opacity: 0.08;
}
/* --- Newsletter --- */
.newsletter-inner {
padding: 2rem 1.5rem;
}
.newsletter-title {
font-size: 1.35rem;
}
/* --- Why Choose Us Cards --- */
.why-card {
padding: 1.5rem 1rem;
}
.why-icon-wrap {
width: 56px;
height: 56px;
font-size: 1.25rem;
}
.why-title {
font-size: 0.9rem;
font-weight: 700;
}
.why-text {
font-size: 0.8rem;
line-height: 1.5;
}
/* --- Product Cards --- */
.product-card .product-img,
.product-card .card-img-top {
height: 180px;
}
.product-card {
margin-bottom: 1rem;
}
/* --- Category Cards --- */
.category-premium-card {
padding: 1.5rem 0.75rem;
}
.cat-icon-wrap {
width: 52px;
height: 52px;
font-size: 1.25rem;
}
.cat-name {
font-size: 0.78rem;
font-weight: 700;
}
/* --- Grid Gaps --- */
.row.g-4 {
--bs-gutter-x: 1.25rem;
--bs-gutter-y: 1.25rem;
}
/* --- Buttons --- */
.btn {
font-size: 0.9rem;
}
.btn-premium {
padding: 0.75rem 1.75rem;
}
/* --- Product Detail Page --- */
.product-image-zoom {
height: 300px !important;
}
.main-image {
min-height: 280px !important;
}
.product-image-zoom:hover img {
transform: none;
/* disable zoom on touch */
}
.product-gallery .thumbnail-img {
width: 65px !important;
height: 65px !important;
}
.sticky-cart {
position: relative !important;
top: auto !important;
}
/* Product Tabs */
#productTabs {
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#productTabs::-webkit-scrollbar {
display: none;
}
#productTabs .nav-item {
flex-shrink: 0;
}
#productTabs .nav-link {
padding: 0.6rem 0.85rem !important;
font-size: 0.82rem;
white-space: nowrap;
}
/* Reviews - Stack layout */
.reviews-list .col-md-3,
.reviews-list .col-md-9 {
border: none !important;
}
/* Product Detail Price */
.product-detail-price .fs-2 {
font-size: 1.5rem !important;
}
/* --- Products Listing Page --- */
.sort-bar-wrapper {
flex-direction: column;
align-items: flex-start !important;
gap: 0.5rem;
}
.sort-bar-wrapper .d-flex {
width: 100%;
}
.sort-bar-wrapper select {
width: 100% !important;
}
/* --- Cart Page --- */
.cart-table th:nth-child(2),
.cart-table td:nth-child(2) {
max-width: 120px;
}
.cart-table .input-group {
width: 100px !important;
}
.cart-table img {
width: 60px !important;
height: 60px !important;
}
/* --- Checkout Page --- */
.checkout-form .card-body {
padding: 1rem !important;
}
.checkout-form .form-check.border {
padding: 0.75rem !important;
}
/* --- Footer --- */
.footer-premium .row>[class*="col-"] {
margin-bottom: 1.5rem;
}
.footer-brand {
margin-bottom: 1rem;
}
.footer-heading {
margin-top: 0.5rem;
}
.footer-bottom .row {
text-align: center;
}
.footer-bottom .col-md-6 {
text-align: center !important;
}
/* --- Trust Strip --- */
.trust-item-premium {
flex-direction: column;
text-align: center;
gap: 0.25rem;
}
.trust-icon {
margin-bottom: 0.25rem;
}
.trust-content {
text-align: center;
}
.trust-title {
font-size: 0.78rem;
}
.trust-sub {
font-size: 0.68rem;
}
/* --- Brand Name --- */
.brand-name {
font-size: 1.2rem !important;
}
.brand-logo {
height: 36px !important;
}
}
/* ================================================================
RESPONSIVE - SMALL MOBILE (Up to 575px)
================================================================ */
@media (max-width: 575.98px) {
/* --- Hero Ultra-Compact --- */
.hero-slide .row {
min-height: 440px !important;
padding: 1.5rem 0.75rem;
}
.hero-title {
font-size: 1.65rem !important;
line-height: 1.2;
margin-bottom: 0.75rem;
}
.hero-subtitle {
font-size: 0.85rem;
line-height: 1.4;
}
.hero-cta .btn {
padding: 0.6rem 1.5rem !important;
font-size: 0.85rem;
width: 100%;
justify-content: center;
}
.hero-cta {
flex-direction: column;
}
/* Sale Number Compact */
.sale-number {
font-size: 3.5rem;
line-height: 1;
}
.sale-label {
font-size: 1.75rem;
}
/* --- Section Spacing --- */
.section-premium {
padding: 2.5rem 0;
}
.section-title-premium {
font-size: 1.35rem;
line-height: 1.3;
margin-bottom: 0.75rem;
}
.section-desc {
font-size: 0.82rem;
}
/* --- Product Cards Ultra-Compact --- */
.product-card .product-img,
.product-card .card-img-top {
height: 160px;
}
.product-card .card-body {
padding: 0.75rem 0.75rem 1rem !important;
}
.product-card .product-title,
.product-card .card-title {
font-size: 0.8rem;
line-height: 1.3;
margin-bottom: 0.4rem;
}
.product-card .product-price {
font-size: 1.05rem;
}
.product-card .btn {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
/* --- WhatsApp Float --- */
.whatsapp-float {
width: 48px;
height: 48px;
font-size: 1.4rem;
bottom: 16px;
right: 16px;
}
/* --- Footer Compact --- */
.footer-premium {
font-size: 0.85rem;
padding: 2.5rem 0 1.5rem;
}
.footer-premium h5,
.footer-heading {
font-size: 1rem;
}
.footer-links li a {
padding: 0.35rem 0;
display: inline-block;
}
.social-links {
justify-content: center;
}
/* --- Trust Strip Compact --- */
.trust-item {
font-size: 0.78rem;
padding: 0.5rem 0;
}
.trust-icon {
font-size: 1.15rem;
}
/* --- Category Cards Compact --- */
.category-premium-card {
padding: 1.25rem 0.5rem;
}
.cat-icon-wrap {
width: 48px;
height: 48px;
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
.cat-name {
font-size: 0.75rem;
}
/* Classic Category Cards Compact */
.cat-classic-card {
padding: 1rem 0.5rem;
}
.cat-classic-icon {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.cat-classic-name {
font-size: 0.72rem;
}
/* --- Grid Ultra-Compact --- */
.row.g-4 {
--bs-gutter-x: 1rem;
--bs-gutter-y: 1rem;
}
.row.g-3 {
--bs-gutter-x: 0.75rem;
--bs-gutter-y: 0.75rem;
}
/* --- Newsletter Compact --- */
.newsletter-inner {
padding: 1.75rem 1.25rem;
}
.newsletter-title {
font-size: 1.2rem;
}
.newsletter-form .form-control {
font-size: 0.85rem;
padding: 0.65rem 1rem;
}
/* --- Promo Banner Compact --- */
.promo-premium {
padding: 1.5rem 1.25rem;
}
.promo-title {
font-size: 1.2rem;
line-height: 1.3;
}
.promo-desc {
font-size: 0.8rem;
}
.promo-text {
font-size: 0.82rem;
}
/* --- Why Choose Us Compact --- */
.why-card {
padding: 1.25rem 0.75rem;
}
.why-icon-wrap {
width: 50px;
height: 50px;
font-size: 1.15rem;
}
.why-title {
font-size: 0.85rem;
}
.why-text {
font-size: 0.75rem;
}
/* --- Navbar Adjustments --- */
.navbar-premium .navbar-brand {
font-size: 1.1rem;
}
.brand-name {
font-size: 1.05rem !important;
}
.brand-logo {
height: 32px !important;
}
.navbar-nav-icons .nav-link {
padding: 0.4rem;
font-size: 1.1rem;
}
/* --- Button Compact --- */
.btn-premium {
padding: 0.65rem 1.5rem;
font-size: 0.85rem;
}
/* --- Badge Compact --- */
.badge {
font-size: 0.7rem;
padding: 0.3em 0.6em;
}
/* --- Product Detail Page - Small Mobile --- */
.product-image-zoom {
height: 250px !important;
}
.main-image {
min-height: 250px !important;
}
.product-gallery .thumbnail-img {
width: 55px !important;
height: 55px !important;
}
/* Product title on detail page */
.fs-2 {
font-size: 1.35rem !important;
}
/* Product Highlights grid (detail page) */
.product-highlights .col-6 {
flex: 0 0 100%;
max-width: 100%;
}
/* Cart table compact */
.cart-table .input-group {
width: 90px !important;
}
.cart-table td {
padding: 0.4rem !important;
font-size: 0.8rem;
}
.cart-table th {
padding: 0.4rem !important;
font-size: 0.75rem;
}
/* Checkout compact */
.checkout-form .col-md-4,
.checkout-form .col-md-6 {
margin-bottom: 0.5rem;
}
/* Container padding adjustment */
.container {
padding-left: 1rem;
padding-right: 1rem;
}
/* Page title */
h3.fw-bold,
h4.fw-bold {
font-size: 1.2rem;
}
/* Breadcrumb compact */
.breadcrumb {
font-size: 0.8rem;
}
/* Product detail action buttons */
.d-grid .btn-lg {
padding: 0.75rem 1.25rem !important;
font-size: 0.9rem;
}
/* Share buttons compact */
.btn-sm {
padding: 0.35rem 0.5rem;
font-size: 0.78rem;
}
/* Variant buttons compact */
.variant-btn {
padding: 0.5rem 1rem !important;
font-size: 0.85rem;
}
/* Order summary card */
.card-body h5 {
font-size: 1rem;
}
.card-body h6 {
font-size: 0.9rem;
}
/* Profile page */
.profile-card .card-body {
padding: 1rem !important;
}
}
/* Old class compatibility */
.top-bar {
display: none;
}
.section-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 800;
letter-spacing: -0.02em;
}
.min-vh-50 {
min-height: 50vh;
}
/* ================================================================
PRODUCTION-LEVEL ENHANCEMENTS
================================================================ */
/* Enhanced Focus States for Accessibility */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.4);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}
.product-card:focus-within {
transform: translateY(-10px) scale(1.01);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -5px rgba(0, 0, 0, 0.08);
border-color: rgba(37, 99, 235, 0.3) !important;
}
/* Perfect Badge Designs */
.badge {
font-weight: 700;
padding: 0.4em 0.75em;
border-radius: 8px;
font-size: 0.75rem;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.badge.bg-danger {
background: linear-gradient(135deg, #e63946 0%, #d62828 100%) !important;
box-shadow: 0 3px 10px rgba(230, 57, 70, 0.3);
}
.badge.bg-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}
.badge.bg-primary {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}
.badge.bg-warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
color: #fff !important;
}
/* Perfect Spacing System */
.py-5 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.py-4 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.my-5 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
/* Enhanced Image Loading */
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
img[loading="lazy"] {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Skeleton Loading States */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 8px;
}
.skeleton-text {
height: 1em;
margin-bottom: 0.5em;
border-radius: 4px;
}
.skeleton-card {
height: 300px;
border-radius: 16px;
}
/* Perfect Grid Gaps */
.row.g-4 {
--bs-gutter-x: 1.75rem;
--bs-gutter-y: 1.75rem;
}
/* Enhanced Hover Transform Performance */
.product-card,
.category-premium-card,
.why-card,
.promo-premium {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
/* Smooth Scroll Padding for Fixed Header */
html {
scroll-padding-top: 100px;
}
/* Better Text Selection */
::selection {
background: rgba(37, 99, 235, 0.2);
color: var(--ms-text);
}
::-moz-selection {
background: rgba(37, 99, 235, 0.2);
color: var(--ms-text);
}
/* Enhanced Dropdown Animations */
.dropdown-menu {
animation: dropdownSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dropdownSlideIn {
from {
opacity: 0;
transform: translateY(-15px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Perfect Input States */
.form-control:focus {
border-color: var(--ms-primary-light);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), 0 2px 8px rgba(37, 99, 235, 0.1);
}
.form-control {
border-radius: 10px;
border: 2px solid var(--ms-border);
padding: 0.65rem 1rem;
transition: all 0.2s ease;
font-size: 0.9375rem;
}
/* Enhanced Button States */
.btn {
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 10px;
position: relative;
}
.btn:active {
transform: translateY(1px) scale(0.98);
}
.btn-primary {
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
/* Perfect Card Spacing */
.card-body {
padding: 1.5rem;
}
/* Enhanced Link Hover */
a {
position: relative;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Production-Level Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #94a3b8, #64748b);
border-radius: 5px;
border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #64748b, #475569);
}
/* Page Transition */
body {
animation: pageIn 0.4s ease-out;
}
@keyframes pageIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Perfect Icon Alignment */
.btn i,
.badge i {
vertical-align: middle;
line-height: 1;
}
/* Enhanced Navbar Dropdown */
.navbar .dropdown-menu {
margin-top: 0.5rem;
border: none;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Perfect Container Max-Width */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
/* Production-Level Performance Optimizations */
* {
-webkit-tap-highlight-color: transparent;
}
button,
a,
.btn {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Enhanced Mobile Touch Targets */
@media (max-width: 767.98px) {
.btn,
a.nav-link,
.dropdown-item {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
/* Perfect Print Styles */
@media print {
* {
box-shadow: none !important;
text-shadow: none !important;
}
.product-card,
.category-premium-card {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.hero-title,
.section-title-premium {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
}
/* Perfect Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Enhanced Dark Mode Support (Future-Proofing) */
@media (prefers-color-scheme: dark) {
/* Will be activated when dark mode is implemented */
}
/* ================================================================
PRODUCTS LISTING PAGE (PLP) — PREMIUM
================================================================ */
/* Hero Banner */
.plp-hero {
background: linear-gradient(135deg, #1e3a5f 0%, #0f2439 60%, #0a1628 100%);
color: #fff;
padding: 2.5rem 0 2rem;
margin-bottom: 0;
}
.plp-breadcrumb { --bs-breadcrumb-divider: '›'; }
.plp-breadcrumb .breadcrumb-item,
.plp-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.65); font-size: 0.82rem; text-decoration: none; }
.plp-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,0.9); }
.plp-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }
.plp-hero-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 2rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
}
.plp-hero-sub { color: rgba(255,255,255,0.7); font-size: 0.9rem; }
.plp-count-badge {
display: inline-block;
background: rgba(255,255,255,0.18);
color: #fff;
font-weight: 700;
padding: 1px 10px;
border-radius: 20px;
font-size: 0.85rem;
margin-right: 4px;
}
/* Search bar inside hero */
.plp-search-form { width: 100%; }
.plp-search-wrap {
display: flex;
align-items: center;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(8px);
border-radius: 50px;
padding: 0.3rem 0.4rem 0.3rem 1rem;
transition: background 0.2s;
}
.plp-search-wrap:focus-within {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.4);
}
.plp-search-icon { color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-right: 0.6rem; flex-shrink: 0; }
.plp-search-input {
flex: 1;
background: none;
border: none;
outline: none;
color: #fff;
font-size: 0.9rem;
}
.plp-search-input::placeholder { color: rgba(255,255,255,0.45); }
.plp-search-btn {
background: #2563eb;
color: #fff;
border: none;
border-radius: 50px;
padding: 0.45rem 1.2rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
}
.plp-search-btn:hover { background: #1d4ed8; }
/* Container spacing */
.plp-container { padding-top: 2.5rem; padding-bottom: 3rem; }
/* ---- SIDEBAR ---- */
.plp-mobile-filter-btn {
background: #fff;
border: 1.5px solid #e2e8f0;
color: #334155;
font-weight: 600;
border-radius: 10px;
position: relative;
}
.plp-filter-dot {
position: absolute;
top: 8px; right: 12px;
width: 8px; height: 8px;
background: #2563eb;
border-radius: 50%;
}
.plp-sidebar-sticky {
position: sticky;
top: 90px;
}
.plp-sidebar-card {
background: #fff;
border-radius: 16px;
border: 1px solid #e8edf4;
box-shadow: 0 1px 6px rgba(0,0,0,0.04);
overflow: hidden;
}
.plp-sidebar-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1.1rem;
background: #f8fafc;
border-bottom: 1px solid #f0f4f8;
font-weight: 700;
font-size: 0.82rem;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.plp-clear-all {
font-size: 0.75rem;
color: #ef4444;
text-decoration: none;
font-weight: 600;
}
.plp-clear-all:hover { text-decoration: underline; }
/* Active filter chips */
.plp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.75rem 1rem; }
.plp-chip {
display: inline-flex;
align-items: center;
background: #eff6ff;
color: #2563eb;
border: 1px solid #bfdbfe;
border-radius: 20px;
padding: 3px 10px;
font-size: 0.75rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.plp-chip:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
/* Category list */
.plp-cat-list, .plp-subcat-list {
list-style: none;
padding: 0.5rem 0;
margin: 0;
}
.plp-cat-link {
display: flex;
align-items: center;
gap: 8px;
padding: 0.5rem 1.1rem;
color: #475569;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.18s;
border-left: 3px solid transparent;
}
.plp-cat-link:hover { color: #2563eb; background: #eff6ff; border-left-color: #93c5fd; }
.plp-cat-link.active { color: #2563eb; font-weight: 700; background: #eff6ff; border-left-color: #2563eb; }
.plp-cat-icon {
width: 26px; height: 26px;
border-radius: 8px;
background: #f1f5f9;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.7rem;
color: #64748b;
flex-shrink: 0;
transition: all 0.2s;
}
.plp-cat-link.active .plp-cat-icon,
.plp-cat-link:hover .plp-cat-icon { background: #dbeafe; color: #2563eb; }
.plp-cat-count {
font-size: 0.72rem;
color: #94a3b8;
background: #f1f5f9;
padding: 1px 7px;
border-radius: 10px;
}
.plp-subcat-list { padding: 0 0 0.35rem; }
.plp-subcat-link {
display: flex;
align-items: center;
padding: 0.35rem 1.1rem 0.35rem 2rem;
color: #64748b;
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.15s;
border-left: 3px solid transparent;
}
.plp-subcat-link:hover { color: #2563eb; background: #f8fafc; }
.plp-subcat-link.active { color: #2563eb; font-weight: 700; background: #eff6ff; border-left-color: #2563eb; }
/* Price filter */
.plp-price-form { padding: 1rem 1.1rem; }
.plp-price-inputs { display: flex; align-items: flex-end; gap: 10px; }
.plp-price-field { flex: 1; }
.plp-price-field label { font-size: 0.7rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; display: block; }
.plp-price-input-wrap {
display: flex; align-items: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 0.45rem 0.6rem;
gap: 4px;
}
.plp-price-input-wrap span { color: #94a3b8; font-size: 0.8rem; flex-shrink: 0; }
.plp-price-input-wrap input {
border: none; background: none; outline: none;
font-size: 0.85rem; color: #1e293b; width: 100%;
}
.plp-price-separator { color: #94a3b8; font-size: 0.9rem; padding-bottom: 0.5rem; }
.plp-price-presets {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.75rem;
}
.plp-price-preset {
font-size: 0.73rem; font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
background: #f1f5f9; color: #475569;
text-decoration: none;
border: 1px solid #e2e8f0;
transition: all 0.15s;
}
.plp-price-preset:hover, .plp-price-preset.active {
background: #2563eb; color: #fff; border-color: #2563eb;
}
.plp-apply-btn {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff; border: none; border-radius: 10px;
font-weight: 600; font-size: 0.85rem;
padding: 0.6rem;
transition: all 0.2s;
}
.plp-apply-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,0.35); color: #fff; }
/* ---- TOOLBAR ---- */
.plp-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid #e8edf4;
border-radius: 14px;
padding: 0.7rem 1.2rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
gap: 12px;
}
.plp-toolbar-left { display: flex; align-items: center; gap: 10px; }
.plp-toolbar-right { display: flex; align-items: center; gap: 10px; }
.plp-toolbar-count { font-size: 0.875rem; color: #64748b; }
.plp-toolbar-count strong { color: #1e293b; }
.plp-sort-btn {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 0.45rem 1rem;
font-size: 0.82rem;
font-weight: 600;
color: #334155;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.plp-sort-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.plp-sort-menu {
border-radius: 12px !important;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
min-width: 200px;
padding: 0.4rem !important;
}
.plp-sort-menu .dropdown-item {
border-radius: 8px;
font-size: 0.85rem;
padding: 0.5rem 0.85rem;
color: #334155;
}
.plp-sort-menu .dropdown-item.active,
.plp-sort-menu .dropdown-item:active {
background: #eff6ff; color: #2563eb; font-weight: 600;
}
.plp-view-toggle { display: flex; gap: 4px; }
.plp-view-btn {
width: 34px; height: 34px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #94a3b8;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.18s;
font-size: 0.8rem;
}
.plp-view-btn.active, .plp-view-btn:hover {
background: #2563eb; color: #fff; border-color: #2563eb;
}
/* ---- LIST VIEW ---- */
#productGrid.plp-list-view {
display: flex !important;
flex-direction: column;
gap: 1rem;
}
#productGrid.plp-list-view .col { width: 100% !important; max-width: 100% !important; flex: none !important; }
#productGrid.plp-list-view .product-card {
display: flex !important;
flex-direction: row !important;
border-radius: 14px !important;
max-height: 180px;
}
#productGrid.plp-list-view .product-img-wrap {
width: 180px; min-width: 180px;
border-radius: 14px 0 0 14px;
overflow: hidden;
}
#productGrid.plp-list-view .product-img,
#productGrid.plp-list-view .card-img-top {
height: 180px !important;
border-radius: 14px 0 0 14px !important;
object-fit: cover;
}
#productGrid.plp-list-view .card-body {
padding: 1rem 1.25rem !important;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#productGrid.plp-list-view .product-card::after { display: none; }
/* ---- EMPTY STATE ---- */
.plp-empty {
text-align: center;
padding: 5rem 2rem;
background: #fff;
border-radius: 20px;
border: 1px dashed #e2e8f0;
}
.plp-empty-icon {
width: 80px; height: 80px;
border-radius: 50%;
background: #eff6ff;
color: #2563eb;
font-size: 2rem;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.25rem;
}
.plp-empty-title { font-weight: 700; color: #1e293b; margin-bottom: 0.5rem; }
.plp-empty-sub { color: #64748b; margin-bottom: 1.5rem; }
/* ---- PAGINATION ---- */
.plp-page-btn {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #fff;
color: #334155;
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.18s;
}
.plp-page-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.page-item.active .plp-page-btn { background: #2563eb; border-color: #2563eb; color: #fff; }
.page-item.disabled .plp-page-btn { opacity: 0.4; cursor: not-allowed; }
.plp-page-arrow { background: #f8fafc; }
.plp-page-ellipsis { background: none; border-color: transparent; cursor: default; }
/* Responsive adjustments */
@media (max-width: 767.98px) {
.plp-hero { padding: 1.75rem 0 1.5rem; }
.plp-hero-title { font-size: 1.5rem; }
.plp-container { padding-top: 1.5rem; }
#productGrid.plp-list-view .product-card { max-height: none; flex-direction: column !important; }
#productGrid.plp-list-view .product-img-wrap { width: 100%; min-width: 0; border-radius: 14px 14px 0 0; }
#productGrid.plp-list-view .product-img { height: 200px !important; border-radius: 14px 14px 0 0 !important; }
}
/* ================================================================
PRODUCT CARD — UPGRADED ELEMENTS
================================================================ */
/* Badges top-left */
.product-badges-tl {
position: absolute;
top: 10px; left: 10px;
z-index: 3;
display: flex; flex-direction: column; gap: 4px;
}
.pcard-badge {
display: inline-block;
font-size: 0.68rem; font-weight: 800;
padding: 3px 9px;
border-radius: 6px;
letter-spacing: 0.03em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.pcard-badge-sale { background: #ef4444; color: #fff; }
.pcard-badge-new { background: #10b981; color: #fff; }
/* Out-of-stock overlay */
.product-oos-overlay {
position: absolute; inset: 0;
background: rgba(15,23,42,0.45);
display: flex; align-items: center; justify-content: center;
z-index: 2;
backdrop-filter: blur(2px);
}
.product-oos-overlay span {
background: rgba(15,23,42,0.75);
color: #fff;
font-size: 0.8rem; font-weight: 700;
padding: 6px 16px;
border-radius: 20px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Wishlist button */
.pcard-wish-btn {
width: 34px; height: 34px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.25s;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
color: #e11d48;
font-size: 0.82rem;
}
.pcard-wish-btn:hover { background: #e11d48; color: #fff; transform: scale(1.12); }
/* Quick view overlay */
.product-overlay {
background: linear-gradient(transparent, rgba(0,0,0,0.38));
opacity: 0;
transition: opacity 0.28s;
}
.product-card:hover .product-overlay { opacity: 1; }
/* Brand label */
.pcard-brand {
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: #94a3b8;
display: block;
margin-bottom: 4px;
}
/* Rating */
.pcard-rating {
display: inline-flex; align-items: center; gap: 3px;
background: #f0fdf4;
color: #16a34a;
border-radius: 6px;
padding: 2px 7px;
font-size: 0.75rem; font-weight: 700;
}
.pcard-rating i { font-size: 0.6rem; }
.pcard-review-count { font-size: 0.72rem; color: #94a3b8; }
/* Price row */
.pcard-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pcard-price {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.18rem;
font-weight: 800;
color: #2563eb;
}
.pcard-original {
font-size: 0.85rem;
color: #94a3b8;
text-decoration: line-through;
}
.pcard-save {
font-size: 0.7rem;
font-weight: 700;
color: #16a34a;
background: #f0fdf4;
border-radius: 4px;
padding: 1px 6px;
}
/* Low stock */
.pcard-low-stock {
font-size: 0.72rem;
color: #f59e0b;
font-weight: 600;
background: #fffbeb;
border-radius: 6px;
padding: 3px 8px;
display: inline-block;
}
/* Cart button */
.pcard-cart-btn {
border-radius: 10px !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
padding: 0.55rem 0.75rem !important;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
border: none !important;
transition: all 0.22s !important;
letter-spacing: 0.02em;
}
.pcard-cart-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(37,99,235,0.35) !important;
}
/* OOS button */
.pcard-oos-btn {
border-radius: 10px !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
background: #f1f5f9 !important;
color: #94a3b8 !important;
border: 1px solid #e2e8f0 !important;
cursor: not-allowed !important;
}
/* ================================================================
GLOBAL RESPONSIVE ENHANCEMENTS
================================================================ */
/* Prevent horizontal overflow site-wide */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }
/* Minimum tap target size for touch devices */
@media (max-width: 991.98px) {
a, button, .btn, input[type="submit"], input[type="button"],
.nav-link, .page-link, .dropdown-item {
min-height: 36px;
}
}
/* ================================================================
NAVBAR — TABLET & MOBILE FIXES
================================================================ */
@media (max-width: 991.98px) {
.navbar-premium {
padding: 0.6rem 0;
}
/* Cart + action icons always visible to the right of toggler */
.navbar-actions {
flex-wrap: nowrap;
gap: 6px !important;
order: 3;
}
/* Move actions to same row as brand/toggler */
.navbar .container {
flex-wrap: wrap;
}
.navbar-toggler {
order: 2;
}
/* Show cart icon row always (before collapse) */
.navbar-collapse {
order: 4;
width: 100%;
}
/* Cart badge */
.cart-count-badge {
font-size: 0.6rem;
min-width: 16px;
height: 16px;
line-height: 16px;
}
/* Nav icons compact */
.nav-icon-btn {
width: 38px; height: 38px;
font-size: 0.95rem;
}
/* Login btn compact */
.btn-header-outline {
font-size: 0.8rem;
padding: 0.4rem 0.85rem;
}
}
@media (max-width: 575.98px) {
.brand-name {
font-size: 1.05rem !important;
}
.brand-logo { height: 36px !important; }
.navbar-actions { gap: 4px !important; }
.btn-header-outline { padding: 0.35rem 0.65rem; font-size: 0.76rem; }
}
/* ================================================================
HERO SLIDER — TABLET
================================================================ */
@media (max-width: 991.98px) and (min-width: 768px) {
.plp-hero-title { font-size: 1.75rem; }
}
/* ================================================================
TRUST STRIP — MOBILE
================================================================ */
@media (max-width: 767.98px) {
.trust-strip { overflow-x: hidden; }
.trust-strip .row { flex-wrap: wrap; padding-bottom: 0; }
.trust-strip .col-6 { min-width: auto; }
.trust-item-premium { padding: 0.6rem 0.5rem; gap: 8px; }
.trust-item-premium .trust-icon { width: 32px; height: 32px; font-size: 0.85rem; }
.trust-item-premium .trust-title { font-size: 0.75rem; }
.trust-item-premium .trust-sub { font-size: 0.65rem; }
}
/* ================================================================
CATEGORIES SECTION — MOBILE
================================================================ */
@media (max-width: 575.98px) {
.cat-classic-card { padding: 1rem 0.75rem; }
.cat-classic-icon { width: 50px; height: 50px; font-size: 1.2rem; margin-bottom: 0.5rem; }
.cat-classic-name { font-size: 0.8rem; }
.cat-section-title { font-size: 1.5rem; }
}
/* ================================================================
SECTION HEADINGS — TABLET & MOBILE
================================================================ */
@media (max-width: 767.98px) {
.section-title-premium { font-size: 1.5rem !important; }
.section-header-inline { flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.section-desc { font-size: 0.88rem; }
.section-premium { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}
@media (max-width: 575.98px) {
.section-title-premium { font-size: 1.3rem !important; }
.section-premium { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}
/* ================================================================
PRODUCT CARDS — MOBILE (2 per row already via row-cols, fine-tune)
================================================================ */
@media (max-width: 575.98px) {
.product-card .card-body { padding: 0.65rem !important; }
.pcard-price { font-size: 1rem; }
.pcard-cart-btn { font-size: 0.76rem !important; padding: 0.45rem 0.5rem !important; }
.product-card .product-img, .product-card .card-img-top { height: 160px; }
.pcard-brand { font-size: 0.6rem; }
}
/* ================================================================
CART PAGE — MOBILE CARD LAYOUT
================================================================ */
.cart-mobile-item {
display: none;
}
@media (max-width: 767.98px) {
.cart-desktop-table { display: none !important; }
.cart-mobile-item { display: block; }
.cart-page-title { font-size: 1.4rem; }
}
.cart-mobile-item .cart-card {
background: #fff;
border: 1px solid #e8edf4;
border-radius: 16px;
padding: 0.85rem;
margin-bottom: 0.75rem;
display: flex;
gap: 0.85rem;
align-items: flex-start;
}
.cart-mobile-item .cart-card-img {
width: 80px; min-width: 80px; height: 80px;
border-radius: 10px;
object-fit: cover;
background: #f1f5f9;
overflow: hidden;
}
.cart-mobile-item .cart-card-img img {
width: 100%; height: 100%; object-fit: cover;
}
.cart-mobile-item .cart-card-body { flex: 1; min-width: 0; }
.cart-mobile-item .cart-card-name {
font-size: 0.85rem; font-weight: 600; color: #1e293b;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block; margin-bottom: 3px;
}
.cart-mobile-item .cart-card-variant { font-size: 0.72rem; color: #94a3b8; margin-bottom: 6px; }
.cart-mobile-item .cart-card-price {
font-size: 1rem; font-weight: 800; color: #2563eb;
font-family: 'Space Grotesk', sans-serif;
}
.cart-mobile-item .cart-card-actions {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px; gap: 8px;
}
.cart-mobile-item .cart-qty-group {
display: flex; align-items: center;
border: 1px solid #e2e8f0; border-radius: 8px;
overflow: hidden; background: #f8fafc;
}
.cart-mobile-item .cart-qty-group button {
background: none; border: none;
padding: 6px 12px; font-size: 0.9rem;
color: #475569; cursor: pointer;
transition: background 0.15s;
}
.cart-mobile-item .cart-qty-group button:hover { background: #e2e8f0; }
.cart-mobile-item .cart-qty-group span {
padding: 0 10px; font-weight: 700; font-size: 0.85rem; color: #1e293b;
}
.cart-mobile-item .cart-remove-btn {
background: #fef2f2; border: 1px solid #fecaca;
color: #ef4444; border-radius: 8px;
padding: 6px 10px; font-size: 0.8rem;
cursor: pointer; transition: all 0.2s; border: none;
}
.cart-mobile-item .cart-remove-btn:hover { background: #ef4444; color: #fff; }
.cart-mobile-item .cart-card-total {
font-size: 0.8rem; color: #64748b; margin-top: 4px;
}
/* ================================================================
CHECKOUT PAGE — MOBILE
================================================================ */
@media (max-width: 767.98px) {
.checkout-page .col-lg-8,
.checkout-page .col-lg-4 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/* Flip order: summary on top on mobile */
.checkout-summary-col { order: -1; margin-bottom: 1rem; }
.checkout-page h3 { font-size: 1.4rem; }
.checkout-page h5 { font-size: 1rem; }
}
/* ================================================================
ORDERS PAGE — MOBILE
================================================================ */
@media (max-width: 767.98px) {
.orders-row-inner {
flex-direction: column;
gap: 6px;
}
.orders-row-inner .col-md-3,
.orders-row-inner .col-md-2 {
display: flex;
align-items: center;
justify-content: space-between;
}
.order-actions-col { display: flex; gap: 6px; flex-wrap: wrap; }
}
/* ================================================================
PROFILE PAGE — MOBILE
================================================================ */
@media (max-width: 767.98px) {
.profile-banner .card-body { padding: 1.25rem !important; }
.profile-banner .rounded-circle { width: 64px !important; height: 64px !important; font-size: 1.4rem !important; }
.profile-banner h3 { font-size: 1.2rem; }
/* Nav tabs scrollable */
.profile-tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
.profile-tabs .nav-item { white-space: nowrap; }
}
/* ================================================================
WISHLIST PAGE — MOBILE
================================================================ */
@media (max-width: 575.98px) {
.wishlist-hero { padding: 1.25rem; border-radius: 14px; }
.wishlist-card .wishlist-img { height: 160px; }
}
/* ================================================================
PRODUCT DETAIL PAGE — TABLET & MOBILE
================================================================ */
@media (max-width: 767.98px) {
.product-detail-gallery img { max-height: 320px; }
.product-detail-title { font-size: 1.3rem !important; }
.product-detail-price { font-size: 1.6rem !important; }
/* Tabs: scrollable on mobile */
.product-tabs-nav { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
.product-tabs-nav .nav-item { white-space: nowrap; }
/* Sticky add to cart for mobile */
.product-sticky-mobile {
position: fixed; bottom: 0; left: 0; right: 0;
background: #fff; z-index: 900;
padding: 0.75rem 1rem;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
border-top: 1px solid #e2e8f0;
display: flex; gap: 8px;
}
}
@media (min-width: 768px) {
.product-sticky-mobile { display: none !important; }
}
/* ================================================================
PLP TOOLBAR — MOBILE COMPACT
================================================================ */
@media (max-width: 575.98px) {
.plp-toolbar { padding: 0.5rem 0.75rem; flex-wrap: wrap; gap: 8px; }
.plp-toolbar-left { font-size: 0.78rem; }
.plp-sort-btn { font-size: 0.76rem; padding: 0.4rem 0.75rem; }
.plp-view-btn { width: 30px; height: 30px; font-size: 0.72rem; }
.plp-sidebar-sticky { position: static; top: auto; }
}
/* ================================================================
FOOTER — MOBILE
================================================================ */
@media (max-width: 767.98px) {
.footer-premium .row { gap: 0; }
.footer-premium .col-lg-4 { margin-bottom: 1.5rem; }
.footer-desc { font-size: 0.82rem; }
.footer-heading { font-size: 0.85rem; margin-bottom: 0.75rem; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { font-size: 0.82rem; }
.footer-bottom { padding: 1rem 0 !important; }
}
@media (max-width: 575.98px) {
.footer-premium { padding-top: 0; }
.footer-premium .row.py-5 { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
/* Stack 2 col footer links */
.footer-premium .col-6 { padding-bottom: 0.5rem; }
}
/* ================================================================
WHATSAPP FLOAT — MOBILE
================================================================ */
@media (max-width: 767.98px) {
.whatsapp-float {
width: 48px; height: 48px;
font-size: 1.4rem;
bottom: 70px; /* above mobile sticky bar */
right: 14px;
}
}
/* ================================================================
AUTH PAGES — MOBILE
================================================================ */
@media (max-width: 575.98px) {
.auth-card, .auth-container { padding: 1.5rem 1rem !important; }
.auth-page h2, .auth-page h3 { font-size: 1.4rem; }
}
/* ================================================================
FORMS — MOBILE GLOBAL
================================================================ */
@media (max-width: 767.98px) {
.form-control, .form-select, .input-group .form-control {
font-size: 16px !important; /* prevents iOS zoom */
}
.form-label { font-size: 0.85rem; }
.btn-lg { font-size: 0.95rem !important; padding: 0.65rem 1.25rem !important; }
}
/* ================================================================
GENERAL UTILITY — TABLET & MOBILE
================================================================ */
@media (max-width: 991.98px) {
.container { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 767.98px) {
.container { padding-left: 0.85rem; padding-right: 0.85rem; }
/* Tables always scrollable */
.table-auto-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Cards full-width padding fix */
.card-body { padding: 1rem; }
/* Page headings */
h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.4rem !important; }
h3 { font-size: 1.2rem !important; }
}
@media (max-width: 575.98px) {
.container { padding-left: 0.65rem; padding-right: 0.65rem; }
h1 { font-size: 1.5rem !important; }
h3 { font-size: 1.1rem !important; }
}
/* ================================================================
CHECKOUT — PAYMENT OPTION CARDS
================================================================ */
.payment-option-card {
cursor: pointer;
transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s, color 0.18s;
border: 2px solid #dee2e6 !important;
border-radius: 12px !important;
background-color: #fff;
color: #212529;
}
.payment-option-card:hover {
border-color: #0d6efd !important;
background-color: #eef3ff;
box-shadow: 0 0 0 3px rgba(13,110,253,.1);
}
/* Selected state: blue bg + white text */
.payment-option-card.pcard-selected {
border-color: #0d6efd !important;
background-color: #0d6efd !important;
box-shadow: 0 4px 16px rgba(13,110,253,.30);
color: #fff !important;
}
.payment-option-card.pcard-selected .text-muted,
.payment-option-card.pcard-selected small {
color: rgba(255,255,255,.80) !important;
}
.payment-option-card.pcard-selected .text-success,
.payment-option-card.pcard-selected .text-primary,
.payment-option-card.pcard-selected .text-info {
color: #fff !important;
}
.payment-option-card.pcard-selected .form-check-input {
border-color: #fff;
background-color: #fff;
/* Custom checked dot in white card = blue dot on white bg */
}
.cursor-pointer { cursor: pointer; }