/* ===== style.css ===== */
/* ─────────────────────────────────────────────
VIBHAA DESIGNS — UPDATED style.css
(Original content preserved. Only additions are
at the bottom under "PRICE FONT OVERRIDE".)
───────────────────────────────────────────── */
/* TOKENS */
:root {
--green-deep: #0B3429;
--green-mid: #0D3B2E;
--green-bright: #145c40;
--gold: #C9A84C;
--pure-gold: #ffbb00;
--gold-light: #E2C97E;
--gold-dim: #a08030;
--cream: #F5F0E8;
--cream-warm: #EDE8DF;
--charcoal: #1A1A1A;
--white: #FFFFFF;
--text-muted: #7a7a72;
--border: rgba(201,168,76,0.18);
--border-search: rgb(222, 176, 49);
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Jost', sans-serif;
/* NEW — readable price font */
--font-price: 'Jost', system-ui, -apple-system, "Segoe UI", sans-serif;
--ease-butter: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--red-sale: #B23A2E;
}
/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
background: var(--cream);
color: var(--charcoal);
font-family: var(--font-body);
font-weight: 300;
line-height: 1.6;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.hidden { visibility: hidden; opacity: 0; }
/* ─── INTRO ANIMATION ───────────────────────── */
#intro { position: fixed; inset: 0; z-index: 9999; pointer-events: all; background: transparent; }
.curtain {
position: absolute; left: 0; width: 100%; height: 50%;
background-image: url('texture-bg.png');
background-size: 100vw 100vh; background-repeat: no-repeat;
transition: transform 1.8s cubic-bezier(0.76, 0, 0.24, 1);
will-change: transform;
}
.curtain-top { top: 0; height: calc(50% + 2px); background-position: center top; }
.curtain-bottom { bottom: 0; height: calc(50% + 2px); background-position: center bottom; }
.curtain-top.open { transform: translateY(-100%); }
.curtain-bottom.open { transform: translateY(100%); }
#intro-logo {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
z-index: 10; transition: opacity 0.55s ease;
}
#intro-logo-img {
width: min(220px, 52vw); border-radius: 10px;
opacity: 0; transform: scale(0.9);
filter: drop-shadow(0 0 40px rgba(201,168,76,0.2));
transition: opacity 0.8s ease, transform 0.8s var(--ease-butter);
}
#intro-logo-img.visible { opacity: 1; transform: scale(1); }
#intro-logo.fade-out { opacity: 0; }
#intro.done { pointer-events: none; }
/* ─── NAVBAR ────────────────────────────────── */
#navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 48px; min-height: 90px;
height: auto;
transition: background 0.4s ease, box-shadow 0.4s ease;
}
.nav-left, .nav-right { display: flex; align-items: center; gap: 32px; flex: 1; }
.nav-right { justify-content: flex-end; }
.nav-link {
font-family: var(--font-body); font-size: 12px; font-weight: 500;
letter-spacing: 0.12em; text-transform: uppercase;
transition: color 0.3s ease, opacity 0.3s ease; opacity: 0.85;
}
.nav-link:hover { opacity: 1; color: var(--gold-light); }
.nav-center { text-align: center; }
.brand-logo-link { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.brand-name {
font-family: var(--font-display); font-size: 31px; font-weight: 900;
color: var(--cream); transition: color 0.3s ease;
}
.brand-sub {
font-family: var(--font-body); font-size: 15px; font-weight: 500;
text-transform: uppercase; margin-top: 2px;
}
.nav-icon { display: flex; align-items: center; }
/* ─── HERO ──────────────────────────────────── */
#hero { position: relative; margin-top: 90px; height: clamp(460px, 68vh, 640px); overflow: hidden; background: var(--green-mid); }
.hero-track { position: relative; width: 100%; height: 100%; }
.hero-slide {
position: absolute; inset: 0; display: block; background: var(--green-mid);
opacity: 0; visibility: hidden; transition: opacity 0.8s var(--ease-butter);
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.06) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.04) 0%, transparent 50%);
pointer-events: none;
}
.hero-content {
position: absolute; left: 0; top: 0; bottom: 0; width: 42%; z-index: 2;
padding: 48px 56px 48px 80px;
display: flex; flex-direction: column; justify-content: center;
background: transparent;
opacity: 0; transform: translateY(20px);
transition: opacity 0.9s var(--ease-butter) 0.15s, transform 0.9s var(--ease-butter) 0.15s;
}
.hero-slide.is-active .hero-content { opacity: 1; transform: none; }
.hero-eyebrow {
font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.hero-title {
font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 64px);
font-weight: 300; line-height: 1.08; color: var(--cream); margin-bottom: 20px;
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-subtitle {
font-family: var(--font-body); font-size: 14px; color: rgba(245,240,232,0.7);
line-height: 1.7; margin-bottom: 32px; letter-spacing: 0.02em;
}
.hero-cta {
display: inline-block; font-family: var(--font-body); font-size: 11px;
font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--charcoal); background: var(--gold);
padding: 14px 36px;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-cta:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,168,76,0.25); }
.hero-image-wrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-image-placeholder { display: flex; align-items: center; justify-content: center; }
/* NEW: Mobile-specific hero images - hidden by default */
.hero-image-mobile-wrap {
display: none;
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.hero-image-mobile {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid rgba(201,168,76,0.5); background: rgba(11,52,41,0.4);
color: var(--cream); font-size: 24px; line-height: 1; cursor: pointer;
z-index: 5; display: flex; align-items: center; justify-content: center;
transition: background 0.3s ease, border-color 0.3s ease;
}
.hero-arrow:hover { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-dots {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
display: flex; gap: 10px; z-index: 5;
}
.hero-dots button {
width: 26px; height: 2px; background: rgba(245,240,232,0.35);
border: none; cursor: pointer; padding: 0;
transition: background 0.3s ease, width 0.3s ease;
}
.hero-dots button.is-active { background: var(--gold); width: 40px; }
/* Mobile hero - show mobile images, hide desktop images */
@media (max-width: 768px) {
#navbar { padding: 0 20px; }
.nav-left, .nav-right { gap: 14px; }
#hero { height: clamp(420px, 78vh, 560px); }
/* Hide desktop image wrap */
.hero-image-wrap { display: none; }
/* Show mobile image wrap */
.hero-image-mobile-wrap { display: block; }
/* Adjust content overlay */
.hero-content {
width: 100%;
padding: 32px 28px;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
z-index: 3;
}
/* Add a dark overlay for text readability on mobile images */
.hero-slide::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
z-index: 2;
}
/* Ensure text is readable */
.hero-title {
color: var(--cream);
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.hero-subtitle {
color: rgba(245,240,232,0.85);
text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.hero-eyebrow {
text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
}
.hero-scroll-hint {
position: absolute; bottom: 40px; left: 80px;
display: flex; align-items: center; gap: 14px;
color: rgba(245,240,232,0.45); font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; z-index: 3;
}
.scroll-line { width: 40px; height: 1px; background: var(--gold); opacity: 0.5; animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% {width:40px;opacity:.5;} 50% {width:60px;opacity:.9;} }
/* ─── STATEMENT ─────────────────────────────── */
#statement { padding: 80px 80px; background: var(--cream-warm); text-align: center; }
.statement-inner { max-width: 720px; margin: 0 auto; }
.gold-rule {
width: 60px;
height: 1px;
background: var(--gold);
margin: 0 auto;
}
.gold-rule:first-child { margin-bottom: 28px; }
.gold-rule:last-child { margin-top: 32px; }
.statement-text {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 300;
line-height: 1.6;
color: var(--charcoal);
margin: 0;
}
.statement-text em { font-style: italic; color: var(--gold-dim); }
/* ─── SECTION COMMON ────────────────────────── */
.section-header { text-align: center; margin-bottom: 56px; }
.section-eyebrow {
display: block; font-family: var(--font-body); font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 12px;
}
.section-title { font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-weight: 300; color: var(--charcoal); line-height: 1.1; }
/* ─── CATEGORIES ────────────────────────────── */
#collections {
position: relative;
padding: 100px 60px;
background: #f5f0e8;
overflow: hidden;
}
#collections::before {
content: "";
position: absolute;
inset: 0;
background: url("../images/ajrakh-pattern1.png");
background-size: 250px;
opacity: 0.06;
pointer-events: none;
}
.categories-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; max-width: 1300px; margin: 0 auto; }
.cat-card { position: relative; height: 440px; border-radius: 2px; overflow: hidden; cursor: pointer; transition: transform 0.4s var(--ease-butter); display: block; text-decoration: none; }
.cat-card:hover { transform: translateY(-4px); }
.cat-bg { position: absolute; inset: 0; background-size: cover;
background-repeat: no-repeat;}
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%); }
.cat-card:hover .cat-overlay { background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.75) 100%); }
.cat-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 28px; z-index: 2; transform: translateY(8px); transition: transform 0.4s var(--ease-butter); }
.cat-card:hover .cat-content { transform: none; }
.cat-label { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cat-name { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--white); line-height: 1.2; margin-bottom: 6px; }
.cat-desc { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 16px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s; }
.cat-card:hover .cat-desc { opacity: 1; transform: none; }
.cat-link { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--gold); opacity: 0; transition: opacity 0.35s ease 0.1s; display: inline-block; }
.cat-card:hover .cat-link { opacity: 1; }
/* ─── FEATURED PRODUCTS ─────────────────────── */
#featured {
padding: 100px 60px;
background-color: #ede8df;
background-image:
url("../images/text.png");
background-repeat: repeat;
background-size: 350px;
}
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1300px; margin: 0 auto; }
.product-card { cursor: pointer; position: relative; }
.product-img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--cream); }
.product-img-placeholder { display: flex; align-items: center; justify-content: center; }
.placeholder-icon { opacity: 0.4; }
.product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-butter); }
.product-card:hover .product-img { transform: scale(1.05); }
.product-tag {
position: absolute; top: 16px; left: 16px;
font-size: 9px; font-weight: 500; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--charcoal); background: var(--gold); padding: 4px 10px;
}
.product-hover-action { position: absolute; bottom: 0; left: 0; right: 0; transform: translateY(100%); transition: transform 0.4s var(--ease-butter); display: flex; flex-direction: column; }
.product-card:hover .product-hover-action { transform: none; }
.quick-add {
width: 100%; padding: 12px; background: var(--charcoal); color: var(--cream);
border: none; font-family: var(--font-body); font-size: 11px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
transition: background 0.3s ease;
}
.quick-add:hover { background: var(--green-mid); }
.quick-add.buy-now { background: var(--gold); color: var(--charcoal); }
.quick-add.buy-now:hover { background: var(--gold-light); }
.product-info { padding: 16px 0 0; }
.product-category { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); }
.product-name { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--charcoal); margin: 6px 0 8px; line-height: 1.3; }
.view-all-wrap { text-align: center; margin-top: 56px; }
.view-all-btn {
display: inline-block; font-family: var(--font-body); font-size: 11px;
font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal);
border: 1px solid var(--charcoal); padding: 15px 44px;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
cursor: pointer; background: transparent;
}
.view-all-btn:hover { background: var(--charcoal); color: var(--cream); transform: translateY(-2px); }
/* ─── CRAFT STORY ───────────────────────────── */
#craft {
padding: 120px 80px;
background-color: #1a1a1a;
background-image:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.02) 0px,
rgba(255,255,255,0.02) 2px,
transparent 2px,
transparent 18px
),
repeating-linear-gradient(
-45deg,
rgba(255,255,255,0.02) 0px,
rgba(255,255,255,0.02) 2px,
transparent 2px,
transparent 18px
);
}
.craft-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.craft-text .section-eyebrow { color: var(--gold); }
.craft-title { font-family: var(--font-display); font-size: clamp(38px, 4.5vw, 60px); font-weight: 300; color: var(--cream); line-height: 1.1; margin: 12px 0 24px; }
.craft-title em { font-style: italic; color: var(--gold); }
.craft-body { font-size: 14px; line-height: 1.9; color: rgba(245,240,232,0.6); margin-bottom: 36px; max-width: 440px; }
.craft-link { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--gold); border-bottom: 1px solid rgba(201,168,76,0.3); padding-bottom: 2px; transition: border-color 0.3s ease, color 0.3s ease; }
.craft-link:hover { border-color: var(--gold); color: var(--gold-light); }
.craft-motif { display: flex; align-items: center; justify-content: center; }
.motif-svg { width: 320px; height: 320px; animation: rotateSlow 40s linear infinite; opacity: 0.7; }
@keyframes rotateSlow { from {transform: rotate(0);} to {transform: rotate(360deg);} }
/* ─── MARQUEE ───────────────────────────────── */
#marquee-section { background: var(--green-deep); padding: 20px 0; overflow: hidden; border-top: 1px solid rgba(201,168,76,0.12); border-bottom: 1px solid rgba(201,168,76,0.12); }
.marquee-track { overflow: hidden; }
.marquee-inner { display: flex; gap: 40px; white-space: nowrap; animation: marqueeScroll 18s linear infinite; font-family: var(--font-display); font-style: italic; font-size: 17px; color: rgba(255, 187, 0, 0.7); align-items: center; }
.dot { font-size: 8px; color: var(--gold); opacity: 0.4; }
@keyframes marqueeScroll { from {transform: translateX(0);} to {transform: translateX(-50%);} }
/* ─── INSTAGRAM ─────────────────────────────── */
#instagram {
padding: 100px 60px;
background-color: #ede8df;
background-image:
url("../images/text.png");
background-repeat: repeat;
background-size: 350px;
}
.insta-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1300px; margin: 0 auto; }
.insta-tile { position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer; }
.insta-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-butter); }
.insta-tile:hover img { transform: scale(1.07); }
.insta-overlay { position: absolute; inset: 0; background: rgba(13, 58, 46, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.insta-overlay.always { opacity: 0.6; }
.insta-tile:hover .insta-overlay { opacity: 1; }
/* ─── FOOTER ────────────────────────────────── */
#footer {
padding: 120px 80px;
background-color: #1a1a1a;
background-image: url("../images/footer-texture.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Fallback if image doesn't load */
background-color: #1a1a1a;
}
.footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 60px; margin-bottom: 40px; }
.footer-brand-name { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: 0.22em; color: var(--cream); }
.footer-brand-sub { display: block; font-family: var(--font-body); font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-tagline { font-size: 12px; color: rgba(245,240,232,0.4); letter-spacing: 0.06em; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.footer-col h5 { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-col a { display: block; font-size: 13px; color: rgba(245,240,232,0.6); padding: 6px 0; transition: color .25s ease; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom { display: flex; align-items: center; padding-top: 24px; font-size: 11px; color: rgba(245,240,232,0.3); letter-spacing: 0.1em; position: relative; }
.footer-bottom p { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.footer-bottom .footer-social { order: -1; }
/* Responsive Footer Grid */
@media (max-width: 1024px) {
.footer-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.footer-links { grid-template-columns: 1fr; }
}
/* ─────────────────────────────────────────────
NEW — PRICE FONT (readable, numeric)
Used on home, listings, detail, cart, etc.
───────────────────────────────────────────── */
.price,
.price-now,
.price-mrp,
.price-amt {
font-family: var(--font-price);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
color: var(--charcoal);
}
.price { font-size: 17px; }
/* Price block (MRP + selling + discount) used on cards & detail */
.price-block {
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 10px; margin-top: 4px;
}
.price-now { font-size: 18px; color: var(--charcoal); }
.price-mrp {
font-size: 13px; font-weight: 500;
color: var(--text-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.price-discount {
font-family: var(--font-price);
font-weight: 600; font-size: 12px;
color: var(--red-sale);
letter-spacing: 0.04em;
}
/* ─────────────────────────────────────────────
READABILITY + RESPONSIVENESS FIXES
(Appended — overrides earlier rules)
───────────────────────────────────────────── */
/* 1. Larger, more readable base sizes across site */
html { font-size: 17px; }
body { font-size: 16px; line-height: 1.65; }
/* Bump up tiny labels everywhere */
.nav-link { font-size: 15px; }
.brand-name { font-size: 31px; }
.brand-sub { font-size: 15px; }
.hero-eyebrow { font-size: 13px; }
.hero-subtitle { font-size: 16px; line-height: 1.75; }
.hero-cta { font-size: 13px; padding: 15px 38px; }
.section-eyebrow { font-size: 12px; }
.cat-label { font-size: 11px; }
.cat-name { font-size: 24px; }
.cat-desc { font-size: 14px; }
.cat-link { font-size: 13px; }
.product-tag { font-size: 11px; padding: 5px 12px; }
.product-category { font-size: 12px; }
.product-name { font-size: 19px; }
.quick-add { font-size: 13px; padding: 14px; }
.view-all-btn { font-size: 13px; padding: 16px 46px; }
.craft-body { font-size: 16px; }
.craft-link { font-size: 14px; }
.marquee-inner { font-size: 19px; }
.footer-tagline { font-size: 14px; }
.footer-col h5 { font-size: 12px; }
.footer-col a { font-size: 15px; }
.footer-bottom { font-size: 13px; }
.price { font-size: 18px; }
.price-now { font-size: 20px; }
.price-mrp { font-size: 14px; }
.price-discount { font-size: 13px; }
/* 2. Make Categories grid actually responsive */
@media (max-width: 1024px) {
#collections { padding: 80px 32px; }
.categories-grid {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.cat-card { height: 320px; }
}
@media (max-width: 560px) {
#collections { padding: 60px 18px; }
.categories-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.cat-card { height: 260px; }
.cat-card.cat-large { height: 300px; }
.cat-content { padding: 22px 20px; }
/* On touch screens hover text is hidden — always show */
.cat-desc, .cat-link { opacity: 1; transform: none; }
}
/* 3. Make Featured / New Arrivals grid responsive */
@media (max-width: 1024px) {
#featured { padding: 80px 32px; }
.products-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
#featured { padding: 60px 18px; }
.products-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.section-header { margin-bottom: 36px; }
.product-name { font-size: 16px; }
.view-all-wrap { margin-top: 36px; }
}
@media (max-width: 380px) {
.products-grid { gap: 12px; }
.product-name { font-size: 15px; }
}
/* 4. Instagram grid responsive */
@media (max-width: 1024px) {
.insta-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
#instagram { padding: 60px 18px; }
.insta-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 5. Statement / craft padding tame on mobile */
@media (max-width: 760px) {
#statement { padding: 60px 22px; }
#craft { padding: 80px 22px; }
.craft-inner { grid-template-columns: 1fr; gap: 40px; }
.motif-svg { width: 220px; height: 220px; }
}
/* ============================================================
UPDATES — logo in header/footer, toast theme, qty design,
hero arrows hidden on mobile, footer spacing, featured
cards add-to-cart, collections mega menu, etc.
============================================================ */
/* ── Logo in header ── */
.brand-logo-link { flex-direction: row; gap: 10px; align-items: center; }
.brand-logo-img {
width: 54px; height: 54px; object-fit: contain;
display: block; flex-shrink: 0;
}
.brand-text-wrap { display: flex; flex-direction: column; line-height: 1; }
/* ── Logo in footer ── */
.footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand-logo {
width: 150px; height: 150px; object-fit: contain;
filter: brightness(1.05);
}
.footer-brand-text { display: flex; flex-direction: column; }
.footer-brand-row .footer-brand-name { font-size: 22px; }
.footer-brand-row .footer-brand-sub { margin-bottom: 0; }
/* ── Footer desktop spacing: tighten gap, push links left ── */
#footer { padding: 70px 60px 36px; }
#footer .footer-top {
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 48px;
align-items: start;
}
#footer .footer-links {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
justify-self: start;
width: 100%;
max-width: 760px;
}
/* ── Toast — themed ── */
#vibhaaToast.toast {
position: fixed;
top: 28px;
right: 28px;
left: auto;
bottom: auto;
transform: translateY(-20px);
background: linear-gradient(135deg, #0b3429 0%, #1a4738 100%);
color: var(--cream);
border: 1px solid rgba(201,168,76,0.45);
border-left: 3px solid var(--gold);
padding: 14px 22px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 13px;
letter-spacing: 0.08em;
box-shadow: 0 12px 40px rgba(11,52,41,0.35), 0 0 0 1px rgba(201,168,76,0.08);
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
max-width: calc(100vw - 32px);
}
#vibhaaToast.toast.show {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#vibhaaToast.toast span { display: inline-flex; align-items: center; gap: 8px; }
#vibhaaToast.toast::before {
content: '✦';
color: var(--gold);
margin-right: 8px;
font-size: 14px;
}
#vibhaaToast.toast .toast-close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
color: rgba(255,255,255,0.6);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
transition: color .2s;
z-index: 1;
}
#vibhaaToast.toast .toast-close:hover {
color: #fff;
}
#vibhaaToast.toast .toast-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding-right: 20px;
}
#vibhaaToast.toast .toast-message {
line-height: 1.5;
}
#vibhaaToast.toast .toast-action {
display: inline-block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-light);
border-bottom: 1px solid rgba(226, 201, 126, 0.55);
padding-bottom: 2px;
transition: color .2s ease, border-color .2s ease;
}
#vibhaaToast.toast .toast-action:hover {
color: #fff;
border-color: #fff;
}
#vibhaaToast.toast.toast--login::before {
content: '♡';
}
@media (max-width: 480px) {
#vibhaaToast.toast {
top: 16px;
right: 16px;
left: 16px;
max-width: none;
}
}
/* ── Featured grid (index): kill blue mobile tap highlight, clickable cursor ── */
#featured .products-grid .product-card,
.products-grid .product-card,
.product-card,
.cat-card,
.cat-link,
button { -webkit-tap-highlight-color: transparent; }
#featured .products-grid .product-card {
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
#featured .products-grid .product-card * {
-webkit-tap-highlight-color: transparent;
}
/* ── Mobile: hide hero arrows, show swipe affordance ── */
@media (max-width: 760px) {
.hero-arrow { display: none !important; }
.hero-slide { touch-action: pan-y; }
}
/* ── Footer mobile: tighten so 2-col fits screen, push left ── */
@media (max-width: 760px) {
#footer { padding: 48px 16px 28px; }
#footer .footer-top {
grid-template-columns: 1fr;
gap: 28px;
padding: 0 0 36px;
text-align: left;
}
#footer .footer-brand,
#footer .footer-brand-row { justify-content: flex-start; }
#footer .footer-brand-row { margin-left: -2px; }
#footer .footer-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 14px;
width: 100%;
max-width: 100%;
margin-left: -2px;
padding-right: 4px;
}
#footer .footer-col {
min-width: 0;
padding-left: 0;
}
#footer .footer-col a {
font-size: 13px;
padding: 4px 0;
overflow-wrap: anywhere;
}
#footer .footer-col h5 { font-size: 11px; margin-bottom: 12px; }
#footer .footer-bottom { padding: 16px 0 0; }
}
@media (max-width: 380px) {
#footer { padding: 40px 12px 24px; }
#footer .footer-links { gap: 22px 10px; }
#footer .footer-col a { font-size: 12.5px; }
}
/* ── Collections mega menu (desktop) ── */
.nav-item-has-mega { position: static; display: inline-flex; align-items: center; }
.mega-caret {
display: inline-block;
margin-left: 4px;
font-size: 9px;
transition: transform .25s ease;
opacity: 0.7;
}
/* caret rotation handled by ::after in theme update block below */
.nav-item-has-mega:hover .mega-caret { transform: none; }
.nav-mega {
position: absolute;
left: 0; right: 0;
top: 100%;
background: rgba(0, 0, 0, 0.98);
backdrop-filter: blur(14px);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
box-shadow: 0 20px 40px -20px rgba(11,52,41,0.25);
padding: 36px 60px 40px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .25s ease, transform .25s ease, visibility .25s;
z-index: 50;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.nav-item-has-mega:hover .nav-mega,
.nav-item-has-mega:focus-within .nav-mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-mega-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
/* Use CSS variable set by Blade based on category count, fallback to 4 */
grid-template-columns: repeat(var(--mega-cols, 4), 1fr);
gap: 32px 40px;
}
/* When many categories exist, allow columns to auto-fill for best fit */
.nav-mega-inner.mega-grid-auto {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.mega-col { min-width: 0; }
.mega-title {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(201,168,76,0.3);
}
.mega-link {
display: block;
font-family: var(--font-body);
font-size: 13.5px;
letter-spacing: 0.07em;
color: rgba(255,255,255,0.82);
padding: 8px 0;
text-decoration: none;
position: relative;
transition: color .2s ease, padding-left .2s ease;
}
.mega-link:hover { color: var(--gold-dim); padding-left: 6px; }
.mega-sub {
display: block;
margin: 4px 0 10px 10px;
padding-left: 12px;
border-left: 1px solid rgba(201,168,76,0.3);
}
.mega-sub a {
display: block;
font-size: 14.5px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.922);
padding: 5px 0;
text-decoration: none;
transition: color .2s ease, padding-left .2s ease;
}
.mega-sub a:hover { color: var(--gold-dim); padding-left: 4px; }
/* Mega menu scrollbar styling */
.nav-mega::-webkit-scrollbar { width: 6px; }
.nav-mega::-webkit-scrollbar-track { background: transparent; }
.nav-mega::-webkit-scrollbar-thumb {
background: rgba(201,168,76,0.3);
border-radius: 3px;
}
.nav-mega::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.5); }
/* hide mega menu on tablet/mobile */
@media (max-width: 960px) {
.nav-mega { display: none !important; }
.mega-caret { display: none; }
}
/* ── Cart qty redesign (overrides product-detail.css) ── */
.line-actions .qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 999px;
height: 40px;
padding: 0 4px;
background: var(--cream);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 3px rgba(11,52,41,0.06);
}
.line-actions .qty-btn {
width: 32px; height: 32px;
border-radius: 50%;
background: transparent;
border: none;
font-family: var(--font-display);
font-size: 18px; line-height: 1;
color: var(--charcoal);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s ease, color .2s ease, transform .15s ease;
}
.line-actions .qty-btn:hover {
background: var(--charcoal);
color: var(--gold);
}
.line-actions .qty-btn:active { transform: scale(0.92); }
.line-actions .qty-val {
min-width: 32px;
text-align: center;
font-family: var(--font-price);
font-weight: 600;
font-size: 14px;
color: var(--charcoal);
}
/* ===== nav.css ===== */
/* ============================================================
Responsive navbar overrides for Vibhaa Designs
Loaded AFTER style.css so these rules win.
============================================================ */
/* Stop the whole page from scrolling sideways on phones */
html, body { max-width: 100%; overflow-x: hidden; }
#site { max-width: 100vw; overflow-x: hidden; }
#navbar { max-width: 100vw; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
#navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 18px 2rem;
min-height: 90px;
flex-wrap: nowrap;
}
#navbar .nav-center { flex: 0 0 auto; margin-left: 2rem; }
#navbar .nav-links {
display: flex;
align-items: center;
gap: 1.75rem;
flex: 1 1 auto;
justify-content: center;
}
#navbar .nav-right {
display: flex;
align-items: center;
gap: 1rem;
flex: 0 0 auto;
}
#navbar .nav-link {
font-family: 'Jost', sans-serif;
font-size: 15px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
position: relative;
padding: 0.25rem 0;
transition: color 0.25s ease;
}
#navbar .nav-link.active::after,
#navbar .nav-link:hover::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: currentColor;
opacity: 0.75;
}
#navbar .nav-icon { padding: 0.25rem; display: inline-flex; }
#navbar .nav-icon::after { display: none !important; }
/* Nav badges for cart and wishlist counts */
.nav-icon {
position: relative;
}
.nav-badge {
position: absolute;
top: -6px;
right: -8px;
background: var(--gold, #C9A84C);
color: var(--charcoal, #1A1A1A);
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
line-height: 1;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--cream, #F5F0E8);
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
transition: transform 0.2s ease;
}
.nav-badge.show {
display: flex !important;
}
.nav-badge.pulse {
animation: badgePulse 0.4s ease;
}
@keyframes badgePulse {
0% { transform: scale(0.8); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Hamburger toggle — hidden on desktop */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 26px;
height: 18px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
z-index: 1001;
}
.nav-toggle span {
display: block;
height: 1.5px;
width: 100%;
background: currentColor;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-backdrop {
position: fixed; inset: 0;
background: rgba(20, 30, 22, 0.45);
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
z-index: 998;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }
/* ===== Tablet ===== */
@media (max-width: 960px) {
#navbar .nav-links { gap: 1.1rem; font-size: 15px;}
#navbar .nav-right { gap: 0.6rem; }
}
/* ===== Mobile ===== */
@media (max-width: 760px) {
#navbar {
padding: 14px 1rem;
min-height: 90px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
}
#navbar .nav-center { justify-self: center; }
.nav-toggle { display: flex; justify-self: start; color: inherit; }
#navbar .nav-right { gap: 0.4rem; justify-self: end; }
#navbar .nav-right .nav-icon svg { width: 20px; height: 20px; }
/* Slide-in drawer */
#navbar .nav-links {
position: fixed;
top: 0; left: 0;
height: 100vh;
height: 100dvh;
width: min(78vw, 320px);
background: transparent;
color: #f4e7c9;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 0;
padding: 5rem 1.75rem 2rem;
box-shadow: 4px 0 30px rgba(0,0,0,0.15);
transform: translateX(-100%);
transition: transform 0.35s ease;
z-index: 999;
pointer-events: auto;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#navbar .nav-links.open { transform: translateX(0); }
#navbar .nav-links .nav-link {
width: 100%;
padding: 1rem 0;
font-size: 0.95rem;
letter-spacing: 0.16em;
border-bottom: 1px solid rgba(31,42,34,0.12);
color: #f0db57;
pointer-events: auto;
cursor: pointer;
transition: color 0.3s ease, background-color 0.2s ease;
display: block;
padding: 1rem 1.75rem;
margin: 0 -1.75rem;
}
#navbar .nav-links .nav-link:hover {
background-color: rgba(212,175,55,0.08);
color: var(--gold);
}
#navbar .nav-links .nav-link::after { display: none; }
#navbar .nav-links .nav-link.active {
color: var(--gold);
background-color: rgba(212,175,55,0.1);
font-weight: 500;
}
}
/* ===== Footer responsive polish ===== */
@media (max-width: 760px) {
#footer .footer-top {
flex-direction: column;
gap: 2rem;
padding: 2.5rem 1.25rem 1.5rem;
}
#footer .footer-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.75rem 1.25rem;
width: 100%;
}
#footer .footer-bottom {
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem;
text-align: center;
}
#footer .footer-bottom p {
position: static;
transform: none;
}
}
/* ─────────────────────────────────────────────
NAV FIX — drawer was trapped under backdrop
because #navbar (z-index:100) creates its own
stacking context, so the drawer inside it
could never escape above the backdrop (998).
Raise navbar and lower backdrop on mobile.
───────────────────────────────────────────── */
#navbar { z-index: 1000; }
.nav-backdrop { z-index: 900; }
#navbar .nav-links { z-index: 1002; }
.nav-toggle { z-index: 1003; }
/* Slightly bigger, more readable mobile drawer links */
@media (max-width: 760px) {
#navbar .nav-links .nav-link {
font-size: 15px;
padding: 1.05rem 1.75rem;
}
#navbar .nav-center .brand-name { font-size: 1.8rem; }
#navbar .nav-center .brand-sub { font-size: 1.0rem; }
}
/* ── Mobile drawer font moderation (override earlier bump) ── */
@media (max-width: 760px) {
#navbar .nav-links .nav-link {
font-size: 15px !important;
letter-spacing: 0.14em;
padding: 0.85rem 1.5rem !important;
}
#navbar .nav-center .brand-name { font-size: 1.8rem; }
#navbar .nav-center .brand-sub { font-size: 1.0rem; }
/* Logo image inside header on mobile */
/* Mega menu is shown inline in the mobile drawer */
.nav-item-has-mega { display: block; width: 100%; }
.nav-item-has-mega .mega-caret { display: inline-block; transform: none !important; }
.nav-item-has-mega .nav-mega {
display: block !important;
position: static;
opacity: 1;
visibility: visible;
transform: none;
width: calc(100% + 3rem);
margin: 0 -1.5rem 0.35rem;
padding: 0.25rem 1.5rem 0.95rem;
background: transparent;
border: 0;
box-shadow: none;
}
.nav-item-has-mega .nav-mega-inner {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
}
.nav-item-has-mega .mega-title {
margin: 0.9rem 0 0.35rem;
padding: 0;
border: 0;
font-size: 0.68rem;
letter-spacing: 0.18em;
color: #b8893a;
}
.nav-item-has-mega .mega-link {
padding: 0.28rem 0;
font-size: 0.82rem;
letter-spacing: 0.04em;
color: #f4e7c9;
}
.nav-item-has-mega .mega-sub {
display: block;
margin: 0.1rem 0 0.35rem 0.75rem;
padding-left: 0.75rem;
}
.nav-item-has-mega .mega-sub a {
display: block;
padding: 0.22rem 0;
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.922);
}
}
/* ── Collapsible mobile mega menu ── */
.mega-col-head, .mega-parent-head { display: contents; }
.mega-col-toggle, .mega-sub-toggle { display: none; }
.mega-title-link { text-decoration: none; color: inherit; display: block; }
@media (max-width: 760px) {
.nav-item-has-mega .mega-col-head,
.nav-item-has-mega .mega-parent-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
}
.nav-item-has-mega .mega-title-link { flex: 1; }
.nav-item-has-mega .mega-parent-head .mega-link { flex: 1; }
.nav-item-has-mega .mega-col-toggle,
.nav-item-has-mega .mega-sub-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
background: transparent;
color: rgba(244,231,201,0.55);
font-size: 0.75rem;
line-height: 1;
cursor: pointer;
flex: 0 0 auto;
padding: 0;
transition: transform 0.25s ease, color 0.2s ease;
}
.nav-item-has-mega .mega-col-toggle.open,
.nav-item-has-mega .mega-sub-toggle.open {
transform: rotate(90deg);
color: var(--gold);
}
/* Collapsed by default on mobile */
.nav-item-has-mega .mega-col-body { display: none; }
.nav-item-has-mega .mega-col.open .mega-col-body { display: block; }
.nav-item-has-mega .mega-parent .mega-sub { display: none; }
.nav-item-has-mega .mega-parent.open .mega-sub { display: block; }
}
/* ─────────────────────────────────────────────
DESKTOP NAV CENTERING FIX
Use 3-column grid so the nav-links column is
always centred on the screen regardless of
brand width on the left.
───────────────────────────────────────────── */
@media (min-width: 761px) {
#navbar {
display: grid !important;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.25rem;
}
#navbar .nav-center {
grid-column: 1;
justify-self: start;
margin-left: 0;
}
#navbar .nav-links {
grid-column: 2;
justify-self: center;
justify-content: center;
flex: 0 1 auto;
}
#navbar .nav-right {
grid-column: 3;
justify-self: end;
}
}
/* ============================================================
NAVBAR SEARCH — expands inline inside the header
============================================================ */
.nav-search { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.nav-search-trigger { background: transparent; border: 0; cursor: pointer; color: inherit; flex: 0 0 auto; }
.nav-search-trigger::after { display: none !important; }
.nav-search-panel {
position: relative;
width: 0;
max-width: min(340px, 42vw);
color: #1a1a1a;
opacity: 0;
visibility: hidden;
overflow: visible;
transform: scaleX(0.96);
transform-origin: right center;
transition: width .22s ease, opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 1100;
}
.nav-search.open .nav-search-panel {
width: min(340px, 42vw);
opacity: 1;
visibility: visible;
transform: scaleX(1);
}
.nav-search-inner {
display: flex; align-items: center; gap: 8px;
width: 100%;
border: 1px solid rgba(26,26,26,0.12);
border-radius: 999px;
padding: 7px 10px;
background: rgba(255,255,255,0.92);
box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.nav-search-inner:focus-within { border-color: var(--gold, #C9A84C); background: #fff; }
.nav-search-ic { color: rgba(26,26,26,0.55); flex-shrink: 0; }
.nav-search.open .nav-search-trigger { display: none !important; }
#navSearchInput {
flex: 1; border: 0; outline: 0; background: transparent;
font-family: 'Jost', sans-serif; font-size: 0.9rem;
letter-spacing: 0.04em; color: #1a1a1a; min-width: 0;
}
#navSearchInput::-webkit-search-cancel-button { display: none; }
.nav-search-close {
background: transparent; border: 0; cursor: pointer;
font-size: 1.3rem; line-height: 1; color: rgba(26,26,26,0.55);
padding: 0 2px;
}
.nav-search-close:hover { color: #1a1a1a; }
.nav-search-suggestions {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: min(340px, 86vw);
max-height: 60vh;
overflow-y: auto;
display: none;
background: #fff;
border: 1px solid rgba(26,26,26,0.08);
border-radius: 10px;
box-shadow: 0 18px 50px rgba(0,0,0,0.14);
padding: 8px;
}
.nav-search-suggestions.show { display: block; }
.nav-sg-item {
display: flex; align-items: center; gap: 12px;
padding: 8px; border-radius: 8px;
text-decoration: none; color: inherit;
transition: background .15s ease;
}
.nav-sg-item:hover, .nav-sg-item:focus { background: #f3efe6; outline: none; }
.nav-sg-thumb {
width: 44px; height: 44px; border-radius: 6px; overflow: hidden;
background: #ece6d8; flex-shrink: 0;
}
.nav-sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-sg-meta { display: flex; flex-direction: column; min-width: 0; }
.nav-sg-name {
font-family: 'Cormorant Garamond', serif; font-size: 0.98rem;
color: #1a1a1a; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-sg-sub {
font-family: 'Jost', sans-serif; font-size: 0.72rem;
letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(26,26,26,0.55); margin-top: 2px;
}
.nav-sg-empty {
padding: 14px 10px; font-family: 'Jost', sans-serif;
font-size: 0.82rem; color: rgba(26,26,26,0.6); text-align: center;
}
@media (max-width: 820px) {
#navbar.search-active .nav-center { display: none; }
#navbar.search-active { grid-template-columns: auto minmax(0, 1fr); }
#navbar.search-active .nav-right { width: 100%; min-width: 0; }
#navbar.search-active .nav-search { flex: 1 1 auto; width: 100%; }
#navbar.search-active .nav-search.open .nav-search-panel { width: 100%; max-width: none; }
#navbar.search-active .nav-search.open ~ .nav-link { display: none; }
.nav-search-panel { max-width: min(300px, 48vw); }
.nav-search.open .nav-search-panel { width: min(300px, 48vw); }
}
/* ===== pages.css ===== */
/* ─────────────────────────────────────────────
VIBHAA DESIGNS — Shared styles for new pages
(About, Contact, Wishlist, Cart, Profile, Checkout)
───────────────────────────────────────────── */
/* Shop header (also used on About / Contact / etc.) — duplicated from
products.css so pages that don't load products.css still clear the
fixed 72px navbar instead of slipping underneath it. */
.shop-header {
position: relative;
padding: 160px 60px 70px;
background:
linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 100%),
url('../images/banner-all.png') top center / cover no-repeat;
color: var(--cream);
text-align: center;
border-bottom: 1px solid rgba(201,168,76,0.18);
min-height: 420px;
}
@media (max-width: 600px) {
.shop-header {
background:
linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 100%),
url('../images/banner-all-mobile.png') top center / cover no-repeat;
min-height: 320px;
}
}
.shop-header-inner { max-width: 900px; margin: 0 auto; }
.shop-header .breadcrumbs {
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(245,240,232,0.55); margin-bottom: 32px;
}
.shop-header .breadcrumbs a { color: var(--gold); transition: color .3s ease; text-decoration: none; }
.shop-header .breadcrumbs a:hover { color: var(--gold-light); }
.shop-header .breadcrumbs .crumb-current { color: rgba(245,240,232,0.85); font-weight: 400; }
.shop-header .crumb-sep { margin: 0 12px; color: rgba(245,240,232,0.3); }
/* Product page title below breadcrumb */
.product-page-title {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 300;
line-height: 1.15;
color: var(--cream);
margin: 0;
letter-spacing: -0.01em;
}
.shop-header .section-eyebrow { color: var(--gold); margin-bottom: 18px; display: block; }
.shop-header .shop-title {
font-family: var(--font-display);
font-size: clamp(46px, 5.5vw, 78px);
font-weight: 300; line-height: 1.05;
color: var(--cream); margin-bottom: 22px;
}
.shop-header .shop-title em { font-style: italic; color: var(--gold); }
.shop-header .shop-sub {
font-family: var(--font-body); font-size: 15px; line-height: 1.7;
color: rgba(245,240,232,0.78); max-width: 620px; margin: 0 auto;
}
@media (max-width: 900px) {
.shop-header { padding: 130px 24px 50px; }
.product-page-title { font-size: clamp(32px, 5vw, 48px); }
}
}
@media (max-width: 600px) {
.shop-header { padding: 110px 18px 40px; }
.shop-header .breadcrumbs { margin-bottom: 22px; font-size: 10px; }
.product-page-title { font-size: clamp(28px, 6vw, 40px); letter-spacing: -0.02em; }
}
/* Inner-page section */
.page-section {
padding: 60px 60px 100px;
background-image:
url("../images/text.png");
background-repeat: repeat;
background-size: 350px;
min-height: 50vh;
}
.page-inner { max-width: 1100px; margin: 0 auto; }
.page-narrow { max-width: 760px; margin: 0 auto; }
.page-title-row {
display: flex; justify-content: space-between; align-items: baseline;
flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.page-title-row h2 {
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 300; color: var(--charcoal);
}
.muted-count { font-size: 12px; color: var(--gold-dim); letter-spacing: 0.2em; text-transform: uppercase; }
/* ─── EMPTY ─── */
.empty-page {
text-align: center;
padding: 80px 20px;
}
.empty-page p {
font-family: var(--font-display); font-size: 22px; color: var(--charcoal); margin-bottom: 24px;
}
/* ─── ABOUT ─── */
.about-hero {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
margin-bottom: 80px;
}
.about-hero h1 {
font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 64px);
font-weight: 300; line-height: 1.08; color: var(--charcoal); margin-bottom: 20px;
}
.about-hero h1 em { font-style: italic; color: var(--gold-dim); }
.about-hero p { font-size: 15px; line-height: 1.9; color: var(--text-muted); margin-bottom: 16px; }
.about-art {
aspect-ratio: 4/5; background: linear-gradient(160deg, #0D3B2E, #1a5c44);
display: grid; place-items: center; border-radius: 2px;
}
.about-art svg { opacity: .6; }
/* Mission & Vision Section - Wider Layout */
.mission-vision-section {
max-width: 1400px;
margin: 40px auto 60px;
padding: 0 20px;
}
.mission-vision-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.mv-card {
padding: 40px 36px;
background: var(--cream-warm);
border-top: 2px solid var(--gold);
border-radius: 2px;
}
.mv-card h3 {
font-family: var(--font-display);
font-size: 26px;
font-weight: 400;
color: var(--charcoal);
margin-bottom: 16px;
letter-spacing: 0.5px;
}
.mv-card p {
font-size: 16px;
line-height: 1.85;
color: var(--text-muted);
}
/* Core Values Section */
.core-values-section {
max-width: 1400px;
margin: 60px auto 80px;
padding: 0 20px;
}
.section-heading {
font-family: var(--font-display);
font-size: 42px;
font-weight: 400;
color: var(--charcoal);
text-align: center;
margin-bottom: 50px;
letter-spacing: 0.5px;
}
.section-heading em {
font-style: italic;
color: var(--gold);
}
.core-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.core-value-card {
padding: 36px 28px;
background: #ffffff;
border: 1px solid rgba(201, 168, 76, 0.2);
border-radius: 4px;
transition: all 0.3s ease;
position: relative;
}
.core-value-card:hover {
border-color: var(--gold);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
transform: translateY(-4px);
}
.core-value-icon {
font-size: 32px;
color: var(--gold);
margin-bottom: 16px;
text-align: center;
}
.core-value-card h4 {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
color: var(--charcoal);
margin-bottom: 12px;
text-align: center;
letter-spacing: 0.3px;
}
.core-value-card p {
font-size: 14.5px;
line-height: 1.75;
color: var(--text-muted);
text-align: center;
}
/* Old values-grid (keeping for backward compatibility if used elsewhere) */
.values-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 28px; margin-top: 40px;
}
.value-card {
padding: 32px 24px; background: var(--cream-warm);
border-top: 1px solid var(--gold);
}
.value-card h4 {
font-family: var(--font-display); font-size: 22px; font-weight: 400;
color: var(--charcoal); margin-bottom: 10px;
}
.value-card p { font-size: 13px; line-height: 1.8; color: var(--text-muted); }
/* ─── CONTACT / CHECKOUT / PROFILE forms ─── */
.form-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold-dim); font-weight: 500;
}
.form-field input,
.form-field textarea,
.form-field select {
font-family: var(--font-body); font-size: 14px; color: var(--charcoal);
background: var(--white); border: 1px solid var(--border);
padding: 14px 16px; border-radius: 2px;
transition: border-color .25s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { outline: none; border-color: var(--gold); }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-submit {
height: 52px; padding: 0 36px;
background: var(--charcoal); color: var(--cream); border: none;
font-family: var(--font-body); font-size: 11px; font-weight: 500;
letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
transition: background .25s ease;
}
.form-submit:hover { background: var(--green-mid); }
.contact-grid {
display: grid; grid-template-columns: 2fr 1fr; gap: 60px;
}
.contact-info h3 {
font-family: var(--font-display); font-size: 22px; font-weight: 400;
color: var(--charcoal); margin-bottom: 14px;
}
.contact-info p { font-size: 14px; line-height: 1.9; color: var(--text-muted); margin-bottom: 18px; }
.contact-info .info-row { margin-bottom: 14px; font-size: 16px; font-weight: 400; }
.contact-info .info-row strong {
display: block; font-size: 14px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--gold-dim); font-weight: 500; margin-bottom: 4px;
}
/* ─── CART / WISHLIST item rows ─── */
.line-list { display: flex; flex-direction: column; gap: 18px; }
.line {
display: grid; grid-template-columns: 90px 1fr auto;
gap: 20px; align-items: center;
padding: 18px; background: var(--white);
border: 1px solid var(--border);
}
.line-img {
width: 90px; height: 110px; background: var(--cream-warm);
overflow: hidden; display: grid; place-items: center;
}
.line-img img { width: 100%; height: 100%; object-fit: cover; }
.line-body h4 {
font-family: var(--font-display); font-size: 18px; font-weight: 400;
color: var(--charcoal); margin-bottom: 6px;
}
.line-meta {
font-size: 12px; color: var(--text-muted);
letter-spacing: 0.06em; margin-bottom: 8px;
}
.line .price-block { margin-top: 0; }
.line-actions {
display: flex; align-items: center; gap: 14px;
}
.line-actions .qty { height: 38px; }
.line-actions .qty-btn { width: 32px; font-size: 16px; }
.line-actions .qty-val { width: 32px; font-size: 13px; }
.icon-btn {
background: transparent; border: none; cursor: pointer;
color: var(--text-muted); padding: 6px;
transition: color .25s ease;
}
.icon-btn:hover { color: var(--red-sale); }
/* Summary card */
.summary {
background: var(--cream-warm); padding: 28px;
border-top: 1px solid var(--gold);
}
.summary h3 {
font-family: var(--font-display); font-size: 22px; font-weight: 400;
color: var(--charcoal); margin-bottom: 20px;
}
.summary-row {
display: flex; justify-content: space-between;
padding: 10px 0; font-size: 14px;
border-bottom: 1px solid rgba(201,168,76,0.08);
}
.summary-row.total {
border-bottom: none; padding-top: 16px;
font-family: var(--font-price); font-weight: 600;
font-size: 18px; color: var(--charcoal);
}
.summary-row .val { font-family: var(--font-price); font-weight: 500; }
.two-col {
display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px;
}
/* ─── PROFILE ─── */
.profile-grid {
display: grid; grid-template-columns: 280px 1fr; gap: 40px;
}
.profile-card {
background: var(--cream-warm); padding: 28px;
border-top: 1px solid var(--gold);
text-align: center;
}
.profile-avatar {
width: 88px; height: 88px; border-radius: 50%;
background: var(--charcoal); color: var(--gold);
display: grid; place-items: center;
margin: 0 auto 16px;
font-family: var(--font-display); font-size: 32px; font-weight: 500;
}
.profile-name {
font-family: var(--font-display); font-size: 22px; font-weight: 400;
color: var(--charcoal); margin-bottom: 6px;
}
.profile-email { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }
.profile-actions { display: flex; flex-direction: column; gap: 10px; }
.profile-actions a {
display: block; padding: 12px;
border: 1px solid var(--charcoal); color: var(--charcoal);
font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
transition: background .25s ease, color .25s ease;
}
.profile-actions a:hover { background: var(--charcoal); color: var(--cream); }
.section-block {
margin-bottom: 40px; padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.section-block:last-child { border-bottom: none; }
.section-block h3 {
font-family: var(--font-display); font-size: 22px; font-weight: 400;
color: var(--charcoal); margin-bottom: 18px;
}
.detail-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-rows .row { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.detail-rows .row label {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold-dim); font-weight: 500;
}
.detail-rows .row span { font-size: 14px; color: var(--charcoal); }
.address-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.address-card {
background: var(--white); border: 1px solid var(--border);
padding: 18px; position: relative;
}
.address-card .addr-label {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold-dim); font-weight: 500; margin-bottom: 8px;
}
.address-card p { font-size: 13px; line-height: 1.7; color: var(--charcoal); }
/* Orders accordion */
.order-card {
background: var(--white); border: 1px solid var(--border);
margin-bottom: 12px;
}
.order-head {
display: grid; grid-template-columns: 1.4fr 1fr 1fr auto;
gap: 16px; padding: 16px 20px; cursor: pointer;
align-items: center; transition: background .25s ease;
}
.order-head:hover { background: var(--cream-warm); }
.order-head .oh-label {
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold-dim); display: block; margin-bottom: 2px;
}
.order-head .oh-val { font-size: 13px; color: var(--charcoal); font-family: var(--font-price); font-weight: 500; }
.order-chev { font-size: 16px; color: var(--gold-dim); transition: transform .25s ease; }
.order-card.open .order-chev { transform: rotate(180deg); }
.order-body { display: none; padding: 0 20px 20px; }
.order-card.open .order-body { display: block; }
.order-item {
display: grid; grid-template-columns: 60px 1fr auto;
gap: 14px; align-items: center;
padding: 12px 0; border-top: 1px solid var(--border);
font-size: 13px;
}
.order-item .oi-thumb {
width: 60px; height: 76px; background: var(--cream-warm);
display: grid; place-items: center;
}
.order-item .oi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-item .oi-name { font-family: var(--font-display); font-size: 16px; color: var(--charcoal); margin-bottom: 4px; }
.order-item .oi-meta { font-size: 11px; color: var(--text-muted); }
.order-item .oi-price { font-family: var(--font-price); font-weight: 600; }
/* Success */
.success-card {
background: var(--cream-warm); padding: 60px 40px;
text-align: center; border-top: 1px solid var(--gold);
}
.success-card h2 {
font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px);
font-weight: 300; color: var(--charcoal); margin-bottom: 12px;
}
.success-card .order-id {
font-family: var(--font-price); font-weight: 600; font-size: 14px;
letter-spacing: 0.08em; color: var(--gold-dim); margin-bottom: 24px;
}
.success-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }
.success-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.success-actions .view-all-btn { padding: 13px 28px; }
/* Responsive */
@media (max-width: 1024px) {
.page-section { padding: 40px 24px 80px; }
.about-hero, .contact-grid, .two-col, .profile-grid {
grid-template-columns: 1fr; gap: 32px;
}
.values-grid { grid-template-columns: 1fr 1fr; }
.mission-vision-grid { grid-template-columns: 1fr; gap: 28px; }
.core-values-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.section-heading { font-size: 36px; }
}
@media (max-width: 640px) {
.page-section { padding: 30px 18px 60px; }
.form-grid { grid-template-columns: 1fr; }
.values-grid, .address-grid, .detail-rows { grid-template-columns: 1fr; }
.line { grid-template-columns: 70px 1fr; gap: 14px; }
.line-img { width: 70px; height: 90px; }
.line-actions { grid-column: 1 / -1; justify-content: space-between; padding-top: 8px; border-top: 1px dashed var(--border); }
.order-head { grid-template-columns: 1fr auto; row-gap: 8px; }
.order-head > div:nth-child(2),
.order-head > div:nth-child(3) { display: none; }
.order-item { grid-template-columns: 50px 1fr auto; font-size: 12px; }
.summary { padding: 22px 18px; }
}
/* Readability bumps for About / Contact / Cart / Wishlist / Profile / Checkout */
body, p, li, label, input, textarea, select, button { font-size: 15px; }
h1 { font-size: clamp(34px, 4.4vw, 56px); }
h2 { font-size: clamp(26px, 3vw, 40px); }
h3 { font-size: clamp(20px, 2.2vw, 28px); }
small, .muted, .note { font-size: 13px; }
/* ===== products.css ===== */
/* ─────────────────────────────────────────────
VIBHAA DESIGNS — Product Listing Page (UPDATED)
Adds: mobile filter drawer, wishlist heart on card,
readable price font, MRP/discount block,
Buy Now + Add to Cart on hover.
───────────────────────────────────────────── */
/* Nav always solid on inner pages */
#navbar.nav-solid {
background: rgba(245, 240, 232, 0.96);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--border);
}
#navbar.nav-solid .nav-link { color: var(--charcoal); }
#navbar.nav-solid .nav-link:hover { color: var(--gold-dim); }
#navbar.nav-solid .brand-name { color: var(--charcoal); }
/* ─── SHOP HEADER ─── */
.shop-header {
position: relative;
padding: 160px 60px 70px;
background:
linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 100%),
url('../images/banner-all.png') top center / cover no-repeat;
color: var(--cream);
text-align: center;
border-bottom: 1px solid rgba(201,168,76,0.18);
min-height: 420px;
}
@media (max-width: 600px) {
.shop-header {
background:
linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 100%),
url('../images/banner-all-mobile.png') top center / cover no-repeat;
min-height: 320px;
}
}
.shop-header-inner { max-width: 900px; margin: 0 auto; }
.breadcrumbs {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245,240,232,0.55);
margin-bottom: 32px;
}
.breadcrumbs a { color: var(--gold); transition: color .3s ease; }
.breadcrumbs a:hover { color: var(--gold-light); }
.crumb-sep { margin: 0 12px; color: rgba(245,240,232,0.3); }
.shop-header .section-eyebrow { color: var(--gold); margin-bottom: 18px; display: block; }
.shop-title {
font-family: var(--font-display);
font-size: clamp(46px, 5.5vw, 78px);
font-weight: 300;
line-height: 1.05;
color: var(--cream);
margin-bottom: 22px;
}
.shop-title em { font-style: italic; color: var(--gold); }
.shop-sub {
font-size: 14px;
color: rgba(245,240,232,0.65);
letter-spacing: 0.04em;
max-width: 520px;
margin: 0 auto;
line-height: 1.8;
}
/* ─── CATEGORY STRIP ─── */
.cat-strip {
position: sticky;
top: 72px;
z-index: 50;
background: var(--cream);
border-bottom: 1px solid var(--border);
padding: 18px 60px;
}
.cat-strip-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
gap: 10px;
overflow-x: auto;
scrollbar-width: none;
}
.cat-strip-inner::-webkit-scrollbar { display: none; }
.cat-pill {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border: 1px solid var(--border);
background: transparent;
border-radius: 999px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--charcoal);
cursor: pointer;
transition: all .3s var(--ease-butter);
}
.cat-pill em { font-style: normal; font-size: 10px; color: var(--gold-dim); letter-spacing: 0; }
.cat-pill:hover { border-color: var(--gold); color: var(--gold-dim); }
.cat-pill.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.cat-pill.active em { color: var(--gold); }
/* ─── SHOP LAYOUT ─── */
.shop { padding: 50px 60px 100px;
background-image:
url("../images/text.png");
background-repeat: repeat;
background-size: 350px; }
.shop-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 56px; }
/* ─── FILTERS ─── */
.filters {
position: sticky; top: 160px; align-self: start;
max-height: calc(100vh - 180px); overflow-y: auto; padding-right: 8px;
}
.filters-head {
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: 18px; margin-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.filters-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--charcoal); }
.clear-link {
background: none; border: none; font-family: var(--font-body);
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: #800000;
font-weight: 500;
cursor: pointer; transition: color .3s ease;
}
.clear-link:hover { color: var(--charcoal); }
.filter-group { padding: 18px 0; border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: none; }
.filter-group h4 {
font-family: var(--font-body); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 14px;
}
.check {
display: flex; align-items: center; gap: 12px;
padding: 7px 0; font-size: 13px; color: var(--charcoal);
cursor: pointer; transition: color .25s ease;
}
.check:hover { color: var(--gold-dim); }
.check input {
appearance: none; -webkit-appearance: none;
width: 14px; height: 14px;
border: 1px solid rgba(26,26,26,0.3); border-radius: 2px;
cursor: pointer; position: relative; flex-shrink: 0; transition: all .2s ease;
}
.check input:checked { background: var(--charcoal); border-color: var(--charcoal); }
.check input:checked::after {
content: ''; position: absolute; left: 3px; top: 0;
width: 5px; height: 9px;
border: solid var(--gold); border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.price-range { padding-top: 4px; }
.price-row {
display: flex; justify-content: space-between;
font-family: var(--font-price); font-weight: 600;
font-size: 14px; margin-bottom: 10px; color: var(--charcoal);
}
input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: rgba(26,26,26,0.2); }
input[type="range"]::-moz-range-track { height: 1px; background: rgba(26,26,26,0.2); }
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 14px; height: 14px; border-radius: 50%;
background: var(--gold); border: 2px solid var(--charcoal); margin-top: -7px;
}
input[type="range"]::-moz-range-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: var(--gold); border: 2px solid var(--charcoal);
}
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw {
width: 26px; height: 26px; border-radius: 50%;
background: var(--c); border: 1px solid rgba(26,26,26,0.15);
cursor: pointer; position: relative;
transition: transform .25s ease, box-shadow .25s ease;
}
.sw:hover { transform: scale(1.1); }
.sw.active { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--gold); }
/* ─── RESULTS ─── */
.results-bar {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 24px; margin-bottom: 32px;
border-bottom: 1px solid var(--border);
gap: 16px; flex-wrap: wrap;
}
.count { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
color: #800000;
font-weight: 500;
/* color: var(--gold-dim); */
}
.count span { color: var(--charcoal); font-weight: 500; }
.sort-wrap { display: flex; align-items: center; gap: 12px; }
.sort-wrap label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: #800000;
font-weight: 500;
/* color: var(--gold-dim); */
}
.sort-wrap select {
appearance: none; -webkit-appearance: none;
background: transparent;
border: 1px solid rgb(201 168 76 / 73%);
padding: 8px 36px 8px 14px;
font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; color: var(--charcoal);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center;
transition: border-color .25s ease;
}
.sort-wrap select:hover { border-color: var(--gold); }
.plp-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 32px 28px !important; }
/* Empty */
.empty-state { text-align: center; padding: 0px 0px; }
.empty-state .gold-rule { margin-bottom: 28px; }
.empty-state p { font-family: var(--font-display); font-size: 22px; color: var(--charcoal); margin-bottom: 28px; }
/* ─── PAGINATION ─── */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--border);
list-style: none;
}
.pagination .page-item {
list-style: none;
}
.pagination .page-link {
min-width: 44px;
height: 44px;
padding: 0 16px;
background: transparent;
border: 1px solid var(--border);
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0.04em;
color: var(--charcoal);
cursor: pointer;
transition: all 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 2px;
}
.pagination .page-link:hover:not(.disabled) {
border-color: var(--gold);
color: var(--gold-dim);
background: rgba(201, 168, 76, 0.05);
}
.pagination .page-item.active .page-link {
background: var(--charcoal);
border-color: var(--charcoal);
color: var(--gold);
font-weight: 500;
}
.pagination .page-item.disabled .page-link {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.pagination .page-link svg {
width: 18px;
height: 18px;
}
/* Previous/Next arrows */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
font-family: var(--font-display);
font-size: 20px;
line-height: 1;
}
/* Ellipsis (...) */
.pagination .page-item.disabled .page-link {
border: none;
background: transparent;
}
/* Mobile responsive */
@media (max-width: 768px) {
.pagination {
gap: 4px;
margin-top: 32px;
padding-top: 24px;
padding-left: 4px;
padding-right: 4px;
}
.pagination .page-link {
min-width: 36px;
height: 36px;
padding: 0 8px;
font-size: 13px;
}
}
/* ─── WISHLIST HEART ON CARD ─── */
.card-wish {
position: absolute; top: 12px; right: 12px;
width: 36px; height: 36px; border-radius: 50%;
border: none; cursor: pointer;
background: rgba(245,240,232,0.95);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
z-index: 3; transition: transform .2s ease, background .2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.card-wish:hover { transform: scale(1.08); background: var(--cream); }
.card-wish svg { display: block; }
/* Buy Now overlay button (sits above quick-add) */
.product-hover-action .quick-add + .quick-add { border-top: 1px solid rgba(255,255,255,0.06); }
/* ─── MOBILE FILTER DRAWER ─── */
.filter-toggle-bar {
display: none;
gap: 12px;
margin-bottom: 18px;
}
.filter-toggle-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: var(--charcoal); color: var(--cream);
border: none; cursor: pointer;
font-family: var(--font-body); font-size: 11px;
font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}
.filter-toggle-btn svg { display: block; }
.filter-backdrop {
position: fixed; inset: 0;
background: rgba(11,52,41,0.45);
z-index: 998; opacity: 0; pointer-events: none;
transition: opacity .3s ease;
}
.filter-backdrop.open { opacity: 1; pointer-events: auto; }
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
.shop { padding: 40px 24px 80px; }
.cat-strip { padding: 14px 24px; }
.shop-grid { grid-template-columns: 1fr; gap: 0; }
.plp-grid { grid-template-columns: repeat(2, 1fr) !important; }
.shop-header { padding: 130px 24px 50px; }
.filter-toggle-bar { display: flex; }
/* Filters become a slide-in drawer */
.filters {
position: fixed;
top: 0; bottom: 0; left: 0;
width: min(320px, 86vw);
max-height: none;
background: var(--cream);
z-index: 999;
padding: 24px 22px 80px;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .35s var(--ease-butter);
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}
.filters.open { transform: translateX(0); }
.filters-head { padding-top: 8px; }
.filters-head h3 { font-size: 24px; }
.filters-close {
background: none; border: none; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--charcoal);
padding: 0 4px;
}
}
@media (min-width: 1025px) {
.filters-close { display: none; }
}
@media (max-width: 640px) {
.shop-header { padding: 110px 18px 40px; }
.cat-strip { padding: 12px 18px; }
.shop { padding: 30px 18px 60px; }
.plp-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
.results-bar { flex-direction: column; gap: 14px; align-items: flex-start; }
.filters-head h3 { font-size: 20px; }
.page-btn { min-width: 36px; height: 36px; padding: 0 10px; font-size: 11px; }
.product-name { font-size: 15px; }
.price-now { font-size: 16px; }
.price-mrp { font-size: 12px; }
.price-discount { font-size: 11px; }
.card-wish { width: 32px; height: 32px; }
.product-hover-action { transform: none; position: static; }
.product-hover-action .quick-add { padding: 9px; font-size: 10px; letter-spacing: 0.14em; }
}
/* Readability bumps */
.product-card .product-name { font-size: 17px; }
.product-card .product-category { font-size: 12px; }
.filter-label, .filter-chip, .sort-select { font-size: 13px !important; }
/* ── Mobile filter drawer scroll fix ──
Lock body scroll behind the drawer and confine scrolling
to the drawer itself so the page underneath doesn't move. */
body.filter-open {
overflow: hidden !important;
width: 100%;
left: 0; right: 0;
}
@media (max-width: 1024px) {
.filters {
height: 100vh;
height: 100dvh;
max-height: 100dvh;
overflow-y: scroll !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
overscroll-behavior-y: contain;
padding-bottom: 120px; /* room above mobile browser chrome */
}
.filter-backdrop { touch-action: none; }
}
/* ─── UPDATES: search + empty-state fix ─── */
.empty-state.hidden,
.products-grid.hidden { display: none !important; }
.empty-state { padding: 50px 20px; }
.search-wrap {
position: relative;
display: flex;
align-items: center;
flex: 1 1 260px;
max-width: 360px;
min-width: 200px;
}
.search-wrap .search-ic {
position: absolute;
left: 12px;
color: var(--gold-dim);
pointer-events: none;
}
.search-wrap input[type="search"] {
width: 100%;
padding: 9px 32px 9px 34px;
background: transparent;
border: 1px solid var(--border);
font-family: var(--font-body);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--charcoal);
outline: none;
transition: border-color .25s ease;
border-radius: 0;
}
.search-wrap input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-wrap input[type="search"]::placeholder { color: rgba(26,26,26,0.4); letter-spacing: 0.06em; }
.search-wrap input[type="search"]:focus { border-color: var(--gold); }
.search-wrap .search-clear {
position: absolute;
right: 6px;
width: 22px; height: 22px;
border: none; background: transparent;
font-size: 18px; line-height: 1;
color: var(--gold-dim); cursor: pointer;
display: none;
}
.search-wrap .search-clear.show { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
.search-wrap { flex: 1 1 100%; max-width: 100%; }
}
/* ===== product-detail.css ===== */
/* ─────────────────────────────────────────────
VIBHAA DESIGNS — Product Detail Page (UPDATED)
Adds: image arrows, click-to-zoom,
wishlist (top-right), Buy Now,
MRP/discount, full mobile responsiveness.
───────────────────────────────────────────── */
.detail-header { padding: 130px 60px 40px; text-align: left; }
.detail-header .shop-header-inner { max-width: 1400px; margin: 0 auto; }
.detail { padding: 40px 60px 80px; background: var(--cream);
background-image:
url("../images/text.png");
background-repeat: repeat;
background-size: 350px;
}
.detail-grid {
max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: start;
}
/* ─── GALLERY ─── */
.gallery {
position: sticky;
top: 100px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.gallery-main-wrapper {
flex: 1;
position: relative;
}
.gallery-main {
position: relative;
aspect-ratio: 2/3;
max-width: 500px;
background: var(--cream-warm);
border-radius: 2px;
overflow: hidden;
cursor: zoom-in;
}
.gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Remove zoom lens - using modal instead */
.zoom-lens {
display: none !important;
}
/* Image Modal */
.image-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 9999;
align-items: center;
justify-content: center;
}
.image-modal.active {
display: flex;
}
.image-modal-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.image-modal-img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
user-select: none;
}
.image-modal-close {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10001;
}
.image-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: rotate(90deg);
}
.image-modal-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: #fff;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10001;
}
.image-modal-nav:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.image-modal-nav.disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.image-modal-prev {
left: 20px;
}
.image-modal-next {
right: 20px;
}
.image-modal-counter {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 8px 20px;
border-radius: 20px;
font-size: 14px;
z-index: 10001;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.image-modal-nav {
width: 40px;
height: 40px;
font-size: 20px;
}
.image-modal-prev {
left: 10px;
}
.image-modal-next {
right: 10px;
}
.image-modal-close {
top: 10px;
right: 10px;
width: 40px;
height: 40px;
font-size: 24px;
}
.image-modal-counter {
bottom: 20px;
font-size: 12px;
padding: 6px 16px;
}
}
.gallery-placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.gallery-placeholder svg { opacity: 0.5; }
/* Gallery arrows */
.gal-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 40px; height: 40px; border-radius: 50%;
background: rgba(245,240,232,0.92);
border: none; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--charcoal);
display: flex; align-items: center; justify-content: center;
z-index: 4;
transition: background .2s ease, transform .2s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.gal-arrow:hover { background: var(--gold); }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
/* Wishlist heart on main image — top right */
.gallery-wish {
position: absolute; top: 14px; right: 14px;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(245,240,232,0.92); border: none;
cursor: pointer; z-index: 4;
display: flex; align-items: center; justify-content: center;
transition: transform .2s ease, background .2s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.gallery-wish:hover { transform: scale(1.08); }
/* Thumbnails - vertical on right side */
.gallery-thumbs {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
}
.thumb {
width: 72px;
height: 96px;
border: 1px solid transparent;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
background: var(--cream-warm);
opacity: 0.6;
transition: opacity .25s ease, border-color .25s ease;
flex-shrink: 0;
position: relative;
}
.thumb.active { opacity: 1; border-color: var(--gold); }
.thumb:hover { opacity: 1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1024px) {
.zoom-result { display: none !important; }
.gallery-main { cursor: default; }
}
@media (max-width: 768px) {
.gallery {
flex-direction: column;
}
.gallery-thumbs {
flex-direction: row;
overflow-x: auto;
}
}/* ─── INFO ─── */
.detail-info { padding-top: 4px; }
.detail-eyebrow {
display: block;
font-size: 10px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--gold-dim); margin-bottom: 8px;
}
.detail-title {
font-family: var(--font-display);
font-size: clamp(24px, 3.5vw, 42px);
font-weight: 300; line-height: 1.15;
color: var(--charcoal); margin-bottom: 12px;
}
/* Price block on detail page — bigger */
.detail-price-block {
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 10px; margin-bottom: 6px;
}
.detail-price-block .price-now { font-size: 24px; }
.detail-price-block .price-mrp { font-size: 15px; }
.detail-price-block .price-discount { font-size: 13px; }
.tax-note {
display: block; font-size: 13px; color: var(--text-muted);
letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 500;
}
.variant-stock-note {
display: inline-block;
font-size: 11px;
padding: 4px 10px;
border-radius: 3px;
margin-bottom: 16px;
font-weight: 500;
}
.variant-stock-note.in-stock {
background: #d1fae5;
color: #065f46;
}
.variant-stock-note.out-of-stock {
background: #fee2e2;
color: #991b1b;
}
.detail-lead {
font-size: 16px; line-height: 1.7;
color: var(--charcoal); max-width: 420px;
margin-bottom: 20px;
font-weight: 500;
}
.variant-summary {
font-size: 12px;
color: var(--charcoal);
margin-bottom: 18px;
font-weight: 500;
}
/* ─── OPTIONS ─── */
.detail-option { margin-bottom: 20px; }
.option-label-row {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
gap: 16px;
}
.option-label {
font-size: 11px; font-weight: 600;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--gold-dim);
}
.option-selected-value {
margin-left: 8px;
font-weight: 600;
color: var(--charcoal);
text-transform: none;
letter-spacing: 0;
}
.size-guide-link {
font-size: 12px;
font-weight: 500;
color: var(--charcoal);
background: var(--gold);
padding: 6px 16px;
border-radius: 4px;
transition: background .25s ease, transform .2s ease;
display: inline-block;
letter-spacing: 0.04em;
}
.size-guide-link:hover {
background: var(--gold-light);
transform: translateY(-1px);
}
.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn {
min-width: 44px; height: 44px;
background: transparent; border: 1px solid var(--border);
font-family: var(--font-body); font-size: 12px;
letter-spacing: 0.06em; color: var(--charcoal);
cursor: pointer; transition: all .25s ease;
}
.size-btn:hover { border-color: var(--gold); }
.size-btn.active { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.color-options { display: flex; flex-wrap: wrap; gap: 10px; }
.color-opt {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(26,26,26,0.12);
cursor: pointer; position: relative;
transition: transform .25s ease;
}
.color-opt:hover { transform: scale(1.1); }
.color-opt.active { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--gold); }
/* Variant picker — extends detail options */
.variant-summary {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dim);
margin: -12px 0 28px;
min-height: 16px;
}
.option-selected-value {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: none;
color: var(--charcoal);
margin-left: 8px;
}
.variant-stock-note {
display: block;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
margin: 8px 0 18px;
line-height: 1.5;
}
.variant-stock-note.in-stock {
color: var(--green-mid);
}
.variant-stock-note.out-of-stock {
font-size: 14px;
font-weight: 600;
color: var(--red-sale);
}
.size-btn.unavailable,
.color-option-item.unavailable {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.size-btn.unavailable { text-decoration: line-through; }
.color-options--labeled {
gap: 16px;
align-items: flex-start;
}
.color-option-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
min-width: 48px;
}
.color-option-item .color-opt {
width: 36px;
height: 36px;
pointer-events: none;
}
.color-option-label {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
transition: color .25s ease;
}
.color-option-item.active .color-option-label {
color: var(--charcoal);
font-weight: 500;
}
.color-option-item:hover:not(.unavailable) .color-opt {
transform: scale(1.1);
}
.product-sku-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 18px;
padding: 10px 14px;
border: 1px solid var(--border);
background: var(--cream-warm);
}
.product-sku-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-dim);
flex-shrink: 0;
}
.product-sku-code {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--charcoal);
text-align: right;
word-break: break-all;
}
.add-cart-btn:disabled,
.buy-now-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none !important;
}
.add-cart-btn:disabled:hover { background: var(--charcoal); }
.buy-now-btn:disabled:hover { background: var(--gold); }
/* Review notices */
.review-notice {
margin-bottom: 28px;
padding: 18px 20px;
border: 1px solid var(--border);
background: var(--cream-warm);
}
.review-notice p {
font-size: 15px;
line-height: 1.7;
color: var(--text-muted);
margin: 0;
}
.review-notice-link {
display: inline-block;
margin-top: 10px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dim);
border-bottom: 1px solid rgba(201, 168, 76, 0.35);
}
.review-notice-link:hover {
color: var(--gold);
border-color: var(--gold);
}
.review-form .req {
color: var(--red-sale);
}
.rating-input .rate-star.on {
color: var(--gold);
}
/* ─── SIZE GUIDE MODAL ─── */
.size-guide-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.size-guide-modal.is-open {
opacity: 1;
visibility: visible;
}
.size-guide-backdrop {
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.62);
backdrop-filter: blur(3px);
}
.size-guide-panel {
position: relative;
z-index: 1;
width: min(720px, 100%);
max-height: min(88vh, 820px);
overflow: auto;
background: var(--cream);
border: 1px solid var(--border);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
padding: 40px 36px 36px;
transform: translateY(16px) scale(0.98);
transition: transform .35s var(--ease-out-expo);
}
.size-guide-modal.is-open .size-guide-panel {
transform: translateY(0) scale(1);
}
.size-guide-close {
position: absolute;
top: 14px;
right: 16px;
width: 40px;
height: 40px;
border: none;
background: transparent;
font-size: 28px;
line-height: 1;
color: var(--text-muted);
cursor: pointer;
transition: color .2s ease, transform .2s ease;
}
.size-guide-close:hover {
color: var(--charcoal);
transform: scale(1.05);
}
.size-guide-title {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 300;
color: var(--charcoal);
margin: 8px 0 12px;
line-height: 1.1;
}
.size-guide-title em { font-style: italic; color: var(--gold-dim); }
.size-guide-intro {
font-size: 13px;
line-height: 1.7;
color: var(--text-muted);
margin-bottom: 24px;
max-width: 560px;
}
.size-guide-tabs {
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
}
.size-guide-tab {
background: transparent;
border: none;
padding: 12px 18px;
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
cursor: pointer;
position: relative;
transition: color .25s ease;
}
.size-guide-tab:hover { color: var(--charcoal); }
.size-guide-tab.active { color: var(--charcoal); }
.size-guide-tab.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--gold);
}
/* Unit Toggle */
.unit-toggle-wrap {
display: flex;
gap: 8px;
margin-bottom: 20px;
justify-content: center;
}
.unit-toggle {
background: transparent;
border: 1px solid var(--border);
padding: 8px 20px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
cursor: pointer;
border-radius: 4px;
transition: all .25s ease;
min-width: 80px;
}
.unit-toggle:hover {
border-color: var(--gold);
color: var(--charcoal);
}
.unit-toggle.active {
background: var(--gold);
border-color: var(--gold);
color: var(--charcoal);
font-weight: 600;
}
.size-guide-panel-content { display: none; }
.size-guide-panel-content.active { display: block; }
.size-guide-table-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--charcoal);
margin-bottom: 14px;
}
.size-guide-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
background: var(--cream-warm);
}
.size-guide-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.size-guide-table th,
.size-guide-table td {
padding: 12px 14px;
text-align: center;
border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.size-guide-table th {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-dim);
font-weight: 500;
background: rgba(201, 168, 76, 0.06);
}
.size-guide-table tbody tr:last-child td { border-bottom: none; }
.size-guide-table tbody tr:hover td {
background: rgba(201, 168, 76, 0.05);
}
.size-guide-tips {
list-style: none;
display: grid;
gap: 16px;
}
.size-guide-tips li {
padding: 16px 18px;
background: var(--cream-warm);
border: 1px solid var(--border);
}
.size-guide-tips strong {
display: block;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-dim);
margin-bottom: 6px;
}
.size-guide-tips span {
font-size: 13px;
line-height: 1.7;
color: var(--text-muted);
}
.size-guide-note {
margin-top: 20px;
font-size: 13px;
line-height: 1.7;
color: var(--text-muted);
}
.size-guide-note a {
color: var(--gold-dim);
border-bottom: 1px solid rgba(201, 168, 76, 0.35);
transition: color .2s ease, border-color .2s ease;
}
.size-guide-note a:hover {
color: var(--gold);
border-color: var(--gold);
}
@media (max-width: 640px) {
.size-guide-panel { padding: 32px 20px 24px; }
.size-guide-tab { padding: 10px 12px; font-size: 9px; }
.size-guide-table th,
.size-guide-table td { padding: 10px 8px; font-size: 12px; }
}
/* ─── CART ROW ─── */
.cart-row {
display: flex; gap: 12px;
padding-top: 8px; margin-bottom: 16px;
flex-wrap: wrap;
}
.qty {
display: flex; align-items: center;
border: 1px solid var(--border);
height: 52px;
}
.qty-btn {
width: 44px; height: 100%;
background: transparent; border: none;
font-family: var(--font-display); font-size: 18px;
color: var(--charcoal); cursor: pointer;
transition: color .2s ease;
}
.qty-btn:hover { color: var(--gold-dim); }
.qty-val {
width: 40px; text-align: center;
font-family: var(--font-price); font-weight: 600;
font-size: 14px; color: var(--charcoal);
}
.add-cart-btn, .buy-now-btn, .wish-btn-lg {
flex: 1 1 200px; height: 52px;
border: none; cursor: pointer;
font-family: var(--font-body); font-size: 11px;
font-weight: 500; letter-spacing: 0.2em;
text-transform: uppercase;
transition: background .3s ease, transform .3s ease, color .3s ease;
}
.add-cart-btn { background: var(--charcoal); color: var(--cream); }
.add-cart-btn:hover { background: var(--green-mid); transform: translateY(-1px); }
.buy-now-btn { background: var(--gold); color: var(--charcoal); }
.buy-now-btn:hover { background: var(--gold-light); transform: translateY(-1px); }
.wish-btn-lg {
background: transparent; color: var(--charcoal);
border: 1px solid var(--charcoal); flex: 0 1 auto; padding: 0 22px;
display: inline-flex; align-items: center; gap: 10px; justify-content: center;
}
.wish-btn-lg:hover { background: var(--charcoal); color: var(--cream); }
.wish-btn-lg.active { background: var(--red-sale); color: var(--cream); border-color: var(--red-sale); }
.wish-btn-lg svg { width: 16px; height: 16px; }
/* ─── META ─── */
.detail-meta { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 24px; }
.meta-row {
display: flex; justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(201,168,76,0.08);
font-size: 12px;
}
.meta-label { letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); }
.meta-value { color: var(--charcoal); font-weight: 400; }
/* ─── TABS ─── */
.detail-tabs-wrap { background: var(--cream-warm); padding: 60px; }
.detail-tabs { max-width: 800px; margin: 0 auto; }
.tab-buttons { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; }
.tab-btn {
background: transparent; border: none;
padding: 14px 24px;
font-family: var(--font-body); font-size: 11px;
font-weight: 500; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--text-muted);
cursor: pointer; position: relative;
transition: color .25s ease;
}
.tab-btn:hover { color: var(--charcoal); }
.tab-btn.active { color: var(--charcoal); }
.tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: var(--gold); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel p, .tab-panel ul { font-size: 14px; line-height: 1.9; color: var(--text-muted); }
.tab-panel ul { padding-left: 18px; }
.tab-panel li { margin-bottom: 8px; }
.tab-details-list .meta-row:first-child { padding-top: 0; }
.tab-empty-note {
font-size: 14px;
line-height: 1.8;
color: var(--text-muted);
margin: 0;
}
/* ─── RELATED ─── */
.related { padding: 100px 60px; background: var(--cream); }
.related .products-grid { max-width: 1300px; margin: 0 auto; }
/* ─── TOAST ─── */
.toast {
position: fixed; top: 28px; right: 28px; left: auto; bottom: auto;
transform: translateY(-20px);
background: var(--charcoal); color: var(--cream);
padding: 14px 32px;
font-size: 12px; letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0; pointer-events: none;
transition: opacity .35s ease, transform .35s var(--ease-butter);
z-index: 9999;
}
.toast.show { opacity: 1; transform: translateY(0); }
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
.detail { padding: 24px 24px 60px; }
.detail-grid { grid-template-columns: 1fr; gap: 32px; }
.gallery { position: static; }
.detail-tabs-wrap { padding: 40px 24px; }
.related { padding: 60px 24px; }
.detail-header { padding: 110px 24px 24px; }
}
@media (max-width: 640px) {
.detail { padding: 18px 16px 48px; }
.detail-header { padding: 100px 16px 18px; }
.detail-title { font-size: 26px; }
.detail-price-block .price-now { font-size: 24px; }
.detail-price-block .price-mrp { font-size: 14px; }
.cart-row { flex-direction: column; }
.qty { width: 100%; justify-content: center; }
.add-cart-btn, .buy-now-btn, .wish-btn-lg { width: 100%; flex: 1 1 100%; }
.tab-buttons { flex-wrap: wrap; }
.tab-btn { padding: 12px 16px; font-size: 10px; }
.detail-tabs-wrap { padding: 30px 16px; }
.related { padding: 50px 16px; }
.related .products-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
.thumb { width: 56px; height: 76px; }
.gal-arrow { width: 34px; height: 34px; font-size: 18px; }
.gallery-wish { width: 36px; height: 36px; }
}
/* ─────────────────────────────────────────────
CART BUTTONS FIX
- Desktop: don't let buttons stretch to giant
widths; cap with max-width and tighten flex
- Mobile: replace fixed 52px height with
min-height + padding so labels never get
clipped, and let text wrap if needed
───────────────────────────────────────────── */
/* Base sizing — readable, no overflow */
.add-cart-btn, .buy-now-btn, .wish-btn-lg {
font-size: 13px;
letter-spacing: 0.16em;
height: auto;
min-height: 52px;
padding: 14px 22px;
line-height: 1.2;
white-space: normal;
word-break: keep-all;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Cap stretched buttons on desktop */
@media (min-width: 641px) {
.add-cart-btn, .buy-now-btn {
flex: 1 1 0;
max-width: 320px;
}
.wish-btn-lg { max-width: 280px; }
.cart-row { justify-content: flex-start; }
}
/* Mobile: full-width, generous height, never clip */
@media (max-width: 640px) {
.cart-row { gap: 10px; }
.qty { height: 52px; width: 100%; justify-content: center; }
.add-cart-btn, .buy-now-btn, .wish-btn-lg {
width: 100%;
flex: 1 1 100%;
min-height: 54px;
padding: 16px 18px;
font-size: 13px;
letter-spacing: 0.14em;
max-width: none;
}
.wish-btn-lg { gap: 8px; }
}
/* Readability bumps on detail page */
.detail-lead { font-size: 17px; font-weight: 500; }
.tab-panel p,
.tab-panel ul { font-size: 15px; line-height: 1.85; }
.meta-row { font-size: 13px; }
.option-label,
.detail-eyebrow { font-size: 12px; }
.size-btn { font-size: 13px; }
.tab-btn { font-size: 12px; }
/* ─────────────────────────────────────────────
REVIEWS SECTION
───────────────────────────────────────────── */
.reviews-wrap { background-image:
url("../images/text.png");
background-repeat: repeat;
background-size: 350px;
padding: 40px 60px 80px; }
.reviews { max-width: 1100px; margin: 0 auto; }
.reviews-head {
display: flex; flex-wrap: wrap; gap: 24px;
justify-content: space-between; align-items: flex-end;
padding-bottom: 24px; margin-bottom: 32px;
border-bottom: 1px solid var(--border);
}
.reviews-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1.1;
color: var(--charcoal);
margin-top: 10px;
}
.reviews-title em { font-style: italic; color: var(--gold-dim); }
.reviews-summary { text-align: right; min-width: 160px; }
.rev-avg {
font-family: var(--font-display);
font-size: 44px; font-weight: 300; line-height: 1;
color: var(--charcoal);
}
.rev-stars-lg { font-size: 18px; color: var(--gold); letter-spacing: 2px; margin: 4px 0; }
.rev-stars-lg .r-star { color: rgba(26,26,26,0.18); }
.rev-stars-lg .r-star.on { color: var(--gold); }
.rev-count {
font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; color: #800000;
font-weight: 600;
}
/* Form */
.review-form {
background: rgba(255,255,255,0.55);
border: 1px solid var(--border);
padding: 26px 28px;
margin-bottom: 36px;
}
.review-form-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
color: var(--charcoal);
margin: 0 0 18px;
}
.rev-row {
display: grid; gap: 16px;
grid-template-columns: 1fr 1fr;
margin-bottom: 16px;
}
.rev-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rev-field label {
font-size: 10px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--gold-dim);
}
.rev-field input,
.rev-field textarea {
font-family: var(--font-body);
font-size: 14px;
color: var(--charcoal);
background: transparent;
border: 1px solid var(--border);
padding: 10px 12px;
outline: none;
border-radius: 0;
transition: border-color .25s ease;
resize: vertical;
}
.rev-field input:focus,
.rev-field textarea:focus { border-color: var(--gold); }
.rating-input { display: inline-flex; gap: 4px; }
.rate-star {
background: none; border: none; cursor: pointer;
font-size: 26px; line-height: 1;
color: rgba(26,26,26,0.2);
padding: 0 2px;
transition: color .15s ease, transform .15s ease;
}
.rate-star:hover { transform: scale(1.08); }
.rate-star.active { color: var(--gold); }
.submit-review-btn {
margin-top: 4px;
background: var(--charcoal);
color: var(--cream);
border: none;
padding: 13px 32px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: background .25s ease, color .25s ease;
}
.submit-review-btn:hover { background: var(--gold); color: var(--charcoal); }
/* List */
.reviews-list { display: flex; flex-direction: column; gap: 22px; }
.review-item {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.review-item:last-child { border-bottom: none; }
.rev-avatar {
width: 48px; height: 48px; border-radius: 50%;
background: var(--green-mid); color: var(--gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 20px;
}
.rev-meta-row {
display: flex; align-items: baseline; gap: 12px;
flex-wrap: wrap;
}
.rev-name { font-size: 14px; color: var(--charcoal); font-weight: 500; }
.rev-date { font-size: 11px; color: var(--gold-dim); letter-spacing: 0.08em; }
.rev-stars { color: var(--gold); letter-spacing: 1px; margin: 4px 0 6px; font-size: 14px; }
.rev-stars .r-star { color: rgba(26,26,26,0.18); }
.rev-stars .r-star.on { color: var(--gold); }
.rev-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 17px;
color: var(--charcoal);
margin: 2px 0 4px;
}
.rev-text {
font-size: 14px; line-height: 1.65;
color: rgba(26,26,26,0.78);
}
.rev-actions {
display: flex;
gap: 10px;
margin-top: 12px;
flex-wrap: wrap;
}
.rev-action-btn {
appearance: none;
border: 1px solid var(--border);
background: #fff;
color: var(--charcoal);
border-radius: 999px;
padding: 6px 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.rev-action-btn:hover {
border-color: var(--gold);
color: var(--forest);
}
.rev-action-btn--danger:hover {
border-color: #b91c1c;
color: #b91c1c;
}
.review-edit-form {
margin-top: 10px;
padding-top: 14px;
border-top: 1px dashed var(--border);
}
.rev-edit-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.rev-cancel-btn {
appearance: none;
border: none;
background: transparent;
color: var(--gold-dim);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
padding: 8px 4px;
}
.rev-cancel-btn:hover { color: var(--charcoal); }
.reviews-empty {
text-align: center; padding: 20px 0 8px;
color: #800000;
font-size: 14px; letter-spacing: 0.08em;
font-weight: 600;
}
@media (max-width: 760px) {
.reviews-wrap { padding: 32px 18px 60px; }
.reviews-head { flex-direction: column; align-items: flex-start; }
.reviews-summary { text-align: left; }
.rev-row { grid-template-columns: 1fr; }
.review-form { padding: 20px; }
.review-item { grid-template-columns: 40px 1fr; gap: 12px; }
.rev-avatar { width: 40px; height: 40px; font-size: 17px; }
}
/* ===== auth.css ===== */
/* VIBHAA DESIGNS — auth.css
Shared styles for login / register / forgot / reset / otp pages.
Uses tokens from style.css (loaded first via header.php). */
body:has(.auth-section){
min-height: 100vh;
display: flex;
flex-direction: column;
}
body:has(.auth-section) #site{
flex: 1;
display: flex;
flex-direction: column;
}
.auth-section{
background:
radial-gradient(900px 480px at 15% 10%, rgba(201,168,76,0.10), transparent 60%),
radial-gradient(800px 460px at 90% 90%, rgba(11,52,41,0.10), transparent 60%),
var(--cream, #F5F0E8);
/* Top padding must clear the fixed #navbar (position: fixed; top:0). */
padding: 130px 20px 90px;
flex: 1 0 auto;
display:flex; align-items:center; justify-content:center;
}
.auth-card{
width: 100%;
max-width: 460px;
background: #fff;
border: 1px solid rgba(201,168,76,0.28);
border-radius: 16px;
box-shadow: 0 30px 70px -30px rgba(11,52,41,0.22);
padding: 40px 38px;
}
.auth-card.wide{ max-width: 560px; }
.auth-card .crumb{
display:inline-block; font-size:14px; letter-spacing:4px; text-transform:uppercase;
color: var(--gold, #C9A84C); margin-bottom: 10px;
}
.auth-card h1{
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(28px, 4vw, 36px);
font-weight: 500; line-height: 1.15;
color: var(--green-deep, #0B3429);
margin: 0 0 8px;
}
.auth-card .lede{
color: #6b6b63; font-size: 15px; margin-bottom: 22px;
}
.auth-form{ display:flex; flex-direction:column; gap: 14px; }
.field{ display:flex; flex-direction:column; gap: 6px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label{
font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
color: #555; font-weight: 500;
}
.field input{
font: inherit; font-size: 15px;
padding: 12px 14px;
border: 1px solid rgba(11,52,41,0.18);
border-radius: 10px;
background: #FAF7F1;
color: #1A1A1A;
width: 100%;
transition: border-color .2s, background .2s, box-shadow .2s;
}
.field input:focus{
outline: none; background: #fff;
border-color: var(--gold, #C9A84C);
box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}
.field input.is-invalid{
border-color: #b91c1c;
background: #fff8f8;
}
.field-error{
display:block; color:#b91c1c; font-size:14.5px; line-height:1.35;
}
.field-help{ color:#777; font-size:12px; }
.password-wrap{ position: relative; }
.password-wrap input{ padding-right: 44px; }
.password-toggle{
position:absolute; top:50%; right: 8px; transform: translateY(-50%);
background: none; border: 0; cursor: pointer;
color: #888; padding: 6px; border-radius: 6px;
}
.password-toggle:hover{ color: var(--green-deep, #0B3429); background: #F0EBE2; }
.google-signin{
width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
padding:12px 18px; border:1px solid rgba(11,52,41,.2); border-radius:10px;
background:#fff; color:#303030; font:500 14px 'Jost', system-ui, sans-serif;
cursor:pointer; text-decoration:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.google-signin:hover{ background:#fafafa; border-color:#aaa; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.google-signin svg{ width:20px; height:20px; flex:0 0 20px; }
.google-msg{ margin-top:10px; }
.row-between{
display:flex; justify-content:space-between; align-items:center;
flex-wrap: wrap; gap: 8px; font-size: 13.5px; color:#666;
}
.row-between label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.row-between a{ color: var(--green-bright, #145c40); text-decoration: none; }
.row-between a:hover{ text-decoration: underline; }
.btn-primary{
margin-top: 6px;
font-family: 'Jost', system-ui, sans-serif;
font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
background: var(--green-deep, #0B3429); color: #F5F0E8;
border: 0; border-radius: 10px;
padding: 14px 20px; cursor: pointer;
transition: background .2s, transform .15s;
}
.btn-primary:hover{ background: var(--green-bright, #145c40); }
.btn-primary:active{ transform: translateY(1px); }
.divider{
display:flex; align-items:center; gap:12px;
color:#999; font-size:11px; letter-spacing:3px; margin: 20px 0 14px;
}
.divider::before, .divider::after{
content:""; flex:1; height:1px; background: rgba(11,52,41,0.15);
}
.alt-action{
text-align:center; color:#666; font-size: 14px;
}
.alt-action a{ color: var(--green-deep, #0B3429); font-weight: 500; text-decoration: none; }
.alt-action a:hover{ color: var(--green-bright, #145c40); text-decoration: underline; }
.form-msg{
display: none;
padding: 10px 12px; border-radius: 8px; font-size: 14px;
}
.form-msg.show{ display:block; }
.form-msg.error { background: rgba(178,58,46,0.08); color:#8a2a20; border:1px solid rgba(178,58,46,0.25); }
.form-msg.success{ background: rgba(20,92,64,0.08); color:#0B3429; border:1px solid rgba(20,92,64,0.25); }
/* OTP inputs */
.otp-grid{
display:flex; justify-content:space-between; gap: 10px; margin: 4px 0 8px;
}
.otp-grid input{
width: 100%; aspect-ratio: 1 / 1; max-width: 56px;
text-align:center; font-size: 22px; font-weight: 500;
padding: 0;
font-family: 'Cormorant Garamond', Georgia, serif;
}
.otp-resend{
text-align:center; font-size: 14.5px; color: #666; margin-top: 6px;
}
.otp-resend a{ color: var(--green-bright, #145c40); }
.link-button{
padding:0; border:0; background:none; color:var(--green-bright, #145c40);
font:inherit; cursor:pointer; text-decoration:underline;
}
.profile-actions form{ margin:0; }
.profile-logout{
width:100%; padding:10px 12px; border:1px solid rgba(178,58,46,.25); border-radius:8px;
background:#fff8f8; color:#8a2a20; font:inherit; cursor:pointer;
}
.profile-empty{ color:var(--text-muted, #777); font-size:14px; }
.profile-empty a{ color:var(--gold-dim, #997a24); }
/* Responsive */
@media (max-width: 600px){
.auth-section{ padding: 110px 14px 50px; min-height: auto; }
.auth-card{ padding: 28px 22px; border-radius: 14px; }
.auth-card.wide{ max-width: 100%; }
.auth-card h1{ font-size: 26px; }
.auth-card .lede{ font-size: 15px; margin-bottom: 18px; }
.field-row{ grid-template-columns: 1fr; gap: 14px; }
.field input{ font-size: 16px; padding: 11px 13px; } /* 16px prevents iOS zoom */
.btn-primary{ padding: 13px 18px; }
.otp-grid{ gap: 6px; }
.otp-grid input{ font-size: 20px; max-width: 48px; }
}
@media (max-width: 360px){
.otp-grid input{ font-size: 18px; }
}
/* ============================================================
NAVBAR STYLE UPDATE — background, texture, font colors
(mega menu untouched)
============================================================ */
/* ── Background: deep green + subtle dot/diamond texture ── */
#navbar {
background-color: #13382d;
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 2px, transparent 2px),
linear-gradient(45deg, rgba(212,175,55,0.03) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.03) 75%),
linear-gradient(-45deg, rgba(212,175,55,0.03) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.03) 75%);
background-size: 30px 30px, 30px 30px, 40px 40px, 40px 40px;
/* keep it solid — no transparent/blurred override */
}
/* If you have texture-bg.png in your project root, add this
below to layer the image on top of the colour pattern:
#navbar {
background-image:
url('texture-bg.png'),
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 2px, transparent 2px),
linear-gradient(45deg, rgba(212,175,55,0.03) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.03) 75%),
linear-gradient(-45deg, rgba(212,175,55,0.03) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.03) 75%);
background-size: auto, 30px 30px, 30px 30px, 40px 40px, 40px 40px;
background-blend-mode: overlay, normal, normal, normal, normal;
}
*/
/* ── Override the scrolled/solid state to keep the same green ── */
#navbar.scrolled,
#navbar.nav-solid {
background-color: #041d0f;
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 2px, transparent 2px),
linear-gradient(45deg, rgba(212,175,55,0.03) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.03) 75%),
linear-gradient(-45deg, rgba(212,175,55,0.03) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.03) 75%);
background-size: 30px 30px, 30px 30px, 40px 40px, 40px 40px;
backdrop-filter: none;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
/* ── Brand title — Cormorant Garamond, gold ── */
.brand-name {
font-family: 'Cormorant Garamond', serif !important;
font-size: 38px !important;
font-weight: 600 !important;
letter-spacing: 4px !important;
color: var(--gold) !important;
text-transform: uppercase;
}
/* ── Brand subtitle — Montserrat, warm cream ── */
.brand-sub {
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
letter-spacing: 10px !important;
color: #f4e7c9 !important;
text-transform: uppercase;
margin-top: 4px;
padding-left: 12px;
}
/* ── Override scrolled brand-name (was turning charcoal) ── */
#navbar.scrolled .brand-name,
#navbar.nav-solid .brand-name {
}
/* ── Nav links — gold-yellow, matching new design ── */
#navbar .nav-link {
color: #f0db57 !important;
}
#navbar .nav-link:hover,
#navbar .nav-link.active {
color: var(--gold) !important;
opacity: 1;
}
/* ── Override scrolled state (was turning charcoal) ── */
#navbar.scrolled .nav-link,
#navbar.nav-solid .nav-link {
color: #f0db57 !important;
}
#navbar.scrolled .nav-link:hover,
#navbar.nav-solid .nav-link:hover {
color: var(--gold) !important;
}
/* ── Icons (search, wishlist, cart, profile) — cream white ── */
#navbar .nav-icon svg {
stroke: #f0db57 !important;
transition: stroke 0.3s ease;
}
#navbar .nav-icon:hover svg {
stroke: var(--gold);
}
/* ── Hamburger toggle color on mobile ── */
.nav-toggle {
color: #f0db57 !important;
}
/* ── Add Montserrat font if not already in your ──
(Add this to your HTML if missing):
*/
/* ============================================================
NAVBAR RESPONSIVE FIX — mobile overflow after style update
============================================================ */
/* ── Tablet (961px–1100px): slightly tighter brand text ── */
@media (max-width: 1100px) {
.brand-name {
font-size: 28px !important;
letter-spacing: 2px !important;
}
.brand-sub {
font-size: 10px !important;
letter-spacing: 6px !important;
padding-left: 8px;
}
.brand-logo-img {
width: 42px !important;
height: 42px !important;
}
}
/* ── Tablet (max 960px): compact brand ── */
@media (max-width: 960px) {
.brand-name {
font-size: 24px !important;
letter-spacing: 2px !important;
}
.brand-sub {
font-size: 9px !important;
letter-spacing: 5px !important;
padding-left: 6px;
}
.brand-logo-img {
width: 38px !important;
height: 38px !important;
}
#navbar { padding: 14px 1.25rem; min-height: 90px; gap: 0.75rem; }
}
/* ── Mobile (max 760px): small brand, fits 3-column grid ── */
@media (max-width: 760px) {
#navbar {
padding: 0.7rem 1rem !important;
background-size: 20px 20px, 20px 20px, 28px 28px, 28px 28px !important;
}
.brand-name {
font-size: 18px !important;
letter-spacing: 2px !important;
}
.brand-sub {
font-size: 8px !important;
letter-spacing: 4px !important;
padding-left: 4px;
margin-top: 3px;
}
.brand-logo-img {
width: 32px !important;
height: 32px !important;
}
.brand-logo-link {
flex-direction: row;
align-items: center;
gap: 8px;
}
.brand-text-wrap {
display: flex;
flex-direction: column;
line-height: 1;
}
}
/* ── Very small phones (max 380px) ── */
@media (max-width: 380px) {
.brand-name {
font-size: 15px !important;
letter-spacing: 1.5px !important;
}
.brand-sub {
font-size: 7px !important;
letter-spacing: 2.5px !important;
}
.brand-logo-img {
width: 28px !important;
height: 28px !important;
}
#navbar .nav-right .nav-icon svg {
width: 18px !important;
height: 18px !important;
}
}
/* ============================================================
MEGA MENU + MOBILE DRAWER THEME UPDATE
— matches navbar green background, texture, gold text theme
============================================================ */
/* ── 1. CARET ICON — replace tiny ▾ with a proper chevron SVG via CSS ── */
.mega-caret {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
font-size: 0px; /* hide the text character */
width: 16px;
height: 16px;
transition: transform .3s ease;
opacity: 1;
vertical-align: middle;
position: relative;
top: -1px;
}
.mega-caret::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-right: 2px solid #f0db57;
border-bottom: 2px solid #f0db57;
transform: rotate(45deg);
margin-top: -4px;
transition: transform .3s ease, border-color .3s ease;
}
.nav-item-has-mega:hover .mega-caret::after {
transform: rotate(-135deg);
margin-top: 2px;
border-color: var(--gold);
}
/* ── 2. DESKTOP MEGA MENU — green background + texture pattern ── */
.nav-mega {
background-color: #082516 !important;
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.04) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.04) 2px, transparent 2px),
linear-gradient(45deg, rgba(212,175,55,0.05) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.05) 75%),
linear-gradient(-45deg, rgba(212,175,55,0.05) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.05) 75%) !important;
background-size: 30px 30px, 30px 30px, 40px 40px, 40px 40px !important;
border-top: 1px solid rgba(212,175,55,0.3) !important;
border-bottom: 1px solid rgba(212,175,55,0.2) !important;
box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5) !important;
}
/* ── 3. MEGA MENU CATEGORY TITLES (Men, Women, Festive, Signature Prints) ── */
.mega-title {
font-family: 'Cormorant Garamond', serif !important;
font-size: 18px !important;
font-weight: 600 !important;
letter-spacing: 3px !important;
text-transform: uppercase;
color: var(--gold) !important;
margin-bottom: 18px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid rgba(212,175,55,0.4) !important;
}
/* ── 4. MEGA MENU LINKS (Kurta Sets, Sarees etc.) ── */
.mega-link {
font-family: 'Jost', sans-serif !important;
font-size: 15px !important;
letter-spacing: 0.1em !important;
color: #f0db57 !important;
padding: 10px 0 !important;
}
.mega-link:hover {
color: var(--gold) !important;
padding-left: 8px !important;
}
/* ── 5. MEGA MENU SUB-LINKS (Ajrakh, Linen, Silk etc.) ── */
.mega-sub {
border-left: 1px solid rgba(212,175,55,0.35) !important;
margin: 6px 0 12px 12px !important;
padding-left: 14px !important;
}
.mega-sub a {
font-size: 14.5px !important;
color: rgba(255, 255, 255, 0.922);;
padding: 7px 0 !important;
letter-spacing: 0.06em !important;
}
.mega-sub a:hover {
color: var(--gold) !important;
padding-left: 5px !important;
}
/* ============================================================
MOBILE DRAWER — green theme matching navbar
============================================================ */
@media (max-width: 760px) {
/* ── Drawer background: same green + texture as navbar ── */
#navbar .nav-links {
background-color: #082516 !important;
background-image:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04) 2px, transparent 2px),
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.04) 2px, transparent 2px),
linear-gradient(45deg, rgba(212,175,55,0.04) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.04) 75%),
linear-gradient(-45deg, rgba(212,175,55,0.04) 25%, transparent 25%, transparent 75%, rgba(212,175,55,0.04) 75%) !important;
background-size: 30px 30px, 30px 30px, 40px 40px, 40px 40px !important;
color: #f0db57 !important;
padding-top: 6rem !important; /* extra space for logo */
}
/* ── Logo + brand inside the drawer (shown when open) ── */
#navbar .nav-links::before {
content: '';
display: block;
position: absolute;
top: 0; left: 0; right: 0;
height: 80px;
background-color: rgb(10, 30, 22);
/* background-image: url('../images/logo-gold.png'); */
background-repeat: no-repeat;
background-position: 1.5rem center;
background-size: 38px 38px;
border-bottom: 1px solid rgba(212,175,55,0.25);
z-index: 1;
}
/* ── Drawer nav links — gold-yellow text ── */
#navbar .nav-links .nav-link {
color: #f0db57 !important;
border-bottom: 1px solid rgba(212,175,55,0.15) !important;
font-size: 15px !important;
letter-spacing: 0.16em;
padding: 1rem 1.5rem !important;
}
#navbar .nav-links .nav-link:hover {
background-color: rgba(212,175,55,0.08) !important;
color: var(--gold) !important;
}
#navbar .nav-links .nav-link.active {
color: var(--gold) !important;
background-color: rgba(212,175,55,0.1) !important;
}
/* ── Mobile mega menu — same green, no box around it ── */
.nav-item-has-mega .nav-mega {
background-color: rgba(10,30,22,0.5) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0.25rem 1.5rem 0.75rem !important;
margin: 0 -1.5rem 0 !important;
}
/* ── Mobile category titles ── */
.nav-item-has-mega .mega-title {
font-size: 13px !important;
letter-spacing: 0.2em !important;
color: var(--gold) !important;
border-bottom: 1px solid rgba(212,175,55,0.25) !important;
margin: 0.75rem 0 0.4rem !important;
padding-bottom: 0.4rem !important;
}
/* ── Mobile mega links ── */
.nav-item-has-mega .mega-link {
font-size: 14px !important;
color: #f0db57 !important;
padding: 0.5rem 0 !important;
}
.nav-item-has-mega .mega-link:hover {
color: var(--gold) !important;
}
/* ── Mobile sub links ── */
.nav-item-has-mega .mega-sub {
border-left: 1px solid rgba(212,175,55,0.3) !important;
margin: 0.1rem 0 0.5rem 0.75rem !important;
padding-left: 0.75rem !important;
}
.nav-item-has-mega .mega-sub a {
font-size: 13px !important;
color: rgba(244,231,201,0.6) !important;
padding: 0.3rem 0 !important;
}
.nav-item-has-mega .mega-sub a:hover {
color: var(--gold) !important;
}
/* ── Mobile expand toggle buttons — gold theme ── */
.nav-item-has-mega .mega-col-toggle,
.nav-item-has-mega .mega-sub-toggle {
color: rgba(244,231,201,0.6) !important;
background: transparent !important;
border: none !important;
}
.nav-item-has-mega .mega-col-toggle.open,
.nav-item-has-mega .mega-sub-toggle.open {
color: var(--gold) !important;
}
/* ── Mobile caret — show it ── */
.nav-item-has-mega .mega-caret {
display: inline-flex !important;
}
.nav-item-has-mega .mega-caret::after {
border-color: #f0db57 !important;
}
}
/* ── Mobile drawer brand header — logo + VIBHAA DESIGNS text ── */
.nav-drawer-brand {
display: none;
}
@media (max-width: 760px) {
.nav-drawer-brand {
display: flex;
align-items: center;
gap: 10px;
position: absolute;
top: 0; left: 0; right: 0;
height: 80px;
padding: 0 1.5rem;
background-color: rgba(10,30,22,0.6);
border-bottom: 1px solid rgba(212,175,55,0.25);
z-index: 2;
pointer-events: none;
}
.nav-drawer-brand img {
width: 36px;
height: 36px;
object-fit: contain;
}
.nav-drawer-brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.nav-drawer-brand-title {
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 3px;
color: var(--gold);
text-transform: uppercase;
}
.nav-drawer-brand-sub {
font-family: 'Montserrat', sans-serif;
font-size: 8px;
letter-spacing: 5px;
color: #f4e7c9;
text-transform: uppercase;
margin-top: 3px;
padding-left: 3px;
}
}
/* ============================================================
USER REQUESTED UPDATES — readability + mobile drawer polish
(single appended block — overrides previous rules)
============================================================ */
/* ── 1) Mobile drawer brand: move logo + brand to the RIGHT
so the top-left X (nav-toggle) does NOT overlap it ── */
@media (max-width: 760px) {
.nav-drawer-brand {
display: flex !important;
flex-direction: row-reverse; /* image on the right */
justify-content: flex-start; /* hugs the right edge */
align-items: center;
gap: 10px;
position: absolute;
top: 0; left: 0; right: 0;
height: 80px;
padding: 0 1.25rem 0 1.25rem;
background-color: rgb(10, 30, 22);
border-bottom: 1px solid rgba(212,175,55,0.25);
z-index: 2;
pointer-events: none;
}
.nav-drawer-brand-text {
align-items: flex-end; /* text right-aligned next to logo */
text-align: right;
}
.nav-drawer-brand img {
width: 38px;
height: 38px;
}
/* push first drawer link below the brand header so it isn't hidden */
#navbar .nav-links { padding-top: 6rem; }
}
/* ── 2) Mobile mega expand button styled like .mega-caret
(small chevron, no background, no focus ring) ── */
@media (max-width: 760px) {
.nav-item-has-mega .mega-col-toggle,
.nav-item-has-mega .mega-sub-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
margin-left: 6px;
background: transparent !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
color: transparent !important; /* hide the ▸ glyph */
font-size: 0 !important;
cursor: pointer;
position: relative;
transition: transform .25s ease;
}
.nav-item-has-mega .mega-col-toggle:focus,
.nav-item-has-mega .mega-sub-toggle:focus,
.nav-item-has-mega .mega-col-toggle:focus-visible,
.nav-item-has-mega .mega-sub-toggle:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.nav-item-has-mega .mega-col-toggle::after,
.nav-item-has-mega .mega-sub-toggle::after {
content: '';
display: block;
width: 8px;
height: 8px;
border-right: 2px solid #f0db57;
border-bottom: 2px solid #f0db57;
transform: rotate(-45deg); /* points right (collapsed) */
transition: transform .25s ease, border-color .25s ease;
}
.nav-item-has-mega .mega-col-toggle.open::after,
.nav-item-has-mega .mega-sub-toggle.open::after {
transform: rotate(45deg); /* points down (open) */
border-color: var(--gold);
}
/* override earlier rotate on the button wrapper */
.nav-item-has-mega .mega-col-toggle.open,
.nav-item-has-mega .mega-sub-toggle.open {
transform: none !important;
}
}
/* ── 3) Footer: increase readable font sizes ── */
#footer .footer-tagline { font-size: 15px !important; color: rgba(245,240,232,0.85) !important; }
#footer .footer-col h5 { font-size: 13px !important; color: var(--gold) !important; margin-bottom: 18px; }
#footer .footer-col a { font-size: 15.5px !important; color: rgba(245,240,232,0.88) !important; padding: 7px 0; }
#footer .footer-col a:hover { color: var(--gold-light) !important; }
#footer .footer-bottom { font-size: 14px !important; color: rgba(245,240,232,0.85) !important; }
#footer .footer-brand-name { font-size: 28px !important; }
#footer .footer-brand-sub { font-size: 11px !important; color: var(--gold) !important; }
@media (max-width: 760px) {
#footer .footer-tagline { font-size: 14px !important; }
#footer .footer-col h5 { font-size: 12.5px !important; }
#footer .footer-col a { font-size: 14.5px !important; }
#footer .footer-bottom { font-size: 13px !important; }
}
/* ── 4) Make previously muted body text fully readable ── */
.about-hero p,
.value-card p,
.contact-info p,
.success-card p,
.tab-panel p,
.tab-panel ul,
.tab-panel li,
.profile-email,
.order-item .oi-meta {
color: var(--charcoal) !important;
opacity: 1 !important;
}
/* Bump body text size to a comfortably readable medium across pages */
.about-hero p { font-size: 17px !important; line-height: 1.85 !important; }
.value-card p { font-size: 15.5px !important; line-height: 1.8 !important; }
.contact-info p { font-size: 16px !important; line-height: 1.85 !important; }
.success-card p { font-size: 16px !important; }
.tab-panel p,
.tab-panel ul,
.tab-panel li { font-size: 16px !important; line-height: 1.85 !important; }
.profile-email { font-size: 14px !important; }
.order-item .oi-meta { font-size: 13px !important; }
/* Craft section on index (uses .value-card and similar muted copy) */
.craft-card p, .craft-section p, .craft p {
color: var(--charcoal) !important;
font-size: 15.5px !important;
line-height: 1.8 !important;
opacity: 1 !important;
}
/* Product detail readability */
.product-detail p,
.pd-desc, .pd-meta, .pd-short, .pd-highlight, .pd-shipping,
.product-detail .muted, .product-detail .text-muted {
color: var(--charcoal) !important;
font-size: 15.5px !important;
line-height: 1.8 !important;
opacity: 1 !important;
}
/* ── 5) Products grid: 4 columns on desktop with smaller cells ── */
@media (min-width: 1025px) {
.plp-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px 20px !important;
max-width: 1300px;
margin: 0 auto;
}
.plp-grid .product-card .product-name { font-size: 15px; }
.plp-grid .product-card .product-category { font-size: 11.5px; }
.plp-grid .product-card .price-now { font-size: 15px; }
}
@media (min-width: 1400px) {
.plp-grid { max-width: 1440px; gap: 28px 24px !important; }
}
/* Tablets: keep 3 columns so cells stay reasonable */
@media (max-width: 1024px) and (min-width: 761px) {
.plp-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 22px 18px !important; }
}
/* Small tablets: 2 columns (already defined earlier — kept) */
/* Phones: 2 columns (already defined earlier — kept) */
/* ── 6) Filters: medium readable font size ── */
.filters-head h3 { font-size: 22px !important; }
.filter-group h4 {
font-size: 13px !important;
letter-spacing: 0.18em !important;
color: var(--charcoal) !important;
margin-bottom: 14px !important;
}
.check {
font-size: 15px !important;
color: var(--charcoal) !important;
padding: 8px 0 !important;
}
.check input { width: 16px !important; height: 16px !important; }
.price-row { font-size: 15px !important; }
.filter-toggle-btn { font-size: 13px !important; letter-spacing: 0.16em !important; }
.sort-wrap, .sort-wrap select, .results-count {
font-size: 14px !important;
}
.clear-link { font-size: 12px !important; }
/* ============================================================
VIBHAA DESIGNS — POLICY PAGE STYLES
============================================================ */
/* ── Policy / Legal Page Layout ── */
.page-section.legal-page {
padding: 60px 60px 100px;
background: var(--cream);
}
/* ── Policy Content: Summernote Output Wrapper ── */
.legal-body {
max-width: 780px;
margin: 0 auto;
font-family: var(--font-body);
font-size: 15.5px;
font-weight: 300;
line-height: 1.85;
color: var(--charcoal);
}
/* Last updated badge */
.legal-updated {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-dim);
border: 1px solid rgba(201,168,76,0.28);
padding: 6px 16px;
margin-bottom: 44px;
}
/* Section headings inside policy content */
.legal-body h2 {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 400;
color: var(--green-deep);
margin: 52px 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(201,168,76,0.22);
line-height: 1.2;
}
.legal-body h2:first-of-type {
margin-top: 0;
}
.legal-body h3 {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--green-bright);
margin: 36px 0 12px;
}
/* Paragraphs */
.legal-body p {
margin-bottom: 18px;
color: var(--charcoal);
}
/* Unordered lists */
.legal-body ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.legal-body ul li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
color: var(--charcoal);
}
.legal-body ul li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 1px;
background: var(--gold);
}
/* Ordered lists */
.legal-body ol {
counter-reset: policy-counter;
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.legal-body ol li {
counter-increment: policy-counter;
position: relative;
padding-left: 28px;
margin-bottom: 10px;
color: var(--charcoal);
}
.legal-body ol li::before {
content: counter(policy-counter) '.';
position: absolute;
left: 0;
top: 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
color: var(--gold-dim);
letter-spacing: 0.05em;
}
/* Info callout box (highlight key info) */
.legal-body .policy-note {
background: rgba(201,168,76,0.07);
border-left: 3px solid var(--gold);
padding: 18px 24px;
margin: 28px 0;
font-size: 14.5px;
color: var(--charcoal);
}
.legal-body .policy-note strong {
color: var(--green-deep);
font-weight: 500;
}
/* Divider between major sections */
.legal-body hr {
border: none;
border-top: 1px solid rgba(201,168,76,0.2);
margin: 48px 0;
}
/* Links inside policy content */
.legal-body a {
color: var(--green-bright);
border-bottom: 1px solid rgba(20,92,64,0.3);
transition: color 0.25s ease, border-color 0.25s ease;
}
.legal-body a:hover {
color: var(--gold-dim);
border-bottom-color: var(--gold-dim);
}
/* Bold / strong */
.legal-body strong {
font-weight: 500;
color: var(--charcoal);
}
/* Contact block at bottom of a policy */
.legal-contact {
margin-top: 56px;
padding: 32px 36px;
background: var(--green-mid);
color: var(--cream);
}
.legal-contact h4 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 300;
color: var(--gold-light);
margin-bottom: 12px;
}
.legal-contact p {
font-size: 14.5px;
line-height: 1.8;
color: rgba(245,240,232,0.82);
margin-bottom: 6px;
}
.legal-contact a {
color: var(--gold);
border-bottom: 1px solid rgba(201,168,76,0.4);
transition: color 0.25s ease;
}
.legal-contact a:hover { color: var(--gold-light); }
/* ── Responsive ── */
@media (max-width: 900px) {
.page-section.legal-page { padding: 40px 24px 80px; }
}
@media (max-width: 600px) {
.page-section.legal-page { padding: 30px 18px 60px; }
.legal-body { font-size: 15px; }
.legal-body h2 { font-size: 22px; margin-top: 40px; }
.legal-updated { margin-bottom: 32px; }
.legal-contact { padding: 24px 20px; }
}
.form-alert {
padding: 14px 20px;
margin-bottom: 24px;
font-size: 0.95rem;
letter-spacing: 0.02em;
border-radius: 2px;
border-left: 3px solid transparent;
display: flex;
align-items: center;
gap: 10px;
animation: alertSlideIn 0.35s ease;
}
.form-alert.success {
background-color: #f4f1e8;
border-left-color: #8a7538;
color: #4a3f1e;
}
.form-alert.error {
background-color: #f9efee;
border-left-color: #9c3b3b;
color: #6b2626;
}
.form-alert::before {
font-family: serif;
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
}
.form-alert.success::before {
content: "✓";
color: #8a7538;
}
.form-alert.error::before {
content: "!";
color: #9c3b3b;
}
@keyframes alertSlideIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ──────────────────────────────────────────────────
SEARCH AUTOCOMPLETE DROPDOWN
────────────────────────────────────────────────── */
.nav-search-suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
border: 1px solid rgba(201,168,76,0.2);
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
max-height: 400px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
z-index: 1000;
margin-top: 8px;
}
.nav-search-suggestions.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.search-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
transition: background 0.2s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.search-item:last-child {
border-bottom: none;
}
.search-item:hover {
background: var(--cream);
}
.search-item-thumb {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 4px;
overflow: hidden;
background: var(--cream);
}
.search-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.search-item-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--cream);
border-radius: 4px;
color: var(--gold-dim);
}
.search-item-content {
flex: 1;
min-width: 0;
}
.search-item-name {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--charcoal);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-item-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-dim);
}
.search-item-category {
font-size: 12px;
color: var(--text-muted);
}
.search-no-results {
padding: 24px 16px;
text-align: center;
font-size: 13px;
color: var(--text-muted);
font-style: italic;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.nav-search-suggestions {
max-height: 300px;
}
.search-item {
padding: 10px 12px;
gap: 12px;
}
.search-item-thumb {
width: 40px;
height: 40px;
}
.search-item-icon {
width: 36px;
height: 36px;
}
.search-item-name {
font-size: 13px;
}
.search-item-label,
.search-item-category {
font-size: 11px;
}
}
/* ──────────────────────────────────────────────────
INSTAGRAM GRID RESPONSIVE - 5 on desktop, 4 on mobile
────────────────────────────────────────────────── */
/* Desktop: 5 items grid */
.insta-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
max-width: 1300px;
margin: 0 auto;
}
/* Hide 5th item on mobile */
.insta-tile.hide-mobile {
display: block;
}
/* Tablet: 4 items */
@media (max-width: 1024px) {
.insta-grid {
grid-template-columns: repeat(4, 1fr);
}
.insta-tile.hide-mobile {
display: none;
}
}
/* Mobile: 2x2 grid (4 items) */
@media (max-width: 560px) {
#instagram {
padding: 60px 18px;
}
.insta-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.insta-tile.hide-mobile {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════
ABOUT US PAGE - Mission, Vision & Core Values Responsive
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.mission-vision-section,
.core-values-section {
max-width: 100%;
padding: 0 24px;
}
.core-values-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.section-heading {
font-size: 36px;
}
}
@media (max-width: 768px) {
.mission-vision-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.mv-card {
padding: 32px 24px;
}
.mv-card h3 {
font-size: 24px;
}
.section-heading {
font-size: 32px;
margin-bottom: 36px;
}
}
@media (max-width: 640px) {
.mission-vision-section {
margin: 30px auto 40px;
}
.core-values-section {
margin: 40px auto 60px;
}
.mission-vision-grid,
.core-values-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.mv-card {
padding: 28px 20px;
}
.mv-card h3 {
font-size: 22px;
}
.core-value-card {
padding: 28px 20px;
}
.core-value-card h4 {
font-size: 18px;
}
.section-heading {
font-size: 28px;
margin-bottom: 28px;
}
}
/* ═══════════════════════════════════════════════════════════
FLOATING ACTION BUTTONS - WhatsApp & Scroll to Top
═══════════════════════════════════════════════════════════ */
.floating-actions {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-end;
}
.fab-btn {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.fab-btn:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.fab-btn:active {
transform: translateY(-2px);
}
/* WhatsApp Button */
.fab-whatsapp {
background: #25D366;
color: #ffffff;
}
.fab-whatsapp:hover {
background: #caa943;
}
.fab-whatsapp svg {
fill: #ffffff;
}
/* Scroll to Top Button */
.fab-scroll-top {
background: var(--charcoal, #2B2B2B);
color: #ffffff;
}
.fab-scroll-top:hover {
background: var(--gold, #C9A84C);
}
.fab-scroll-top svg {
stroke: #ffffff;
}
/* Show/Hide Animation */
.fab-btn.show {
animation: fabSlideIn 0.3s ease-out forwards;
}
.fab-btn.hide {
animation: fabSlideOut 0.3s ease-out forwards;
}
@keyframes fabSlideIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fabSlideOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.floating-actions {
bottom: 20px;
right: 20px;
gap: 10px;
}
.fab-btn {
width: 50px;
height: 50px;
}
.fab-btn svg {
width: 22px;
height: 22px;
}
}
@media (max-width: 480px) {
.floating-actions {
bottom: 16px;
right: 16px;
}
.fab-btn {
width: 48px;
height: 48px;
}
.fab-btn svg {
width: 20px;
height: 20px;
}
}