:root {
/* === HERITAGE BURGUNDY & GOLD palette ================================ */
/* Primary — burgundy */
--vmc-burgundy: #5b1226;
--vmc-burgundy-deep: #3a0d18; /* hero / footer / navbar / admin sidebar */
--vmc-burgundy-soft: #7a1a32; /* hover states */
/* Gold (precious metal accent) */
--vmc-gold: #c9a24a;
--vmc-gold-soft: #e3c98a;
--vmc-gold-deep: #8c7026;
/* Surfaces & ink */
--vmc-surface: #ffffff;
--vmc-soft: #faf6ee; /* page background — warm cream */
--vmc-warm: #f4ecdb; /* alternate cream section */
--vmc-ink: #1f1a1c; /* warm-black body text */
--vmc-muted: #4b3f44; /* warm muted */
--vmc-line: rgba(91, 18, 38, 0.12);
--vmc-line-strong: rgba(91, 18, 38, 0.25);
/* === Backwards-compatible aliases (so older selectors keep working) === */
--vmc-maroon: var(--vmc-burgundy);
--vmc-maroon-deep: var(--vmc-burgundy-deep);
--vmc-coffee: var(--vmc-burgundy);
--vmc-coffee-deep: var(--vmc-burgundy-deep);
--vmc-coffee-soft: var(--vmc-burgundy-soft);
--vmc-champagne: var(--vmc-gold);
--vmc-champagne-soft: var(--vmc-gold-soft);
--vmc-champagne-deep: var(--vmc-gold-deep);
--vmc-gold-dark: var(--vmc-gold-deep);
--vmc-emerald: var(--vmc-burgundy);
--vmc-emerald-soft: var(--vmc-burgundy-soft);
--vmc-emerald-deep: var(--vmc-burgundy-deep);
--vmc-blue: var(--vmc-burgundy);
--vmc-green: var(--vmc-burgundy);
/* Typography — Manrope for body/UI, Cormorant Garamond for headings.
The serif display face on headings instantly reads as luxury
jewellery branding. Utilitarian surfaces (admin, product-card
titles, filter chips) explicitly opt back into --vmc-font-sans for
legibility. */
--vmc-font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--vmc-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
/* Brand-tinted shadows (warm burgundy-toned, not flat black) */
--vmc-shadow-sm: 0 2px 6px rgba(58, 13, 24, 0.08);
--vmc-shadow-md: 0 10px 28px rgba(58, 13, 24, 0.14);
--vmc-shadow-lg: 0 22px 56px rgba(58, 13, 24, 0.22);
/* Easing curves for fluid hover animations */
--ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-fluid: cubic-bezier(0.22, 1, 0.36, 1);
}
* { -webkit-tap-highlight-color: transparent; }
html {
background-color: #2a0a12;
scroll-behavior: smooth;
overflow-x: clip; /* defensive: no horizontal scroll/gap */
}
body {
color: var(--vmc-ink);
font-family: var(--vmc-font-sans);
font-weight: 400;
font-size: 15.5px;
line-height: 1.55;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip; /* clip (not hidden) so position:sticky still works */
/* ------------------------------------------------------------------
Luxurious atmospheric backdrop — 6 stacked layers (top → bottom):
1. Top-right gold halo (corner lit by light)
2. Mid-right secondary gold breath
3. Bottom-left burgundy whisper
4. Top-left soft champagne glow
5. Fine paper-grain dot pattern
6. Edge vignette (subtle burgundy darkening at the perimeter)
7. Vertical cream→warm-beige gradient base
All fixed so the lighting stays put as the user scrolls. Admin
pages still get their own .admin-shell background on top.
------------------------------------------------------------------ */
background-color: var(--vmc-soft);
background-image:
radial-gradient(ellipse 55% 45% at 100% 0%, rgba(201, 162, 74, 0.16) 0%, transparent 60%),
radial-gradient(ellipse 45% 35% at 95% 50%, rgba(201, 162, 74, 0.07) 0%, transparent 65%),
radial-gradient(ellipse 55% 50% at 0% 100%, rgba(91, 18, 38, 0.09) 0%, transparent 60%),
radial-gradient(ellipse 40% 35% at 0% 0%, rgba(243, 220, 145, 0.10) 0%, transparent 60%),
radial-gradient(circle at 1px 1px, rgba(91, 18, 38, 0.045) 1px, transparent 0),
radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(91, 18, 38, 0.04) 100%),
linear-gradient(180deg,
var(--vmc-soft) 0%,
#f6ecd6 45%,
#f2e6cc 100%);
background-size: auto, auto, auto, auto, 24px 24px, auto, auto;
background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed;
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3,
.detail-title, .section-heading h2,
.vmc-navbar .navbar-brand strong {
font-family: var(--vmc-font-display);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--vmc-burgundy-deep);
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.vmc-navbar .navbar-brand strong {
font-size: 1.45rem;
color: #fff;
}
/* === Slim modern announcement banner ================================== */
.vmc-announcement {
width: 100%;
font-weight: 500;
letter-spacing: 0.01em;
position: relative;
overflow: hidden;
box-shadow: 0 1px 8px rgba(31, 22, 17, 0.15);
/* Extend the burgundy plate up behind the iOS notch / Dynamic Island.
Content lives in .vmc-announcement-inner and stays below the notch;
only the background colour extends behind it. */
padding-top: env(safe-area-inset-top, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
animation: announceSlideDown 280ms var(--ease-out-fluid) both;
transition: max-height 280ms var(--ease-out-fluid),
opacity 200ms ease,
padding 240ms var(--ease-out-fluid),
margin 240ms var(--ease-out-fluid);
}
/* When the announcement is rendered above the navbar it already covers the
notch — drop the nav's duplicate top inset so the bar doesn't get an
extra-tall padding stack. */
body:has(.vmc-announcement) .vmc-nav {
padding-top: 0.65rem !important;
}
/* iOS notch / Dynamic Island coverage — paint a burgundy strip behind the
status bar so the body's cream backdrop doesn't show through.
A fixed pseudo-element is more reliable than relying on the navbar's
own padding-top extending behind the notch (sticky/static elements can
fail to paint into the safe-area region depending on layout). When the
announcement bar is present it covers the notch itself, so we hide this
strip in that case. */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: env(safe-area-inset-top, 0px);
background: #2a0a12;
z-index: 1100;
pointer-events: none;
}
body.is-admin-context::before {
/* Announcement supplies its own burgundy plate, admin shell has its
own backdrop — don't double-paint. */
background: transparent;
}
/* Bright sweeping shine — uses a positioned strip animated with `left`,
no blend-mode (which can be flaky across backgrounds). */
.vmc-announcement::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -50%;
width: 30%;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.35) 35%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.35) 65%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-22deg);
animation: announceShine 2.6s linear infinite;
pointer-events: none;
z-index: 1;
}
.vmc-announcement.is-hiding,
.vmc-announcement.vmc-announcement-dismissing {
max-height: 0;
opacity: 0;
padding: 0 !important;
margin: 0 !important;
}
.vmc-announcement-inner {
display: flex;
align-items: center;
justify-content: center;
padding: 0.32rem 1rem;
position: relative;
z-index: 1;
min-height: 28px;
}
/* Sliding rotation: the track holds all slides absolutely positioned on
top of each other; only one carries .is-active at a time. */
.vmc-announcement-track {
position: relative;
width: 100%;
min-height: 1.2em;
transition: height 240ms var(--ease-out-fluid);
}
.vmc-announcement-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transform: translateY(120%);
}
.vmc-announcement-slide.is-active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
animation: announceSlideIn 600ms var(--ease-out-fluid) both;
}
.vmc-announcement-slide.is-leaving {
animation: announceSlideOut 600ms var(--ease-out-fluid) both;
}
/* Single-message case: no absolute positioning needed. */
.vmc-announcement:not(.has-rotation) .vmc-announcement-track { min-height: 0; }
.vmc-announcement:not(.has-rotation) .vmc-announcement-slide {
position: static;
opacity: 1;
transform: none;
pointer-events: auto;
animation: none;
}
@keyframes announceSlideIn {
0% { opacity: 0; transform: translateY(120%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes announceSlideOut {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-120%); }
}
.hero-orb-image {
width: 280px;
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
animation: heroFloat 5.8s ease-in-out infinite; /* keep the float */
}
.vmc-announcement-text {
text-align: center;
font-size: 0.82rem;
line-height: 1.35;
}
.vmc-announcement-text a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
transition: opacity 150ms ease;
}
.vmc-announcement-text a:hover { opacity: 0.85; }
@keyframes announceSlideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes announceShine {
0% { left: -50%; }
60% { left: 130%; }
100% { left: 130%; } /* hold off-screen, then loop */
}
@media (max-width: 575.98px) {
.vmc-announcement-inner {
padding: 0.3rem 0.7rem;
}
.vmc-announcement-text { font-size: 0.78rem; line-height: 1.3; }
}
a {
color: var(--vmc-blue);
text-decoration: none;
}
a:hover {
color: var(--vmc-maroon);
}
.vmc-navbar {
/* MULTI-LAYER MESH GRADIENT — five stacked layers create real visual
depth without changing any of the navbar's structure. From bottom
up in the layer stack:
1. Base linear gradient — coffee → midnight-burgundy → coffee.
The dual-coffee bookends give the centre its richness.
2. Right-edge burgundy glow — depth on the cart-link side.
3. Bottom centre warm bloom — anchors visual weight downward.
4. Top-left gold halo — the "light source" of the scene.
5. Diagonal gold sheen band — animated horizontal drift so a soft
highlight slowly traverses the surface (like light catching
polished metal). Static fallback for reduced-motion users.
*/
background:
/* 5. Diagonal gold sheen — animated */
linear-gradient(115deg,
transparent 0%,
transparent 38%,
rgba(201, 162, 74, 0.14) 48%,
rgba(255, 230, 175, 0.08) 52%,
transparent 62%,
transparent 100%),
/* 4. Top-left gold halo */
radial-gradient(55% 110% at 12% 0%,
rgba(201, 162, 74, 0.18) 0%,
rgba(201, 162, 74, 0.06) 38%,
transparent 65%),
/* 3. Bottom-centre warm bloom */
radial-gradient(80% 90% at 50% 110%,
rgba(123, 38, 54, 0.32) 0%,
transparent 60%),
/* 2. Right-edge burgundy depth */
radial-gradient(50% 130% at 95% 50%,
rgba(91, 18, 38, 0.28) 0%,
transparent 65%),
/* 1. Base — bookended coffee with a richer burgundy heart */
linear-gradient(115deg,
var(--vmc-coffee-deep) 0%,
#2c0e13 38%,
#320e16 62%,
var(--vmc-coffee-deep) 100%);
/* Inset highlights — polished-metal lip on top + brand hairline at bottom.
Animated background-position was removed (caused a white-flash glitch
on scroll because animating a sticky element's background re-composites
layers on each frame — Safari/Chrome mobile sometimes drop a frame
and show the underlying white briefly). */
box-shadow:
inset 0 1px 0 rgba(201, 162, 74, 0.28),
inset 0 -1px 0 rgba(201, 162, 74, 0.22),
0 10px 28px rgba(31, 22, 17, 0.22);
}
.vmc-navbar .navbar-brand,
.vmc-navbar .nav-link {
color: #fff;
}
.vmc-navbar .nav-link:hover,
.vmc-navbar .nav-link:focus {
color: var(--vmc-champagne-soft);
}
.vmc-navbar .navbar-toggler {
border-color: rgba(255, 255, 255, 0.24);
}
.vmc-navbar .navbar-toggler-icon {
filter: invert(1);
}
.brand-mark {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, var(--vmc-champagne-soft), var(--vmc-champagne) 55%, var(--vmc-champagne-deep) 100%);
color: var(--vmc-coffee-deep);
font-weight: 800;
box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(31, 22, 17, 0.25);
position: relative;
}
.brand-mark::after {
content: "";
position: absolute;
inset: 5px;
border-radius: 50%;
border: 1px dashed rgba(31, 22, 17, 0.3);
pointer-events: none;
}
.navbar-brand small {
display: block;
color: rgba(255, 255, 255, 0.66);
font-size: 0.72rem;
line-height: 1;
}
.cart-count {
display: inline-grid;
min-width: 22px;
height: 22px;
place-items: center;
border-radius: 999px;
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
font-size: 0.75rem;
font-weight: 800;
padding: 0 6px;
line-height: 1;
}
/* === Standout cart button in the navbar (capsule with gold accent) ==== */
.vmc-navbar .nav-link.cart-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.95rem 0.42rem 0.85rem;
border: 1.5px solid var(--vmc-gold);
border-radius: 999px;
background: rgba(201, 162, 74, 0.08);
color: var(--vmc-gold-soft) !important;
font-weight: 600;
line-height: 1;
transition:
background 220ms var(--ease-out-soft),
color 180ms ease,
border-color 180ms ease,
transform 220ms var(--ease-out-soft),
box-shadow 220ms var(--ease-out-soft);
}
.vmc-navbar .nav-link.cart-link:hover,
.vmc-navbar .nav-link.cart-link:focus {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep) !important;
border-color: var(--vmc-gold);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(201, 162, 74, 0.35);
}
.vmc-navbar .nav-link.cart-link:hover .cart-count,
.vmc-navbar .nav-link.cart-link:focus .cart-count {
background: var(--vmc-burgundy-deep);
color: var(--vmc-gold-soft);
}
@media (max-width: 991.98px) {
.vmc-navbar .nav-link.cart-link {
margin: 0.35rem 0;
align-self: flex-start;
}
}
.flash-wrap {
margin-top: 1rem;
}
/* === Capsule buttons across the site (Heritage burgundy/gold) ========= */
.btn,
.btn-vmc,
.btn-outline-vmc,
.btn-gold,
.btn-burgundy,
.btn-outline-light {
border-radius: 999px;
padding: 0.55rem 1.4rem;
font-weight: 600;
letter-spacing: 0.01em;
transition:
transform 220ms var(--ease-out-soft),
box-shadow 220ms var(--ease-out-soft),
background 220ms var(--ease-out-soft),
color 180ms ease,
border-color 180ms ease;
}
.btn-sm { padding: 0.35rem 0.95rem; }
.btn-lg { padding: 0.75rem 1.8rem; font-size: 1.05rem; }
/* Primary brand button — burgundy fill */
.btn-vmc,
.btn-burgundy {
--bs-btn-bg: var(--vmc-burgundy);
--bs-btn-border-color: var(--vmc-burgundy);
--bs-btn-color: #fff;
--bs-btn-hover-bg: var(--vmc-burgundy-deep);
--bs-btn-hover-border-color: var(--vmc-burgundy-deep);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: var(--vmc-burgundy-deep);
background: var(--vmc-burgundy);
color: #fff;
border: 1px solid var(--vmc-burgundy);
}
.btn-vmc:hover,
.btn-burgundy:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(91, 18, 38, 0.28);
background: var(--vmc-burgundy-deep);
color: #fff;
}
/* Outline variant — burgundy line, fills on hover */
.btn-outline-vmc,
.btn-outline-burgundy {
--bs-btn-color: var(--vmc-burgundy);
--bs-btn-border-color: var(--vmc-burgundy);
--bs-btn-hover-bg: var(--vmc-burgundy);
--bs-btn-hover-border-color: var(--vmc-burgundy);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: var(--vmc-burgundy);
--bs-btn-active-border-color: var(--vmc-burgundy);
--bs-btn-active-color: #fff;
background: transparent;
color: var(--vmc-burgundy);
border: 1.5px solid var(--vmc-burgundy);
}
.btn-outline-vmc:hover,
.btn-outline-burgundy:hover {
background: var(--vmc-burgundy);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(91, 18, 38, 0.22);
}
/* === Hero / carousel button styles ===================================== */
/* Primary hero CTA — golden capsule with gradient + warm shadow */
.btn-gold {
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
color: var(--vmc-burgundy-deep);
border: 1px solid var(--vmc-gold-deep);
box-shadow: 0 6px 16px rgba(140, 112, 38, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
font-weight: 700;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-gold:hover,
.btn-gold:focus {
background: linear-gradient(180deg, var(--vmc-gold), var(--vmc-gold-deep));
color: #fff;
border-color: var(--vmc-gold-deep);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(140, 112, 38, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
text-shadow: none;
}
/* Secondary hero CTA — wireframe outline, fills white on hover (matches alternate) */
.btn-outline-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.85);
backdrop-filter: blur(2px);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
background: #fff;
color: var(--vmc-burgundy-deep);
border-color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
}
/* Smaller, mobile-friendly CTAs */
@media (max-width: 575.98px) {
.hero-actions .btn,
.hero-actions .btn-lg {
font-size: 0.95rem;
padding: 0.6rem 1.25rem;
}
.hero-actions { gap: 0.6rem; }
}
/* === Golden shine sweep — applied to all gold buttons site-wide ======
GPU-friendly: animates ONLY `transform: translate3d` (compositor-only,
no layout/paint on every frame). Fixes the laggy/leggy shine on iOS
Safari that the older `left:%` animation caused. */
.btn-gold {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-gold::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 65%;
height: 100%;
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 45%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.55) 55%,
transparent 100%);
transform: translate3d(-180%, 0, 0) skewX(-18deg);
-webkit-transform: translate3d(-180%, 0, 0) skewX(-18deg);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
pointer-events: none;
animation: btnShineIdle 3.6s ease-in-out infinite;
}
@keyframes btnShineIdle {
0% { transform: translate3d(-180%, 0, 0) skewX(-18deg); }
55% { transform: translate3d( 320%, 0, 0) skewX(-18deg); }
100% { transform: translate3d( 320%, 0, 0) skewX(-18deg); }
}
/* On hover/focus run the shine fast and once for a snappy feel */
.btn-gold:hover::after,
.btn-gold:focus-visible::after {
animation: btnShineFast 700ms var(--ease-out-fluid) 1;
}
@keyframes btnShineFast {
0% { transform: translate3d(-180%, 0, 0) skewX(-18deg); }
100% { transform: translate3d( 320%, 0, 0) skewX(-18deg); }
}
/* Disable all button shine inside admin — keep it focused on content */
.admin-shell .btn-gold::after,
.admin-shell .btn-vmc::after,
.admin-shell .btn-burgundy::after {
display: none !important;
animation: none !important;
opacity: 0 !important;
}
/* === Size picker (admin → product edit) ============================== */
.size-picker {
border: 1px solid var(--vmc-line);
border-radius: 10px;
background: #fff;
padding: 0.85rem 1rem;
}
.size-picker-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding-bottom: 0.7rem;
margin-bottom: 0.7rem;
border-bottom: 1px dashed var(--vmc-line);
}
.size-picker-count {
font-size: 0.92rem;
color: var(--vmc-muted);
}
.size-picker-count strong {
color: var(--vmc-burgundy);
font-weight: 800;
font-size: 1.05rem;
margin-right: 0.2rem;
}
.size-picker-quick {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
align-items: center;
}
/* === Sort dropdown in the toolbar =========================================*/
.size-picker-sort {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.32rem 0.75rem;
border: 1px solid var(--vmc-line-strong);
border-radius: 8px;
background: #fff;
font-size: 0.82rem;
color: var(--vmc-coffee-deep);
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease;
}
.size-picker-sort:hover { border-color: var(--vmc-gold); }
.size-picker-sort i { color: var(--vmc-gold-deep); }
.size-picker-sort select {
border: 0;
background: transparent;
font-size: 0.82rem;
font-weight: 600;
color: var(--vmc-coffee-deep);
cursor: pointer;
outline: none;
padding-right: 0.2rem;
}
/* === Size picker — table layout (new) ===================================*/
.size-picker-table-scroll {
border: 1px solid var(--vmc-line);
border-radius: 10px;
overflow: auto;
max-height: 520px;
background: #fff;
}
.size-picker-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.9rem;
}
.size-picker-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: linear-gradient(180deg, #fff 0%, #fdfbf6 100%);
text-align: left;
font-size: 0.72rem;
font-weight: 800;
color: var(--vmc-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid var(--vmc-line);
white-space: nowrap;
}
.size-picker-table tbody td {
padding: 0.6rem 0.85rem;
border-bottom: 1px solid var(--vmc-line);
vertical-align: middle;
background: #fff;
transition: background 140ms ease;
}
.size-picker-table tbody tr:last-child td { border-bottom: 0; }
/* Selected-row highlight (cream tint) */
.size-row.is-selected td {
background: rgba(201, 162, 74, 0.10);
}
.size-row.is-selected + .size-row.is-selected td {
border-top-color: rgba(201, 162, 74, 0.25);
}
.size-row:not(.is-selected):hover td {
background: rgba(201, 162, 74, 0.05);
cursor: pointer;
}
.size-row.is-inactive td { opacity: 0.6; }
/* Column widths */
.sp-col-tick { width: 44px; }
.sp-col-size { width: 140px; }
.sp-col-weight { width: 180px; text-align: right; }
.sp-col-details { /* flex */ }
/* Custom checkbox (gold-filled when checked) */
.sp-check {
display: inline-flex;
cursor: pointer;
margin: 0;
}
.sp-check input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.sp-check-box {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 6px;
border: 1.5px solid var(--vmc-line-strong);
color: transparent;
background: #fff;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.size-row.is-selected .sp-check-box {
background: var(--vmc-gold);
border-color: var(--vmc-gold-deep);
color: var(--vmc-burgundy-deep);
}
/* Size column */
.sp-die {
font-weight: 800;
font-size: 0.95rem;
color: var(--vmc-ink);
letter-spacing: 0.02em;
}
.size-row.is-selected .sp-die { color: var(--vmc-burgundy-deep); }
.sp-inactive {
display: inline-block;
margin-left: 0.4rem;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #b45309;
vertical-align: middle;
}
/* Details column */
.sp-meta {
display: inline-flex;
flex-wrap: wrap;
gap: 0.35rem 0.6rem;
align-items: center;
color: var(--vmc-coffee-deep);
font-size: 0.85rem;
}
.sp-meta-part { white-space: nowrap; }
.sp-meta-dot {
color: var(--vmc-gold-deep);
font-weight: 800;
}
/* Weight pill */
.sp-weight {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.65rem;
border: 1.5px solid var(--vmc-line-strong);
border-radius: 8px;
background: #fff;
opacity: 0.55;
min-width: 130px;
transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
}
.size-row.is-selected .sp-weight {
opacity: 1;
border-color: var(--vmc-gold);
background: #fffdf6;
}
.sp-weight:focus-within {
border-color: var(--vmc-gold-deep);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}
.sp-weight-input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
border: 0;
background: transparent;
padding: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--vmc-ink);
text-align: right;
outline: none;
-moz-appearance: textfield;
}
.sp-weight-input::-webkit-outer-spin-button,
.sp-weight-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.sp-weight-input::placeholder { color: var(--vmc-muted); font-weight: 500; }
.sp-weight-input:disabled { cursor: not-allowed; color: var(--vmc-muted); }
.sp-weight-unit {
flex: 0 0 auto;
font-size: 0.72rem;
font-weight: 800;
color: var(--vmc-gold-deep);
letter-spacing: 0.04em;
}
/* Footer note */
.size-picker-note {
margin-top: 0.7rem;
padding: 0.65rem 0.85rem;
border-radius: 8px;
background: rgba(201, 162, 74, 0.08);
border: 1px dashed rgba(201, 162, 74, 0.35);
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--vmc-coffee-deep);
line-height: 1.5;
}
.size-picker-note i {
color: var(--vmc-gold-deep);
margin-top: 0.15rem;
}
/* Mobile — tighten cells and shrink weight pill */
@media (max-width: 540px) {
.size-picker-table thead th,
.size-picker-table tbody td { padding: 0.5rem 0.55rem; }
.sp-col-size { width: 100px; }
.sp-col-weight { width: 130px; }
.sp-meta { font-size: 0.78rem; gap: 0.2rem 0.4rem; }
.sp-weight {min-width: 50px;padding: 0.3rem 0.5rem;}
.sp-weight-input { font-size: 0.88rem; }
.size-picker-sort { padding: 0.28rem 0.55rem; font-size: 0.78rem; }
.size-picker-sort select { font-size: 0.78rem; }
}
.size-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.45rem;
}
/* Compact single-row card: [tick] [info ............] [weight] */
.size-pick-card {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.7rem;
border: 1.5px solid var(--vmc-line);
border-radius: 10px;
cursor: pointer;
background: #fff;
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
user-select: none;
min-height: 56px;
}
.size-pick-card .size-pick-info {
flex: 1 1 auto;
min-width: 0;
}
.size-pick-card .size-pick-weight {
flex: 0 0 auto;
}
.size-pick-card:hover {
border-color: var(--vmc-gold);
background: rgba(201, 162, 74, 0.06);
}
.size-pick-card input[type="checkbox"] {
/* Visually hidden but still accessible */
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.size-pick-tick {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 5px;
border: 1.5px solid var(--vmc-line-strong);
display: grid;
place-items: center;
color: transparent;
font-size: 0.85rem;
line-height: 1;
background: #fff;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.size-pick-info {
flex: 1 1 auto;
display: flex;
flex-direction: column;
line-height: 1.25;
min-width: 0;
}
.size-pick-info strong {
font-weight: 700;
color: var(--vmc-ink);
font-size: 0.95rem;
}
/* The Die No label specifically — allow wrapping, no ellipsis collapse */
.size-pick-info .size-pick-die {
white-space: normal;
overflow: visible;
text-overflow: clip;
display: inline-block;
}
.size-pick-info small {
color: var(--vmc-muted);
font-size: 0.78rem;
margin-top: 1px;
}
.size-pick-info em.text-warning {
color: #b45309 !important;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.7rem;
margin-top: 1px;
}
/* Selected state — gold border + filled tick */
.size-pick-card.is-selected {
border-color: var(--vmc-gold);
background: rgba(201, 162, 74, 0.12);
box-shadow: 0 4px 10px rgba(201, 162, 74, 0.18);
}
.size-pick-card.is-selected .size-pick-tick {
background: var(--vmc-gold);
border-color: var(--vmc-gold-deep);
color: var(--vmc-burgundy-deep);
}
.size-pick-card.is-inactive {
opacity: 0.55;
}
/* Tiny info button (i) on each size card — opens tooltip with full details */
.size-pick-info-btn {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(--vmc-gold-deep);
background: transparent;
border: 1px solid var(--vmc-line-strong);
font-size: 0.85rem;
line-height: 1;
cursor: help;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.size-pick-info-btn:hover {
background: var(--vmc-warm);
color: var(--vmc-burgundy);
border-color: var(--vmc-gold);
}
/* === Compact size-pick-card (single-line: tick · info · weight) === */
.size-pick-info {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.size-pick-die {
font-size: 0.95rem;
font-weight: 800;
color: var(--vmc-ink);
letter-spacing: 0.02em;
line-height: 1.15;
}
.size-pick-card.is-selected .size-pick-die {
color: var(--vmc-burgundy-deep);
}
.size-pick-meta {
margin-top: 0.15rem;
font-size: 0.72rem;
font-weight: 500;
color: var(--vmc-muted);
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.size-pick-card.is-selected .size-pick-meta {
color: var(--vmc-coffee-deep);
}
.size-pick-inactive {
margin-top: 0.15rem;
font-style: normal;
font-weight: 700;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #b45309;
}
/* Tight weight pill — sits at the right of the row */
.size-pick-weight {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.3rem 0.55rem;
border: 1.5px solid var(--vmc-line-strong);
border-radius: 8px;
background: #fff;
opacity: 0.55;
transition: border-color 140ms ease, background 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
}
.size-pick-card.is-selected .size-pick-weight {
opacity: 1;
border-color: var(--vmc-gold);
background: #fffdf6;
}
.size-pick-weight:focus-within {
border-color: var(--vmc-gold-deep);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}
.size-pick-weight-input {
width: 64px;
border: 0;
background: transparent;
padding: 0;
font-size: 0.9rem;
font-weight: 700;
color: var(--vmc-ink);
text-align: right;
outline: none;
/* Hide spin arrows — admins type the value */
-moz-appearance: textfield;
}
.size-pick-weight-input::-webkit-outer-spin-button,
.size-pick-weight-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.size-pick-weight-input::placeholder {
color: var(--vmc-muted);
font-weight: 500;
}
.size-pick-weight-input:disabled {
cursor: not-allowed;
color: var(--vmc-muted);
}
.size-pick-weight-unit {
flex: 0 0 auto;
font-size: 0.7rem;
font-weight: 800;
color: var(--vmc-gold-deep);
letter-spacing: 0.04em;
text-transform: lowercase;
}
/* Mobile: keep single row but reduce input width slightly so all 3 zones fit */
@media (max-width: 420px) {
.size-pick-card {
gap: 0.5rem;
padding: 0.5rem 0.6rem;
}
.size-pick-weight-input {
width: 54px;
font-size: 0.85rem;
}
.size-pick-meta {
font-size: 0.68rem;
}
}
/* === Audit log page ==================================================== */
.audit-filter-bar {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 10px;
padding: 0.75rem 0.9rem;
}
.audit-filter-row {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 0.5rem 0.75rem;
}
.audit-filter-select {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 150px;
}
.audit-filter-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--vmc-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.audit-filter-label i {
color: var(--vmc-gold-deep);
margin-right: 0.2rem;
}
.audit-table tbody tr:hover td { background: rgba(201, 162, 74, 0.04); }
.audit-table code { font-size: 0.7rem; }
.audit-diff summary {
list-style: none;
cursor: pointer;
}
.audit-diff summary::-webkit-details-marker { display: none; }
.audit-diff[open] summary { color: var(--vmc-burgundy-deep); font-weight: 700; }
.audit-diff-json {
margin-top: 0.5rem;
padding: 0.65rem 0.85rem;
background: #faf6ee;
border: 1px solid var(--vmc-line);
border-radius: 6px;
font-size: 0.72rem;
max-width: 420px;
max-height: 280px;
overflow: auto;
text-align: left;
color: var(--vmc-coffee-deep);
white-space: pre-wrap;
word-break: break-word;
}
.audit-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.audit-pager-buttons {
display: inline-flex;
gap: 0.3rem;
}
/* === Product status / tag pill (front-end) ============================ */
.product-tag-pill {
display: inline-block;
padding: 0.32em 0.85em;
border-radius: 999px;
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(140, 112, 38, 0.32);
}
/* Variants by tag — keep the home page colourful but consistent */
.product-tag-new-arrival { background: #15803d; color: #fff; }
.product-tag-bestseller { background: var(--vmc-burgundy); color: var(--vmc-gold-soft); }
.product-tag-limited-edition { background: #7c2d12; color: var(--vmc-gold-soft); }
.product-tag-coming-soon { background: var(--vmc-muted); color: #fff; }
/* Smaller variant when sitting on a product card */
/* =====================================================================
Page-transition fade — every page does a 220ms opacity rise on first
paint. Server-rendered content is in the DOM immediately (good for
SEO + perceived speed); the fade just softens the abrupt reveal.
Disabled entirely for users who opted out of motion.
===================================================================== */
@keyframes pageEnterFade {
from { opacity: 0; }
to { opacity: 1; }
}
body {
animation: pageEnterFade 220ms ease-out;
animation-fill-mode: backwards;
}
@media (prefers-reduced-motion: reduce) {
body { animation: none; }
}
/* =====================================================================
Skeleton loaders — replace the product grid during AJAX filter runs
so the user sees the grid SHAPE updating immediately (much better
perceived performance than an opacity dim on the old results).
===================================================================== */
.product-skeleton-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 14px;
overflow: hidden;
min-height: 320px;
}
.product-skeleton-image,
.product-skeleton-bar {
/* All four corners share the same shimmer animation — the moving
linear-gradient creates a subtle gold sheen sweeping left → right
once per second. */
background: linear-gradient(
90deg,
rgba(91, 18, 38, 0.06) 0%,
rgba(201, 162, 74, 0.14) 50%,
rgba(91, 18, 38, 0.06) 100%
);
background-size: 200% 100%;
animation: skeletonShimmer 1.2s linear infinite;
}
.product-skeleton-image {
flex: 0 0 auto;
aspect-ratio: 1 / 1; /* matches the real product image */
width: 100%;
}
.product-skeleton-body {
padding: 0.9rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
flex: 1 1 auto;
}
.product-skeleton-bar {
height: 12px;
border-radius: 6px;
}
.product-skeleton-bar.lg { height: 16px; width: 75%; }
.product-skeleton-bar.md { height: 12px; width: 55%; }
.product-skeleton-bar.sm { height: 10px; width: 40%; }
.product-skeleton-button {
height: 34px;
border-radius: 8px;
margin-top: auto;
background: linear-gradient(
90deg,
rgba(201, 162, 74, 0.12) 0%,
rgba(201, 162, 74, 0.22) 50%,
rgba(201, 162, 74, 0.12) 100%
);
background-size: 200% 100%;
animation: skeletonShimmer 1.2s linear infinite;
}
@keyframes skeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.product-skeleton-image,
.product-skeleton-bar,
.product-skeleton-button { animation: none; }
}
.product-card { position: relative; } /* anchor for the absolute pill */
.product-card .product-tag-pill {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
font-size: 0.62rem;
padding: 0.25em 0.65em;
}
/* === Quantity toggle group (product page) — compact ================== */
.qty-mode-toggle {
display: inline-flex;
}
.qty-mode-toggle .btn-outline-vmc,
.qty-mode-toggle .btn-outline-vmc.btn-sm {
padding: 0.28rem 0.85rem;
font-size: 0.82rem;
font-weight: 600;
border-radius: 0;
line-height: 1.4;
}
.qty-mode-toggle .btn-outline-vmc:first-of-type { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.qty-mode-toggle .btn-outline-vmc:last-of-type { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.qty-total-display {
font-weight: 700;
color: var(--vmc-gold-deep) !important;
background: rgba(201, 162, 74, 0.1);
padding: 2px 8px;
border-radius: 999px;
font-size: 0.78rem !important;
}
/* === Detail-media hover zoom ========================================= */
.detail-media.has-zoom {
cursor: zoom-in;
overflow: hidden;
border-radius: 12px;
background: var(--vmc-coffee-deep);
}
.detail-media.has-zoom img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms var(--ease-out-fluid), opacity 260ms ease;
will-change: transform, opacity;
}
.detail-media.has-zoom.is-zooming img {
transform: scale(1.6);
transition: transform 520ms var(--ease-out-soft);
}
.detail-media.has-zoom img.is-fading {
opacity: 0;
transition: opacity 140ms ease;
}
/* === Product image gallery (single-pane prev/next) =================== */
.product-gallery {
position: relative;
outline: none;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--vmc-burgundy-deep);
border: 1px solid var(--vmc-line);
display: grid;
place-items: center;
font-size: 1.35rem;
box-shadow: var(--vmc-shadow-md);
z-index: 3;
cursor: pointer;
transition: background 180ms ease, color 180ms ease, transform 200ms var(--ease-out-soft);
}
.gallery-nav:hover,
.gallery-nav:focus-visible {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
outline: none;
}
.gallery-nav-prev { left: 0.85rem; }
.gallery-nav-next { right: 0.85rem; }
.gallery-counter {
position: absolute;
top: 0.85rem;
right: 0.85rem;
z-index: 3;
background: rgba(31, 22, 17, 0.78);
color: #fff;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 0.22rem 0.65rem;
border-radius: 999px;
}
.gallery-thumbs {
display: flex;
gap: 0.5rem;
margin-top: 0.7rem;
flex-wrap: wrap;
}
.gallery-thumb {
width: 64px;
height: 64px;
padding: 0;
border-radius: 8px;
border: 2px solid var(--vmc-line);
background: #f1d99c;
overflow: hidden;
cursor: pointer;
transition: border-color 180ms ease, transform 180ms var(--ease-out-soft);
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-thumb:hover {
border-color: var(--vmc-gold);
}
.gallery-thumb.is-active {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.35);
}
@media (max-width: 575.98px) {
.gallery-nav { width: 36px; height: 36px; font-size: 1.1rem; }
.gallery-thumb { width: 52px; height: 52px; }
}
/* === Product image upload slots (hero + secondary) =====================
Two side-by-side slots with IDENTICAL dimensions regardless of whether
they contain a real photo or the empty-state placeholder. The preview
area uses a fixed aspect ratio so both columns stay aligned. */
.product-image-slot {
display: flex;
flex-direction: column;
height: 100%;
border: 1px dashed var(--vmc-line-strong);
border-radius: 10px;
padding: 0.95rem;
background: #fdfaf2;
}
.product-image-slot-primary {
border-color: var(--vmc-gold);
background: linear-gradient(180deg, #fff7dc 0%, #fdfaf2 100%);
}
/* "Inherited" pills next to the category dropdown — read-only display of
shape + metal derived from the chosen category. */
.product-derived-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
padding: 0.35rem 0;
min-height: 38px;
}
.product-derived-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--vmc-line-strong);
background: #fff;
font-size: 0.78rem;
font-weight: 700;
color: var(--vmc-coffee-deep);
letter-spacing: 0.02em;
line-height: 1;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.product-derived-pill i { font-size: 0.85rem; }
.product-derived-pill.is-empty {
color: var(--vmc-muted);
background: #fafafa;
font-weight: 500;
font-style: italic;
}
.product-derived-pill.is-gold {
background: rgba(201, 162, 74, 0.14);
border-color: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
}
.product-derived-pill.is-gold i { color: var(--vmc-gold-deep); }
.product-derived-pill.is-silver {
background: #f3f4f6;
border-color: #cbd5e1;
color: #334155;
}
.product-derived-pill.is-silver i { color: #64748b; }
.product-derived-pill.product-derived-shape.is-set {
background: rgba(123, 38, 54, 0.08);
border-color: rgba(123, 38, 54, 0.35);
color: var(--vmc-burgundy-deep);
}
.product-derived-pill.product-derived-shape.is-set i {
color: var(--vmc-burgundy);
}
.product-image-slot-head {
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Locked-ratio preview frame — same size with or without a photo */
.product-image-slot-preview {
width: 100%;
aspect-ratio: 4 / 3;
border: 1px solid var(--vmc-line);
border-radius: 10px;
background: #fff;
overflow: hidden;
display: grid;
place-items: center;
margin-bottom: 0.55rem;
}
.product-image-slot-current {
width: 100%;
height: 100%;
object-fit: contain; /* don't crop — show the full product */
display: block;
margin: 0;
}
.product-image-slot-placeholder {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
color: var(--vmc-muted);
font-style: italic;
font-size: 0.92rem;
background: transparent;
border: 0;
}
.product-image-slot-placeholder i {
font-size: 1.6rem;
color: var(--vmc-line-strong);
vertical-align: middle;
}
.product-image-slot-filename {
margin: 0 0 0.55rem;
font-family: monospace;
font-size: 0.72rem;
word-break: break-all;
color: var(--vmc-muted);
}
/* File input + helper text glued to the bottom so both slots line up */
.product-image-slot .form-control[type="file"] {
margin-top: auto;
}
@media (max-width: 767.98px) {
.product-image-slot { padding: 0.85rem; }
.product-image-slot-preview { aspect-ratio: 3 / 2; }
}
/* === Product editor form — tighter rhythm on desktop, breath on mobile === */
@media (max-width: 767.98px) {
.admin-panel.p-3 {
padding: 1rem !important;
}
/* Each form column flexes to full width on phones — stack, don't squeeze */
.admin-content form .row > [class*="col-md-"] {
margin-bottom: 0.15rem;
}
/* Size picker becomes single-column on phones for tap-friendly cards */
.size-picker-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* Action bar at the bottom of the form — keep it from looking dropped on mobile */
.admin-content form .d-flex.gap-2 {
flex-wrap: wrap;
}
.admin-content form .d-flex.gap-2 .btn {
flex: 0 0 auto;
}
@media (max-width: 575.98px) {
.admin-content form .d-flex.gap-2 .btn {
flex: 1 1 auto;
text-align: center;
}
}
/* Brief red pulse when admin tries to submit with zero selected */
.size-picker.is-error {
border-color: #b91c1c;
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
animation: sizePickerShake 360ms ease;
}
@keyframes sizePickerShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
}
.size-pick-card:focus-within {
outline: 2px solid rgba(201, 162, 74, 0.55);
outline-offset: 2px;
}
/* === Image-upload preview block (admin) =============================== */
.image-upload-preview {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.6rem;
border: 1px dashed var(--vmc-line-strong);
border-radius: 8px;
background: #fdfaf2;
}
.image-upload-preview img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--vmc-line);
background: var(--vmc-coffee-deep);
}
.image-upload-preview .image-upload-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
line-height: 1.3;
}
.image-upload-preview strong {
font-size: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
/* Upload progress overlay — shown while an image-bearing admin form
uploads via XHR (forms tagged [data-upload-progress]). */
.vmc-upload-overlay {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
background: rgba(26, 6, 16, 0.55);
backdrop-filter: blur(3px);
}
.vmc-upload-overlay.is-active { display: flex; }
.vmc-upload-card {
width: min(360px, 86vw);
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 14px;
padding: 1.4rem 1.5rem 1.5rem;
box-shadow: 0 24px 60px -20px rgba(58, 13, 24, 0.5);
text-align: center;
}
.vmc-upload-title {
font-family: var(--vmc-font-sans);
font-weight: 700;
font-size: 0.95rem;
color: var(--vmc-burgundy-deep);
margin-bottom: 1rem;
}
.vmc-upload-title i { color: var(--vmc-gold-deep); margin-right: 0.35rem; }
.vmc-upload-track {
height: 8px;
border-radius: 999px;
background: var(--vmc-soft);
overflow: hidden;
border: 1px solid var(--vmc-line);
}
.vmc-upload-bar {
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--vmc-gold-deep), var(--vmc-gold), var(--vmc-gold-soft));
transition: width 160ms ease;
}
.vmc-upload-pct {
margin-top: 0.6rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--vmc-muted);
font-variant-numeric: tabular-nums;
}
/* === Admin: simple sans-serif everywhere (no Playfair) ================ */
.admin-shell,
.admin-shell h1,
.admin-shell h2,
.admin-shell h3,
.admin-shell h4,
.admin-shell h5,
.admin-shell h6,
.admin-shell .h1,
.admin-shell .h2,
.admin-shell .h3 {
font-family: var(--vmc-font-sans) !important;
letter-spacing: 0;
}
.admin-shell h1 { font-size: 1.5rem; font-weight: 700; }
.admin-shell h2 { font-size: 1.1rem; font-weight: 700; }
.admin-shell h3 { font-size: 1rem; font-weight: 700; }
.admin-shell .stat-card strong {
font-family: var(--vmc-font-sans) !important;
font-size: 1.9rem;
font-weight: 700;
color: var(--vmc-burgundy);
}
/* =====================================================================
ADMIN PAGE HEAD — the title strip that sits at the top of every admin
page (Settings, Products, Users, Audit Log, etc.). Single component,
one design, no per-page overrides needed below.
Markup it works with (already in every admin page):
Optional subtitle…
New thing
===================================================================== */
.admin-page-head {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 1.1rem 1.3rem 1.1rem 1.5rem;
margin-bottom: 1.4rem;
border: 1px solid var(--vmc-line);
border-radius: 14px;
background:
radial-gradient(75% 110% at 0% 0%,
rgba(201, 162, 74, 0.10) 0%,
rgba(201, 162, 74, 0.03) 35%,
transparent 65%),
linear-gradient(180deg, #fff 0%, var(--vmc-soft) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 14px -8px rgba(58, 13, 24, 0.10);
overflow: hidden;
}
/* Gold accent bar on the LEFT edge — anchors the brand language and
draws the eye to the start of the title. */
.admin-page-head::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg,
var(--vmc-gold-soft) 0%,
var(--vmc-gold) 50%,
var(--vmc-gold-deep) 100%);
}
/* Inner wrapper (the first child) — holds the title + meta. The
icon tile is positioned ABSOLUTELY inside this wrapper so it can sit
vertically-centred against the whole text block (title + subtitle or
title + stats), rather than only the title line. */
.admin-page-head > div:first-child {
position: relative;
padding-left: calc(60px + 1.1rem); /* room for icon tile + gap */
min-height: 56px;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
}
/* H1 is a plain block now — the inline icon visually pops out via
absolute positioning below, so we don't need flex on the h1. */
.admin-page-head h1 {
margin: 0;
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.008em;
line-height: 1.2;
color: var(--vmc-burgundy-deep);
}
/* The inline icon is pulled OUT of the h1 visually — positioned
absolutely inside the first-child div so it sits vertically-centred
against the entire title+content block. Bigger tile (56px) for more
presence; gold gradient + champagne tint + brand-burgundy glyph. */
.admin-page-head h1 i,
.admin-page-head h1 .bi {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 65px;
height: 65px;
border-radius: 13px;
background: linear-gradient(135deg,
rgba(255, 232, 178, 0.55) 0%,
rgba(201, 162, 74, 0.22) 60%,
rgba(201, 162, 74, 0.10) 100%);
border: 1px solid rgba(201, 162, 74, 0.55);
color: var(--vmc-burgundy-deep);
font-size: 1.55rem;
line-height: 1;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 3px 10px -4px rgba(140, 112, 38, 0.30);
/* Bootstrap utility margins on the icon would push the title text
— they're absolutely-positioned now so the margin is irrelevant
but we still neutralise to avoid surprise behaviour. */
margin-right: 0 !important;
}
/* Subtitle paragraph — no padding-left needed because the parent div
already has it. Sits flush below the title. */
.admin-page-head p {
padding-left: 0;
font-size: 0.85rem;
color: var(--vmc-muted);
line-height: 1.55;
}
/* =====================================================================
ADMIN PAGE HEAD STATS — a horizontal row of icon+number+label pills
that replaces the subtitle
on pages with countable meta data
(Admins, Customers, Audit log entries, etc.). Pills are separated by
thin gold vertical dividers and align below the title.
===================================================================== */
.admin-page-head-stats {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0.3rem 0 0;
/* The flex gap creates the spacing between stats; the divider
pseudo-element is positioned within that gap. */
gap: 0 1.25rem;
row-gap: 0.4rem;
}
.admin-page-head-stat {
display: inline-flex;
align-items: center;
gap: 0.55rem;
position: relative;
font-size: 0.85rem;
color: var(--vmc-muted);
font-weight: 500;
line-height: 1.2;
}
/* Vertical divider sits BEFORE each stat after the first one — placed
in the 1.25rem flex gap so it doesn't push other stats around. */
.admin-page-head-stat + .admin-page-head-stat::before {
content: "";
position: absolute;
left: -0.625rem; /* halfway through the gap */
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 22px;
background: linear-gradient(180deg,
transparent 0%,
rgba(201, 162, 74, 0.4) 30%,
rgba(201, 162, 74, 0.4) 70%,
transparent 100%);
}
/* Mini icon tile — same gold-bordered style as the big one, smaller. */
.admin-page-head-stat-icon {
display: inline-grid;
place-items: center;
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 8px;
background: linear-gradient(135deg,
rgba(255, 232, 178, 0.55) 0%,
rgba(201, 162, 74, 0.18) 60%,
rgba(201, 162, 74, 0.08) 100%);
border: 1px solid rgba(201, 162, 74, 0.45);
color: var(--vmc-burgundy-deep);
font-size: 0.9rem;
line-height: 1;
}
.admin-page-head-stat-num {
color: var(--vmc-burgundy-deep);
font-weight: 800;
font-size: 1rem;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.admin-page-head-stat-label {
color: var(--vmc-muted);
font-weight: 500;
}
/* Right-side actions — buttons / links sit on a single line, never wrap
to the next row at desktop width. */
.admin-page-head > .btn,
.admin-page-head > a.btn,
.admin-page-head > a:not(:first-child),
.admin-page-head > form,
.admin-page-head > .admin-page-head-actions {
flex: 0 0 auto;
white-space: nowrap;
}
/* Mobile — shrink the icon tile + tighten padding so long titles don't
crowd against the right edge. Subtitle/stats already wrap naturally. */
@media (max-width: 575.98px) {
.admin-page-head {
padding: 0.95rem 1rem 0.95rem 1.2rem;
border-radius: 12px;
}
.admin-page-head > div:first-child {
padding-left: calc(44px + 0.85rem);
min-height: 44px;
}
.admin-page-head h1 {
font-size: 1.2rem;
}
.admin-page-head h1 i,
.admin-page-head h1 .bi {
width: 44px;
height: 44px;
font-size: 1.15rem;
border-radius: 10px;
}
.admin-page-head-stats {
gap: 0 0.85rem;
row-gap: 0.4rem;
}
.admin-page-head-stat + .admin-page-head-stat::before {
left: -0.425rem;
}
.admin-page-head-stat-icon {
width: 26px;
height: 26px;
font-size: 0.8rem;
}
}
/* === Admin sidebar brand + back/logout links ========================== */
.admin-sidebar .admin-side-brand {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 1.1rem;
border: 0; /* drop the inherited 3px left + add bottom only */
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #fff !important;
text-decoration: none;
margin-bottom: 0.4rem;
flex-shrink: 0;
transition: background 180ms ease;
}
.admin-sidebar .admin-side-brand:hover {
background: rgba(255, 255, 255, 0.04);
padding-left: 1.1rem; /* cancel the nav-link slide (1.4rem) */
}
.admin-sidebar .admin-side-brand::before,
.admin-sidebar .admin-side-brand:hover::before {
content: none; /* no gold glow on the brand */
}
.admin-side-brand .brand-mark {
width: 34px;
height: 34px;
font-size: 0.95rem;
}
/* Admin sidebar logo — replaces the legacy gold "V" brand-mark disc */
.admin-side-brand .admin-side-logo {
width: 34px;
height: 34px;
flex: 0 0 auto;
object-fit: contain;
object-position: center;
border-radius: 6px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.admin-side-brand-text {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
}
.admin-side-brand-text strong {
color: #fff;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.admin-side-brand-text small {
color: rgba(243, 227, 184, 0.7);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.admin-sidebar .admin-side-back {
color: rgba(255, 255, 255, 0.65);
border-left: 3px solid transparent;
}
.admin-sidebar .admin-side-back:hover {
color: var(--vmc-gold-soft);
background: rgba(255, 255, 255, 0.05);
}
.admin-sidebar .admin-side-back i {
color: rgba(255, 255, 255, 0.55);
}
/* "View site" — compact gold-outlined pill. Prefix `.admin-sidebar` to
beat the specificity of `.admin-sidebar a`'s `border-left: 3px solid transparent`. */
.admin-sidebar .admin-side-viewsite {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin: 0.55rem 0.85rem 0.6rem;
padding: 0.5rem 0.9rem;
background: rgba(201, 162, 74, 0.08);
border: 1px solid rgba(201, 162, 74, 0.32);
border-radius: 10px;
color: var(--vmc-gold-soft);
font-size: 0.83rem;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.01em;
flex-shrink: 0;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease;
}
.admin-sidebar .admin-side-viewsite i {
color: var(--vmc-gold);
font-size: 0.95rem;
}
.admin-sidebar .admin-side-viewsite:hover,
.admin-sidebar .admin-side-viewsite:focus-visible {
background: rgba(201, 162, 74, 0.14);
padding-left: 0.9rem; /* cancel the nav-link slide (1.4rem) */
outline: none;
}
.admin-sidebar .admin-side-viewsite::before,
.admin-sidebar .admin-side-viewsite:hover::before {
content: none; /* no gold glow on this pill */
}
/* === Admin user card — premium two-row layout ======================== */
.admin-user-card {
position: relative;
margin: 0.6rem 0.7rem 0.7rem;
padding: 0.85rem 0.9rem 0.75rem;
background: linear-gradient(135deg, rgba(201, 162, 74, 0.22) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(201, 162, 74, 0.18);
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 4px 12px rgba(0, 0, 0, 0.18);
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
/* Row 1 — avatar + name/role. Now an linking to /account.php so the
admin can jump to their profile from inside the admin shell. Reset all
the inherited sidebar-link decoration (underline, border-left, padding)
so it visually matches the old while still being clickable. */
.admin-sidebar .admin-user-top {
display: flex;
align-items: center;
gap: 0.7rem;
min-width: 0;
padding: 0;
margin: 0;
background: transparent;
border: 0 !important;
border-left: 0 !important;
color: inherit;
text-decoration: none !important;
border-radius: 8px;
transition: background 200ms ease;
cursor: pointer;
}
.admin-sidebar .admin-user-top:hover,
.admin-sidebar .admin-user-top:focus-visible {
/* No row-wide background — corners conflict with the card's gradient.
The chevron carries its own circular hover highlight instead. */
background: transparent;
outline: none;
/* Cancel the sidebar-wide `a:hover { padding-left: 1.4rem }` that
otherwise shifts the entire row on hover. */
padding-left: 0 !important;
}
/* Suppress the sidebar-wide `.admin-sidebar a::before` gold-glow pseudo
element on this row — that's the gradient that was lingering behind
the chevron on hover. */
.admin-sidebar .admin-user-top::before,
.admin-sidebar .admin-user-top:hover::before,
.admin-sidebar .admin-user-top:focus-visible::before {
display: none !important;
content: none !important;
background: transparent !important;
opacity: 0 !important;
}
/* No transform on the avatar — was making the disc visibly shift on
hover. The background wash + chevron motion are enough affordance. */
/* Trailing chevron — plain glyph, no background box. The only hover
feedback is the glyph brightening from translucent to gold-soft.
Nothing moves and nothing fills, so no artefacts on the card's
existing gradient. */
/* Chevron sits inside a 28px circle. The circular wash + colour change
only appear when the cursor is on the chevron itself — the rest of
the row stays inert visually but is still clickable for navigation. */
.admin-user-top-chev {
margin-left: auto;
flex: 0 0 28px;
width: 28px;
height: 28px;
display: inline-grid;
place-items: center;
border-radius: 999px;
border: 0;
box-shadow: none;
font-size: 0.85rem;
line-height: 1;
color: rgba(201, 162, 74, 0.55);
background: transparent;
transition: color 200ms ease, background 200ms ease;
}
/* Hovering anywhere on the row lights up the chevron's circle —
reinforces "this whole row navigates" without putting any background
on the row itself (which would conflict with the card's gradient). */
.admin-user-top-chev:hover,
.admin-sidebar .admin-user-top:hover .admin-user-top-chev,
.admin-sidebar .admin-user-top:focus-visible .admin-user-top-chev {
color: var(--vmc-gold-soft);
background: rgba(201, 162, 74, 0.18);
}
.admin-user-avatar {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, var(--vmc-gold-soft), var(--vmc-gold) 55%, var(--vmc-gold-deep) 100%);
color: var(--vmc-burgundy-deep);
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.95rem;
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.18);
}
.admin-user-info {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
overflow: hidden;
}
.admin-user-info strong {
color: #fff;
font-size: 0.88rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-user-info .admin-user-role {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vmc-gold-soft);
font-weight: 700;
}
/* Sign-out — full-width gold-outlined pill at the bottom of the card.
Prefix `.admin-sidebar` so the 1px gold border on all four sides beats
the inherited `border-left: 3px solid transparent` from `.admin-sidebar a`. */
.admin-sidebar .admin-user-signout {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-radius: 8px;
background: rgba(201, 162, 74, 0.06);
border: 1px solid rgba(201, 162, 74, 0.35);
color: var(--vmc-gold-soft);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
line-height: 1;
transition:
background 220ms ease,
color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease;
}
.admin-sidebar .admin-user-signout i {
font-size: 0.95rem;
color: var(--vmc-gold);
transition: color 220ms ease;
}
.admin-sidebar .admin-user-signout:hover,
.admin-sidebar .admin-user-signout:focus-visible {
background: rgba(201, 162, 74, 0.12);
border-color: var(--vmc-gold);
color: #fff;
outline: none;
}
.admin-sidebar .admin-user-signout:hover i,
.admin-sidebar .admin-user-signout:focus-visible i {
color: var(--vmc-gold-soft);
}
/* === Highlighted section head inside admin pages ===================== */
.admin-section-head {
display: flex;
align-items: baseline;
gap: 0.7rem;
flex-wrap: wrap;
margin: 0 0 1rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--vmc-line);
position: relative;
}
.admin-section-head::after {
/* gold underline accent under the heading */
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 64px;
height: 2px;
background: linear-gradient(90deg, var(--vmc-gold), transparent);
border-radius: 2px;
}
.admin-section-head i {
color: var(--vmc-gold-deep);
font-size: 1.05rem;
}
.admin-section-head span {
font-size: 1.05rem;
font-weight: 700;
color: var(--vmc-burgundy);
}
.admin-section-head small {
font-size: 0.78rem;
margin-left: auto;
}
@media (max-width: 575.98px) {
.admin-section-head small { margin-left: 0; flex-basis: 100%; }
}
/* === Toast notifications — modernized 2026 refresh ===================
Glassy burgundy plate with a circular icon chip on the left, a 2px
gold progress bar along the bottom that depletes over the toast's
~2.4s lifetime, and spring entry. */
.vmc-toast-stack {
position: fixed;
bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
left: 50%;
transform: translateX(-50%);
z-index: 1080;
display: flex;
flex-direction: column-reverse;
gap: 0.6rem;
max-width: min(92vw, 440px);
width: max-content;
pointer-events: none;
align-items: stretch;
}
/* =====================================================================
TOAST CARD — soft-tinted card with a colored left accent bar, icon
disc, structured title + optional description + optional action
button. Four variants (success / danger / warning / info) each with
their own tinted bg + accent color. Light background reads better
for important interactions ("View cart") than the previous dark pill.
===================================================================== */
.vmc-toast {
position: relative;
pointer-events: auto;
display: flex;
align-items: flex-start; /* icon aligns to the title ROW (see
.vmc-toast-title min-height) — stays glued
to the title, never floats mid-card */
gap: 0.75rem;
/* FIXED SIZE — the card no longer grows/shrinks with its text. Width is
locked at 380px (wide enough for the single-row "title + action button
+ close" layout to breathe); height is a single row because content is
now a short phrase + optional inline gold button. */
width: 380px;
padding: 0.85rem 0.95rem;
/* Soft diagonal brand gradient base; themes override with their own
tints below. Two-stop gradient gives the card subtle depth. */
background: linear-gradient(135deg, #ffffff 0%, var(--vmc-soft) 100%);
border: 1px solid var(--vmc-line);
border-radius: 14px;
/* Stronger, layered shadow so the card reads clearly above any page
content — tight contact shadow + soft ambient lift. */
box-shadow:
0 1px 2px rgba(58, 13, 24, 0.06),
0 8px 20px -6px rgba(58, 13, 24, 0.22),
0 24px 48px -16px rgba(58, 13, 24, 0.26);
color: var(--vmc-ink);
font-size: 0.88rem;
font-weight: 500;
line-height: 1.4;
transform: translateY(140%) scale(0.96);
opacity: 0;
transition: transform 380ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 220ms ease;
will-change: transform, opacity;
overflow: hidden;
}
.vmc-toast.is-visible {
transform: translateY(0) scale(1);
opacity: 1;
}
.vmc-toast.is-leaving {
transform: translateY(20%) scale(0.96);
opacity: 0;
}
/* While the user is dragging the card (mobile swipe-to-dismiss), JS sets
an inline translateX and adds .is-swiping to kill the transition so the
card tracks the finger 1:1. On release, removing the class restores the
transition for a smooth snap-back. */
.vmc-toast.is-swiping {
transition: none;
}
/* Icon disc — soft tint of the variant color. The parent .vmc-toast uses
align-items: center, so the disc vertically centres against the body —
this is what keeps a single-line title (e.g. "Enquiry cart updated.")
perfectly aligned with the icon instead of sitting high. */
.vmc-toast-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(255, 255, 255, 0.7);
font-size: 1.05rem;
line-height: 1;
}
/* Body — SINGLE ROW: title and (optional) action button sit side by side
on one line. flex-wrap lets the button drop below on very narrow screens
as a graceful fallback. A description, if ever present, takes its own
full-width line (flex-basis: 100%). */
.vmc-toast-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.7rem; /* row-gap (wrap) / column-gap (between title + button) */
}
.vmc-toast-title {
/* min-height matches the icon so a single-line title vertically centres
against it. min-width: 0 lets the title shrink + WRAP inside the flex
row instead of overflowing the fixed-width card (which would clip a
long validation message like "Please choose a purity…"). Short titles
("Added to cart") still fit on one line, so the action-button layout
is unaffected. */
display: flex;
align-items: center;
min-width: 0;
min-height: 32px;
font-weight: 700;
font-size: 0.95rem;
color: var(--vmc-ink);
line-height: 1.3;
letter-spacing: 0.005em;
word-break: break-word; /* wrap long text; break only if a single word is huge */
}
.vmc-toast-desc {
flex-basis: 100%; /* own full-width line if a description is present */
font-size: 0.82rem;
font-weight: 500;
color: var(--vmc-muted);
line-height: 1.45;
word-break: break-word;
}
/* Action — the brand-gold CTA pill. `margin-left: auto` pushes it to the
RIGHT end of the body so it sits next to the close (×) button:
[icon] Title ............... [ View cart → ] [×] */
.vmc-toast-action {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0; /* inline now — no stacked spacing */
padding: 0.45rem 0.95rem;
border-radius: 999px; /* pill — matches .btn-gold across the site */
/* BRAND GOLD CTA — the action button uses the same gold gradient as
every other call-to-action on the site (.btn-gold), regardless of
the toast variant. STATUS is communicated by the green/red/etc.
accent bar + icon; the ACTION is the brand-gold button. Keeps the
toast feeling like it belongs to Vimla Mani Centre, not a generic
SaaS notification. */
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
border: 1px solid var(--vmc-gold-deep);
box-shadow: 0 4px 12px -4px rgba(140, 112, 38, 0.4);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
line-height: 1;
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.vmc-toast-action:hover,
.vmc-toast-action:focus-visible {
background: linear-gradient(180deg, var(--vmc-gold), var(--vmc-gold-deep));
transform: translateY(-1px);
box-shadow: 0 7px 18px -5px rgba(140, 112, 38, 0.5);
outline: none;
}
/* Label (
) + arrow () read as burgundy-deep against the gold —
same contrast pairing as .btn-gold elsewhere. */
.vmc-toast-action > * { color: var(--vmc-burgundy-deep) !important; }
.vmc-toast-action i { font-size: 0.85rem; }
/* ALERT-theme action button — flat light-red, NOT gold. On a red toast a
gold CTA looks out of place; this keeps the button in the same red
family as the card (flat fill, soft red border, red text). Only the
general (success/info) toast keeps the brand-gold "View cart" button. */
.vmc-toast-danger .vmc-toast-action,
.vmc-toast-warning .vmc-toast-action {
background: #fbdedb; /* flat light red */
border-color: rgba(220, 38, 38, 0.30);
box-shadow: none; /* flat — drop the gold lift */
}
.vmc-toast-danger .vmc-toast-action:hover,
.vmc-toast-danger .vmc-toast-action:focus-visible,
.vmc-toast-warning .vmc-toast-action:hover,
.vmc-toast-warning .vmc-toast-action:focus-visible {
background: #f7cbc7; /* slightly deeper on hover */
border-color: rgba(220, 38, 38, 0.55);
box-shadow: 0 4px 10px -4px rgba(220, 38, 38, 0.30);
}
.vmc-toast-danger .vmc-toast-action > *,
.vmc-toast-warning .vmc-toast-action > * {
color: #b91c1c !important; /* red label + arrow */
}
/* Close button — minimal X pinned to the top-right corner. align-self:
flex-start keeps it at the top even when the body is two rows tall
(title + action button); the toast itself is align-items: center. */
.vmc-toast-close {
flex: 0 0 auto;
align-self: flex-start;
width: 24px;
height: 30px;
background: transparent;
border: 0;
color: var(--vmc-muted);
font-size: 1rem;
line-height: 1;
padding: 0;
cursor: pointer;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 160ms ease, background 160ms ease;
margin-top: 0.05rem;
}
.vmc-toast-close:hover,
.vmc-toast-close:focus-visible {
color: var(--vmc-ink);
background: rgba(15, 23, 42, 0.06);
outline: none;
}
/* (Bottom progress bar removed — felt too "SaaS loading bar" for the
brand. The toast still auto-dismisses on a timer and pauses on hover;
there's just no animated bar. The clean card + shadow carry it.) */
/* ---- TWO THEMES ONLY ------------------------------------------------
The generic SaaS green/blue/amber were dropped in favour of two
brand-coherent themes:
GENERAL (success + info) → cream gradient card · burgundy icon glyph
+ title · coffee description.
ALERT (warning + danger) → soft-red gradient card · red icon +
title. Used for errors, issues, and validation/requirement
prompts ("please choose a purity", etc.).
The action button stays brand-gold for BOTH (it's a CTA, not a status
signal). `color` on the toast drives the accent bar + progress bar via
currentColor; the icon glyph + title are set explicitly. */
/* GENERAL — success + info ------------------------------------------- */
.vmc-toast-success,
.vmc-toast-info {
color: var(--vmc-gold-deep);
border-color: rgba(201, 162, 74, 0.42);
/* background gradient is set in the consolidated rule below */
}
.vmc-toast-success .vmc-toast-icon,
.vmc-toast-info .vmc-toast-icon {
background: rgba(201, 162, 74, 0.18);
color: var(--vmc-burgundy-deep); /* burgundy glyph on gold tint */
}
.vmc-toast-success .vmc-toast-title,
.vmc-toast-info .vmc-toast-title {
color: var(--vmc-burgundy-deep);
}
.vmc-toast-success .vmc-toast-desc,
.vmc-toast-info .vmc-toast-desc {
color: var(--vmc-coffee-deep);
}
/* ALERT — warning + danger (errors / issues / requirements) ---------- */
.vmc-toast-danger,
.vmc-toast-warning {
color: #dc2626;
/* Soft-red diagonal gradient (matches the cream theme's gradient style) */
background: linear-gradient(135deg, #fff5f4 0%, #fde7e5 100%);
border-color: rgba(248, 113, 113, 0.45);
}
.vmc-toast-danger .vmc-toast-icon,
.vmc-toast-warning .vmc-toast-icon {
background: rgba(220, 38, 38, 0.14);
color: #dc2626;
}
.vmc-toast-danger .vmc-toast-title,
.vmc-toast-warning .vmc-toast-title {
color: #7f1d1d;
}
.vmc-toast-danger .vmc-toast-desc,
.vmc-toast-warning .vmc-toast-desc {
color: #991b1b;
}
/* Enhance the general theme's gradient too (override the white base) */
.vmc-toast-success,
.vmc-toast-info {
background: linear-gradient(135deg, #fffdf7 0%, var(--vmc-warm) 100%);
}
@media (max-width: 575.98px) {
/* On phones the toast drops down from the TOP — keeps it clear of the
bottom mobile FABs (cart, etc.) which would otherwise collide with
a bottom-anchored toast. Anchored just below the safe-area / notch. */
.vmc-toast-stack {
top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
bottom: auto;
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 1.5rem);
max-width: 380px;
/* column-reverse keeps the NEWEST toast nearest the top anchor
(most prominent), older ones pushed down beneath it. */
flex-direction: column-reverse;
}
/* On phones the fixed 340px desktop width is replaced by a near-full-
bleed card so it reads comfortably on narrow screens. Slides IN from
above and OUT upward (flipped from the desktop bottom behaviour). */
.vmc-toast {
width: 100%;
min-height: 58px;
transform: translateY(-140%) scale(0.96);
padding: 0.8rem 0.9rem;
font-size: 0.86rem;
/* Hint to the browser that horizontal drags are for swipe-dismiss,
not page scroll. */
touch-action: pan-y;
}
.vmc-toast.is-visible { transform: translateY(0) scale(1); }
.vmc-toast.is-leaving { transform: translateY(-20%) scale(0.96); }
.vmc-toast-icon {
width: 30px;
height: 30px;
font-size: 0.95rem;
}
}
/* Reduced-motion on mobile: no slide, just fade (override the translate
defaults so a reduced-motion phone user doesn't get a static off-screen
toast). */
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
.vmc-toast,
.vmc-toast.is-visible { transform: translateY(0); }
.vmc-toast.is-leaving { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.vmc-toast { transition: opacity 220ms ease; transform: translateY(0); }
}
/* === Gap between main and footer — flatten it ======================== */
main { padding-bottom: 0; }
.vmc-footer { margin-top: 0 !important; }
/* Last section before footer shouldn't add a stacked margin */
main > section:last-child { margin-bottom: 0; }
/* === Hover-shake fix ================================================== */
/* The previous shine-on-hover added `::after` only on hover, which made
a brand-new pseudo-element appear and trigger layout when the cursor
sat on the button edge — looked like trembling. Fix: keep the ::after
permanently mounted but invisible until hover, and animate position
only (no layout-affecting properties). */
.btn-vmc,
.btn-burgundy {
position: relative;
overflow: hidden;
isolation: isolate;
backface-visibility: hidden; /* avoid sub-pixel jitter */
-webkit-font-smoothing: antialiased;
}
.btn-vmc::after,
.btn-burgundy::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0.28) 45%,
rgba(255, 255, 255, 0.45) 50%,
rgba(255, 255, 255, 0.28) 55%,
transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
opacity: 0;
transition: opacity 60ms ease;
}
.btn-vmc:hover::after,
.btn-burgundy:hover::after {
opacity: 1;
animation: btnShineFast 600ms var(--ease-out-fluid) 1;
}
/* Same idea for .btn-gold — make sure ::after is always present */
.btn-gold::after {
/* (declared earlier — make idle animation play but don't toggle on hover entry) */
will-change: left;
backface-visibility: hidden;
}
/* Card hovers: keep transforms only, no border-width changes */
.product-card,
.spec-card,
.cart-row,
.stat-card {
backface-visibility: hidden;
transform: translateZ(0); /* GPU layer to prevent jitter */
}
/* === Tightened, organized navbar ====================================== */
.vmc-nav-list {
gap: 0.35rem; /* tight, consistent spacing between items */
align-items: center;
}
@media (min-width: 992px) {
.vmc-nav-list { gap: 0.5rem; }
}
/* "Products" pill — matches the 42px height of cart + user icon pills */
.vmc-nav-products .nav-link,
.vmc-nav-pill .nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 42px; /* same as icon pills */
padding: 0 1.85rem 0 1.85rem; /* generous left+right room */
font-weight: 600;
font-size: 0.92rem;
border-radius: 999px;
border: 1.5px solid transparent; /* matches icon-pill border for consistency */
background: rgba(201, 162, 74, 0.06);
color: var(--vmc-burgundy-deep);
transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
line-height: 1;
letter-spacing: 0.01em;
}
/* Native Bootstrap caret — give it breathing room from the label */
.vmc-nav-products .nav-link.dropdown-toggle::after {
margin-left: 0.55rem;
vertical-align: 0.12em;
border-top-width: 0.32em;
}
.vmc-nav-products .nav-link:hover,
.vmc-nav-products .nav-link.active,
.vmc-nav-pill .nav-link:hover,
.vmc-nav-pill .nav-link.active {
background: rgba(201, 162, 74, 0.16); /* gold tint pill */
color: var(--vmc-burgundy) !important;
border-radius: 999px;
}
/* Kill any underline-on-active from older nav rules — we use pill background instead */
.vmc-nav-products .nav-link.active::after,
.vmc-nav-products .nav-link::after,
.vmc-nav-pill .nav-link.active::after,
.vmc-nav-pill .nav-link::after {
display: none !important;
content: none !important;
}
/* Right-side icon pills (Cart + Account/Sign-in) — uniform 40px discs */
.vmc-nav-icon-wrap {
display: flex;
align-items: center;
}
.vmc-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
position: relative;
width: 42px;
height: 42px;
border-radius: 999px;
color: var(--vmc-burgundy-deep);
background: transparent;
border: 1.5px solid transparent;
text-decoration: none;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.vmc-nav-icon i {
font-size: 1.15rem;
line-height: 1;
}
.vmc-nav-icon:hover,
.vmc-nav-icon:focus-visible,
.vmc-nav-icon.active {
background: rgba(201, 162, 74, 0.14);
border-color: rgba(201, 162, 74, 0.55);
color: var(--vmc-burgundy);
outline: none;
}
/* Cart specifically — gold border outline so it stands out */
.vmc-nav-icon-cart {
border-color: var(--vmc-gold);
background: rgba(201, 162, 74, 0.08);
}
.vmc-nav-icon-cart:hover,
.vmc-nav-icon-cart:focus-visible {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
border-color: var(--vmc-gold);
}
.vmc-nav-icon-cart .cart-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
border-radius: 999px;
background: var(--vmc-burgundy);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
display: grid;
place-items: center;
padding: 0 5px;
box-shadow: 0 2px 6px rgba(91, 18, 38, 0.32);
border: 2px solid #fff;
}
/* 1. Share the exact same outer ring and hover styles for both Cart and User */
.vmc-nav-icon-cart,
.vmc-nav-icon-user {
border-color: var(--vmc-gold);
background: rgba(201, 162, 74, 0.08);
}
.vmc-nav-icon-cart:hover,
.vmc-nav-icon-cart:focus-visible,
.vmc-nav-icon-user:hover,
.vmc-nav-icon-user:focus-visible,
.vmc-nav-icon-user.active {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
border-color: var(--vmc-gold);
}
/* Cart Badge stays the same */
.vmc-nav-icon-cart .cart-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 20px;
height: 20px;
border-radius: 999px;
background: var(--vmc-burgundy);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
display: grid;
place-items: center;
padding: 0 5px;
box-shadow: 0 2px 6px rgba(91, 18, 38, 0.32);
border: 2px solid #fff;
}
/* 2. User Avatar styling — inset it so the outer ring matches the cart */
.vmc-nav-icon-user {
padding: 3.5px; /* Creates a clean gap to separate the inner avatar from the outer ring */
overflow: hidden;
}
.vmc-nav-icon-user .vmc-user-avatar {
width: 100%;
height: 100%;
display: grid;
place-items: center;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, var(--vmc-gold-soft), var(--vmc-gold) 55%, var(--vmc-gold-deep) 100%);
color: var(--vmc-burgundy-deep);
font-weight: 800;
font-size: 0.95rem; /* Slightly reduced to fit the new perfect inner circle */
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.20);
/* Removed the separate hover box-shadow, the outer ring now handles the hover state */
}
.vmc-nav-icon-user::after {
/* hide Bootstrap's caret on the avatar trigger */
display: none !important;
}
/* Hide the inline label on desktop — only shows in collapsed mobile menu */
.vmc-nav-icon-label {
font-weight: 600;
color: var(--vmc-burgundy-deep);
}
/* Mobile (collapsed) navbar — icons get a wider pill that includes the label */
@media (max-width: 991.98px) {
.vmc-nav-list { gap: 0.15rem; }
.vmc-nav-icon {
width: auto;
height: auto;
padding: 0.55rem 0.95rem;
justify-content: flex-start;
border-radius: 8px;
background: transparent;
border-color: transparent;
}
.vmc-nav-icon i { font-size: 1rem; }
.vmc-nav-icon-cart {
border-color: rgba(201, 162, 74, 0.5);
}
.vmc-nav-icon-cart .cart-badge {
position: static;
margin-left: auto;
border: 0;
}
.vmc-nav-icon-user {
padding: 0.45rem 0.75rem; /* restore for mobile menu — text label sits next to avatar */
gap: 0.6rem;
overflow: visible;
}
.vmc-nav-icon-user .vmc-user-avatar {
width: 32px;
height: 32px;
flex: 0 0 auto;
}
}
/* === Account-menu dropdown (kept) ===================================== */
.vmc-user-menu .vmc-user-avatar {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, var(--vmc-gold-soft), var(--vmc-gold) 55%, var(--vmc-gold-deep) 100%);
color: var(--vmc-burgundy-deep);
font-weight: 800;
font-size: 0.92rem;
box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.18);
}
.vmc-user-dropdown {
min-width: 240px;
border-radius: 10px;
border: 1px solid var(--vmc-line);
box-shadow: var(--vmc-shadow-md);
padding: 0.4rem 0;
}
.vmc-user-dropdown-head {
padding: 0.65rem 1rem 0.4rem;
line-height: 1.25;
}
.vmc-user-dropdown-head strong {
display: block;
color: var(--vmc-burgundy-deep);
font-size: 0.95rem;
font-weight: 700;
}
.vmc-user-dropdown-head small {
display: block;
color: var(--vmc-muted);
font-size: 0.78rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Generic dropdown — used by Products */
.vmc-nav-dropdown {
min-width: 220px;
border-radius: 10px;
border: 1px solid var(--vmc-line);
box-shadow: var(--vmc-shadow-md);
padding: 0.4rem 0;
}
.vmc-nav-dropdown .dropdown-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1rem;
font-size: 0.92rem;
color: var(--vmc-ink);
transition: background 140ms ease, color 140ms ease;
}
.vmc-nav-dropdown .dropdown-item i {
color: var(--vmc-gold-deep);
width: 16px;
text-align: center;
}
.vmc-nav-dropdown .dropdown-item:hover,
.vmc-nav-dropdown .dropdown-item:focus {
background: var(--vmc-warm);
color: var(--vmc-burgundy);
}
.vmc-user-dropdown .dropdown-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1rem;
font-size: 0.92rem;
color: var(--vmc-ink);
transition: background 140ms ease, color 140ms ease;
}
.vmc-user-dropdown .dropdown-item i {
color: var(--vmc-gold-deep);
width: 16px;
text-align: center;
}
.vmc-user-dropdown .dropdown-item:hover,
.vmc-user-dropdown .dropdown-item:focus {
background: var(--vmc-warm);
color: var(--vmc-burgundy);
}
.vmc-user-dropdown .vmc-signout {
color: #b91c1c;
font-weight: 600;
}
.vmc-user-dropdown .vmc-signout i { color: #b91c1c; }
.vmc-user-dropdown .vmc-signout:hover,
.vmc-user-dropdown .vmc-signout:focus {
background: #fee2e2;
color: #7f1d1d;
}
/* =====================================================================
USER DROPDOWN — rich variant
Identity card on top (gold-ringed monogram avatar + name + handle +
verified pill), three icon-led action rows hairline-separated, a
pill sign-out button at the bottom.
===================================================================== */
.vmc-user-dropdown--rich {
width: 260px;
min-width: 260px;
padding: 0;
border-radius: 12px;
overflow: hidden;
/* Origin at top-right so the scale opens from the avatar pip
rather than the centre. */
transform-origin: top right;
}
/* Open animation — Bootstrap toggles `.show` on the menu when it opens.
We piggyback on that with a one-shot keyframe so the menu fades + scales
in from the avatar caret. */
.vmc-user-dropdown--rich.show {
/* animation: vmcUserDropdownIn 220ms cubic-bezier(0.22, 1, 0.36, 1); */
}
@keyframes vmcUserDropdownIn {
from {
opacity: 0;
transform: translateY(-6px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Stagger each action row + sign-out button so they slide up just after
the menu finishes opening. Cheap, no JS, no reflow. */
.vmc-user-dropdown--rich.show .vmc-user-dropdown-row,
.vmc-user-dropdown--rich.show .vmc-user-dropdown-signout {
animation: vmcUserDropdownRowIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.vmc-user-dropdown--rich.show .vmc-user-dropdown-row:nth-of-type(1) { animation-delay: 60ms; }
.vmc-user-dropdown--rich.show .vmc-user-dropdown-row:nth-of-type(2) { animation-delay: 110ms; }
.vmc-user-dropdown--rich.show .vmc-user-dropdown-row:nth-of-type(3) { animation-delay: 160ms; }
.vmc-user-dropdown--rich.show .vmc-user-dropdown-row:nth-of-type(4) { animation-delay: 200ms; }
.vmc-user-dropdown--rich.show .vmc-user-dropdown-signout { animation-delay: 240ms; }
@keyframes vmcUserDropdownRowIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* The verified pill in the header card lands fractionally later so it
reads as confirming the identity after the name appears. */
.vmc-user-dropdown--rich.show .vmc-user-dropdown-badge {
animation: vmcUserDropdownRowIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 140ms;
}
@media (prefers-reduced-motion: reduce) {
.vmc-user-dropdown--rich.show,
.vmc-user-dropdown--rich.show .vmc-user-dropdown-row,
.vmc-user-dropdown--rich.show .vmc-user-dropdown-signout,
.vmc-user-dropdown--rich.show .vmc-user-dropdown-badge {
animation: none;
}
}
/* Identity card — mirrors the screenshot's monogram + name + handle + pill. */
.vmc-user-dropdown--rich .vmc-user-dropdown-head {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 0.95rem 0.95rem;
background: #fff;
border-bottom: 1px solid var(--vmc-line);
}
.vmc-user-dropdown-avatar {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #6b1830 0%, var(--vmc-burgundy-deep) 70%);
color: var(--vmc-gold-soft);
display: grid;
place-items: center;
font-family: var(--vmc-font-display);
font-size: 1.5rem;
font-weight: 600;
/* Soft gold ring with a hairline highlight inside, matching the
avatar treatment in the reference design. */
box-shadow:
0 0 0 1.5px #fff,
0 0 0 2.5px var(--vmc-gold-deep),
0 4px 10px -8px rgba(58, 13, 24, 0.4);
}
.vmc-user-dropdown-meta {
flex: 1 1 auto; /* claim all leftover width so the handle has room */
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.vmc-user-dropdown-name {
color: var(--vmc-burgundy-deep);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vmc-user-dropdown-handle {
color: var(--vmc-muted);
font-size: 0.72rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Icon-only chip docked to the RIGHT side of the header card so the
name + handle column has full breathing room. Tooltip ("Mobile
verified" / "Mobile not verified") via the title attribute carries
the label that used to be inline. */
.vmc-user-dropdown-badge {
flex: 0 0 auto;
align-self: center;
margin-left: auto;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 0.92rem;
line-height: 1;
border: 1px solid transparent;
cursor: help;
}
.vmc-user-dropdown-badge i { font-size: 0.92rem; }
.vmc-user-dropdown-badge--verified {
background: rgba(46, 160, 67, 0.14);
color: #2ea043;
border-color: rgba(46, 160, 67, 0.22);
}
.vmc-user-dropdown-badge--unverified {
background: rgba(184, 41, 67, 0.10);
color: #b82943;
border-color: rgba(184, 41, 67, 0.22);
}
/* Action rows — circle icon + label + chevron, hairline rules between. */
.vmc-user-dropdown--rich .vmc-user-dropdown-row + .vmc-user-dropdown-row {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.vmc-user-dropdown-link {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0.85rem;
color: var(--vmc-ink);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
transition: background 140ms ease, color 140ms ease;
}
.vmc-user-dropdown-link:hover,
.vmc-user-dropdown-link:focus {
background: var(--vmc-soft);
color: var(--vmc-burgundy);
}
.vmc-user-dropdown-row-icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--vmc-soft);
border: 1px solid var(--vmc-line);
color: var(--vmc-burgundy);
display: grid;
place-items: center;
font-size: 0.85rem;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.vmc-user-dropdown-link:hover .vmc-user-dropdown-row-icon,
.vmc-user-dropdown-link:focus .vmc-user-dropdown-row-icon {
background: #fff;
border-color: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
}
.vmc-user-dropdown-row-label {
flex: 1 1 auto;
min-width: 0;
}
.vmc-user-dropdown-row-chev {
flex: 0 0 auto;
color: var(--vmc-muted);
font-size: 0.75rem;
transition: transform 140ms ease, color 140ms ease;
}
.vmc-user-dropdown-link:hover .vmc-user-dropdown-row-chev {
transform: translateX(3px);
color: var(--vmc-burgundy);
}
/* Sign-out cell — sits in its own cream-tinted block at the bottom. */
.vmc-user-dropdown-signout {
border-top: 1px solid var(--vmc-line);
background: #fff;
}
.vmc-user-dropdown-signout-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.45rem;
background: rgb(184 41 67 / 0%);
color: #b82943;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
transition: background 140ms ease, color 140ms ease;
padding: 0.65rem 0.65rem 0.65rem 1rem;
}
.vmc-user-dropdown-signout-btn i {
font-size: 01rem;width: 28px;height: 28px;
place-items: center;display: grid;
}
.vmc-user-dropdown-signout-btn:hover,
.vmc-user-dropdown-signout-btn:focus {
background: rgba(184, 41, 67, 0.16);
/* color: #8b0e2e; */
border-color: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
}
/* On phones the dropdown becomes a full-width sheet anchored to the
bottom — already handled elsewhere — but stretch the rich variant to
fill that container too. */
@media (max-width: 991.98px) {
.vmc-user-dropdown--rich {
width: 100%;
min-width: 0;
}
}
/* === Account page ==================================================== */
.account-head {
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
padding: 1.2rem 1.4rem;
background: linear-gradient(135deg, var(--vmc-soft) 0%, var(--vmc-warm) 100%);
border: 1px solid var(--vmc-line);
border-radius: 14px;
}
.account-head-avatar {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, var(--vmc-gold-soft), var(--vmc-gold) 55%, var(--vmc-gold-deep) 100%);
color: var(--vmc-burgundy-deep);
display: grid;
place-items: center;
font-size: 1.7rem;
font-weight: 800;
box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(91, 18, 38, 0.18);
}
.account-head-info { flex: 1 1 220px; min-width: 220px; }
.account-head-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-left: auto;
}
.account-head-actions .vmc-signout {
background: #b91c1c;
border-color: #b91c1c;
}
.account-head-actions .vmc-signout:hover,
.account-head-actions .vmc-signout:focus {
background: #7f1d1d;
border-color: #7f1d1d;
color: #fff;
}
/* Account tabs */
.account-tabs {
border-bottom: 1px solid var(--vmc-line);
gap: 0.25rem;
}
.account-tabs .nav-link {
border: 0;
background: transparent;
color: var(--vmc-muted);
padding: 0.7rem 1.1rem;
font-weight: 600;
border-bottom: 2px solid transparent;
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color 160ms ease, border-color 160ms ease;
}
.account-tabs .nav-link i { color: var(--vmc-gold-deep); }
.account-tabs .nav-link:hover {
color: var(--vmc-burgundy);
}
.account-tabs .nav-link.active {
color: var(--vmc-burgundy);
border-bottom-color: var(--vmc-gold);
background: transparent;
}
.account-count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 20px;
border-radius: 999px;
background: var(--vmc-warm);
color: var(--vmc-burgundy);
font-size: 0.72rem;
font-weight: 700;
padding: 0 6px;
margin-left: 0.25rem;
}
.account-tabs .nav-link.active .account-count {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
}
.account-panel {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 12px;
padding: 1.4rem 1.5rem;
box-shadow: var(--vmc-shadow-sm);
}
.account-panel h2 {
font-family: var(--vmc-font-sans);
font-size: 1.1rem;
font-weight: 700;
color: var(--vmc-burgundy);
margin: 0 0 0.4rem;
}
@media (max-width: 575.98px) {
.account-head-actions { margin-left: 0; width: 100%; }
.account-head-actions .btn { flex: 1 1 auto; }
}
/* === Hover-flicker fix ================================================
Root cause: any `transform: translateY(-Npx)` on :hover moves the button
away from the cursor sitting on its edge → mouseleave fires → revert →
mouseenter fires → infinite flicker. Replace with shadow-only lift. */
.btn,
.btn-vmc,
.btn-burgundy,
.btn-outline-vmc,
.btn-outline-burgundy,
.btn-gold,
.btn-outline-light,
.btn-cart,
.cart-link,
.vmc-navbar .nav-link.cart-link,
.vmc-nav .nav-link,
.social-icon {
/* allow the underlying transition only on transform via skewX/scale (not translateY) */
}
.btn:hover,
.btn-vmc:hover,
.btn-burgundy:hover,
.btn-outline-vmc:hover,
.btn-outline-burgundy:hover,
.btn-gold:hover,
.btn-outline-light:hover,
.btn-cart:hover,
.cart-link:hover,
.vmc-navbar .nav-link.cart-link:hover,
.vmc-nav .nav-link:hover,
.social-icon:hover {
transform: none !important; /* no translate → no flicker */
}
/* Compensate visually with a stronger shadow on hover */
.btn-vmc:hover,
.btn-burgundy:hover {
box-shadow: 0 12px 26px rgba(91, 18, 38, 0.34) !important;
}
.btn-gold:hover {
/* box-shadow: 0 12px 28px rgba(201, 162, 74, 0.42) !important; */
}
.btn-outline-vmc:hover,
.btn-outline-burgundy:hover {
box-shadow: 0 10px 22px rgba(91, 18, 38, 0.24) !important;
}
.btn-outline-light:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}
.btn-cart:hover,
.cart-link:hover,
.vmc-navbar .nav-link.cart-link:hover {
box-shadow: 0 10px 22px rgba(201, 162, 74, 0.34) !important;
}
/* WhatsApp FAB still needs its scale — keep it but drop the translate */
.whatsapp-fab:hover {
transform: none !important;
}
/* Purity / button-group selection — strong, unmistakable selected state */
/* Equal-cell responsive grid — replaces the old flex-wrap which produced
uneven rows. auto-fill + minmax gives a clean 2-column layout on phones
and 2-3 columns on wider product-detail panels, all cells identical. */
.purity-options {
--purity-accent: var(--vmc-maroon);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.55rem;
}
.purity-options .btn-outline-vmc {
/* Each card is a centred flex column with a consistent height, so
percentage + metal line up perfectly across every cell. The grid
cell controls width (no min-width needed). */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 62px;
width: 100%;
padding: 0.6rem 0.5rem;
text-align: center;
font-weight: 800;
border-width: 2px;
border-radius: 10px;
background: #fff;
color: var(--vmc-ink);
border-color: var(--vmc-line);
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
position: relative;
}
.purity-options .btn-outline-vmc:hover {
border-color: var(--vmc-maroon);
color: var(--vmc-maroon);
background: #fff7f8;
}
.purity-options .btn-outline-vmc small {
display: block;
font-weight: 600;
font-size: 0.7rem;
color: var(--vmc-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0; /* flex `gap` handles spacing now */
}
/* Stat card as a clickable filter (admin enquiries) */
a.stat-card {
color: inherit;
display: block;
transition: transform 200ms var(--ease-out-soft, ease), box-shadow 200ms ease, border-color 200ms ease;
}
a.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--vmc-shadow-md);
border-left-color: var(--vmc-burgundy);
color: inherit;
}
a.stat-card.is-active {
border-color: var(--vmc-gold);
border-left-color: var(--vmc-burgundy);
box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.32), var(--vmc-shadow-sm);
}
a.stat-card.is-active strong {
color: var(--vmc-burgundy-deep);
}
/* Buyer card on enquiry detail */
.enquiry-buyer-card a { color: var(--vmc-burgundy); }
.enquiry-buyer-card a:hover { color: var(--vmc-burgundy-deep); }
/* Mailto reply pill */
.mailto-link.btn-action {
background: var(--vmc-burgundy);
color: #fff;
border-color: var(--vmc-burgundy);
}
.mailto-link.btn-action:hover {
background: var(--vmc-burgundy-deep);
border-color: var(--vmc-burgundy-deep);
color: #fff;
}
/* Validation pulse when admin tries to submit without picking a purity */
[data-purity-group].is-error .purity-options {
animation: purityShake 360ms ease;
}
[data-purity-group].is-error [data-purity-hint] {
color: #b91c1c !important;
font-weight: 600;
}
@keyframes purityShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
}
/* Selected state — solid maroon fill, lifted card, glow ring + checkmark */
.btn-check:checked + .btn-outline-vmc {
background-color: var(--purity-accent, var(--vmc-maroon)) !important;
border-color: var(--purity-accent, var(--vmc-maroon)) !important;
color: #fff !important;
box-shadow: 0 0 0 3px rgba(15, 92, 68, 0.20), 0 6px 14px rgba(15, 92, 68, 0.30);
transform: translateY(-1px);
}
.btn-check:checked + .btn-outline-vmc small,
.btn-check:checked + .btn-outline-vmc .text-muted {
color: rgba(255, 255, 255, 0.85) !important;
}
.btn-check:checked + .btn-outline-vmc::after {
content: "\F633"; /* bi-check-lg */
font-family: "bootstrap-icons" !important;
position: absolute;
top: -8px;
right: -8px;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--vmc-gold);
color: var(--vmc-coffee-deep);
font-size: 14px;
line-height: 22px;
text-align: center;
box-shadow: 0 2px 6px rgba(20, 23, 26, 0.25);
}
.btn-check:focus-visible + .btn-outline-vmc {
outline: 3px solid rgba(198, 149, 58, 0.55);
outline-offset: 2px;
}
.btn-whatsapp {
--bs-btn-bg: var(--vmc-green);
--bs-btn-border-color: var(--vmc-green);
--bs-btn-color: #fff;
--bs-btn-hover-bg: #0f6b4d;
--bs-btn-hover-border-color: #0f6b4d;
--bs-btn-hover-color: #fff;
}
/* Gold gradient button — premium feel for hero CTAs */
.btn-gold {
--bs-btn-bg: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
color: #2a1908;
border: 1px solid var(--vmc-gold-deep);
font-weight: 700;
}
.btn-gold:hover,
.btn-gold:focus {
background: linear-gradient(180deg, var(--vmc-gold), var(--vmc-gold-deep));
color: #fff;
border-color: var(--vmc-gold-deep);
}
/* Eyebrow — small uppercase label with side gold dividers, used above section H2s */
.eyebrow {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--vmc-gold-deep);
font-weight: 700;
padding: 0 1rem;
position: relative;
margin-bottom: 0.25rem;
}
.eyebrow::before,
.eyebrow::after {
content: "";
position: absolute;
top: 50%;
width: 28px;
height: 1px;
background: var(--vmc-gold-deep);
opacity: 0.55;
}
.eyebrow::before { right: 100%; }
.eyebrow::after { left: 100%; }
/* Centred section title block */
.section-title {
text-align: center;
margin-bottom: 2.4rem;
}
.section-title h2 {
margin: 0;
color: var(--vmc-maroon-deep);
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.12;
}
.section-title p {
margin: 0.6rem auto 0;
max-width: 620px;
color: var(--vmc-muted);
}
/* Section padding helpers + warm backgrounds */
/* `section-cream` / `section-warm` were solid tones that hid the body's
atmospheric backdrop. They're now transparent — the page's layered
lighting (gold halos, burgundy whisper, paper grain, vertical warm
gradient) flows uninterrupted from hero through trust strip. */
.section-cream,
.section-warm { background: transparent; }
/* Hero-trust badges row (BIS · SWG · dispatch) */
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 1.4rem;
margin-top: 1.6rem;
color: rgba(231, 207, 149, 0.85);
font-size: 0.92rem;
}
.hero-trust i {
margin-right: 0.4rem;
color: var(--vmc-gold-soft);
}
/* "Two specialities" big category cards */
/* =====================================================================
SPECIALITY SECTION BACKDROP — gives the two cards an environment to
sit in instead of floating on flat cream. Two soft warm halos behind
the card row, a faint burgundy whisper at the base, and an ultra-low
paper grain. Editorial, atmospheric, restrained.
===================================================================== */
.spec-section {
position: relative;
overflow: hidden;
isolation: isolate;
}
/* "Two specialities, perfected over decades" — section heading uses
Playfair Display bold (classic editorial serif) rather than the
sitewide Cormorant. Loaded from the existing Google Fonts URL in
partials/header.php. */
.spec-section .section-title h2 {
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.12;
color: var(--vmc-burgundy-deep);
}
.spec-section > .container { position: relative; z-index: 1; }
.spec-section-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(42% 48% at 24% 62%, rgba(201, 162, 74, 0.08), transparent 74%),
radial-gradient(42% 48% at 76% 62%, rgba(122, 26, 50, 0.07), transparent 74%),
radial-gradient(92% 54% at 50% 120%, rgba(122, 26, 50, 0.045), transparent 72%),
radial-gradient(70% 28% at 50% -4%, rgba(201, 162, 74, 0.04), transparent 72%);
}
/* Ultra-faint paper grain over the section, tying card + cream together. */
.spec-section-bg::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.6;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
background-size: 180px 180px;
}
/* =====================================================================
SPECIALITY CARDS — one integrated luxury composition:
a cinematic burgundy artwork stage with the product floating across
into a white "information plate". Industrial-premium, minimal,
engineered — not generic e-commerce.
===================================================================== */
.spec-card {
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border-radius: 22px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(58, 13, 24, 0.06);
/* Layered depth — tight contact + mid drop + wide ambient. Reads as a
solid object on the page, not a flat blurred panel. */
box-shadow:
0 1px 2px rgba(58, 13, 24, 0.04),
0 10px 24px -16px rgba(58, 13, 24, 0.16),
0 28px 54px -38px rgba(58, 13, 24, 0.22);
transition:
transform 640ms var(--ease-out-fluid),
box-shadow 640ms var(--ease-out-fluid);
height: 100%;
isolation: isolate;
}
.spec-card:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(58, 13, 24, 0.05),
0 14px 30px -18px rgba(58, 13, 24, 0.20),
0 36px 68px -42px rgba(58, 13, 24, 0.28);
color: inherit;
}
.spec-card-art {
position: relative;
height: 300px;
overflow: visible; /* let the product cross the bottom edge */
background: radial-gradient(78% 56% at 50% 34%, rgba(134, 34, 60, 0.28) 0%, rgba(86, 18, 37, 0.12) 44%, transparent 72%), radial-gradient(88% 46% at 50% 106%, rgba(0, 0, 0, 0.18) 0%, transparent 62%), linear-gradient(180deg, rgba(255, 240, 205, 0.06) 0%, transparent 12%), linear-gradient(160deg, #2c0913 0%, #280810 48%, #160409 78%, #100206 100%);
border-radius: 22px 22px 0 0;
}
.spec-card-art::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: 0;
height: 84px;
z-index: 1;
pointer-events: none;
background:
radial-gradient(72% 120% at 50% 10%, rgba(255, 219, 153, 0.05) 0%, transparent 58%),
linear-gradient(180deg, transparent 0%, rgba(22, 5, 10, 0.10) 52%, rgba(10, 2, 5, 0.22) 100%);
border-radius: 0 0 18px 18px;
}
.spec-card-vignette {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(118% 98% at 50% 42%,
transparent 42%,
rgba(0, 0, 0, 0.22) 78%,
rgba(0, 0, 0, 0.44) 100%),
linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 24%);
}
/* Floating metallic dust — gold motes scattered through the stage that
softly drift in/out. Visible enough to read as atmosphere, restrained
enough to never look like decoration. More, larger, brighter specks. */
.spec-card-particles {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.32;
background-image:
radial-gradient(1.5px 1.5px at 16% 22%, rgba(255, 231, 176, 0.78), transparent 62%),
radial-gradient(1px 1px at 72% 18%, rgba(255, 231, 176, 0.50), transparent 62%),
radial-gradient(1.5px 1.5px at 85% 58%, rgba(255, 231, 176, 0.45), transparent 62%),
radial-gradient(1px 1px at 33% 70%, rgba(255, 231, 176, 0.54), transparent 62%),
radial-gradient(1px 1px at 58% 42%, rgba(255, 231, 176, 0.38), transparent 62%),
radial-gradient(1px 1px at 25% 50%, rgba(255, 231, 176, 0.36), transparent 62%);
animation: specTwinkle 11s ease-in-out infinite alternate;
}
@keyframes specTwinkle { 0% { opacity: 0.18; } 100% { opacity: 0.38; } }
/* Film grain — tactile, engineered, never glossy. */
.spec-card-grain {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 140px 140px;
}
/* Ambient lighting — soft top sheen + a gently breathing warm bloom. */
.spec-card-shine {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
overflow: hidden;
background:
linear-gradient(150deg, rgba(255, 246, 220, 0.06) 0%, transparent 34%),
radial-gradient(54% 34% at 50% 6%, rgba(255, 240, 205, 0.09) 0%, transparent 72%);
}
.spec-card-shine::after {
content: "";
position: absolute;
left: 50%;
top: 38%;
width: 70%;
height: 62%;
transform: translate(-50%, -50%);
/* Gentler ambient bloom — soft studio key light, not a bright orb. */
background: radial-gradient(ellipse at center,
rgba(255, 226, 158, 0.07) 0%,
rgba(201, 162, 74, 0.025) 42%,
transparent 72%);
animation: specGlowPulse 9s ease-in-out infinite alternate;
}
@keyframes specGlowPulse {
0% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.985); }
100% { opacity: 0.68; transform: translate(-50%, -50%) scale(1.02); }
}
/* ---- Realistic grounding shadow ----------------------------------- */
/* Tight dark core + soft ambient fade, with a faint gold reflection
directly under the metal for a polished-surface feel. */
.spec-card-glow {
position: absolute;
left: 50%;
bottom: 18px;
width: 39%;
height: 20px;
transform: translateX(-50%);
z-index: 2;
pointer-events: none;
/* Tight, dark contact core — the physical point of grounding. */
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.54) 0%,
rgba(0, 0, 0, 0.22) 28%,
rgba(0, 0, 0, 0.06) 54%,
transparent 74%);
filter: blur(5px);
transition:
width 640ms var(--ease-out-fluid),
filter 640ms var(--ease-out-fluid),
opacity 640ms var(--ease-out-fluid);
}
/* Wider, very soft ambient occlusion spreading out from the contact —
makes the grounding feel diffuse and real, not a single hard ellipse. */
.spec-card-glow::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 176%;
height: 240%;
transform: translate(-50%, -50%);
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.16) 0%,
rgba(0, 0, 0, 0.06) 42%,
transparent 72%);
filter: blur(12px);
}
/* Faint warm reflection of the metal on the surface, just above the
contact point — subtle polished-floor feel. */
.spec-card-glow::after {
content: "";
position: absolute;
left: 50%;
top: -4px;
width: 48%;
height: 14px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center,
rgba(255, 206, 132, 0.09) 0%,
transparent 74%);
filter: blur(6px);
}
/* ---- Product wrapper — absolutely placed so it floats across the
plate boundary. The wrapper owns the horizontal centring; the so iOS/Android opens its OS picker.
Both write to the same hidden input (`name="size_id"`) via JS so the
rest of the form (preview chips + qty math) doesn't care which UI was
used. */
.pd-size-picker {
position: relative;
width: 100%;
}
/* Native styled to match the custom trigger — only visible on mobile */
.pd-size-native {
display: none;
width: 100%;
height: 48px;
padding: 0 2.6rem 0 1.1rem;
border: 1.5px solid rgba(201, 162, 74, 0.4);
border-radius: 12px;
background:
url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235b1226'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat right 1rem center / 14px,
linear-gradient(180deg, #fffdf7 0%, var(--vmc-soft) 100%);
color: var(--vmc-burgundy-deep);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.005em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 1px 2px rgba(91, 18, 38, 0.04);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.pd-size-native:focus {
border-color: var(--vmc-gold);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 0 0 3px rgba(201, 162, 74, 0.22),
0 6px 16px rgba(201, 162, 74, 0.18);
outline: none;
}
/* Viewport switching: custom on desktop, native on mobile */
@media (max-width: 767.98px) {
.pd-size-trigger,
.pd-size-panel { display: none !important; }
.pd-size-native { display: block; }
}
/* The closed-state trigger button (replaces the native ) */
.pd-size-trigger {
width: 100%;
height: 48px;
padding: 0 1.1rem;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
border: 1.5px solid rgba(201, 162, 74, 0.4);
border-radius: 12px;
background: linear-gradient(180deg, #fffdf7 0%, var(--vmc-soft) 100%);
color: var(--vmc-burgundy-deep);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.005em;
cursor: pointer;
text-align: left;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 1px 2px rgba(91, 18, 38, 0.04);
transition:
border-color 200ms ease,
box-shadow 220ms ease,
background 200ms ease;
}
.pd-size-trigger-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pd-size-caret {
flex: 0 0 auto;
color: var(--vmc-burgundy);
font-size: 0.85rem;
transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pd-size-picker.is-open .pd-size-caret {
transform: rotate(180deg);
}
.pd-size-trigger:hover {
border-color: var(--vmc-gold);
background: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 12px rgba(201, 162, 74, 0.15);
}
.pd-size-trigger:focus-visible,
.pd-size-picker.is-open .pd-size-trigger {
border-color: var(--vmc-gold);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 0 0 3px rgba(201, 162, 74, 0.22),
0 6px 16px rgba(201, 162, 74, 0.18);
outline: none;
}
/* The dropdown sheet — fully styleable */
.pd-size-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 50;
max-height: 320px;
overflow-y: auto;
padding: 0.4rem;
background: #fff;
border: 1px solid var(--vmc-gold);
border-radius: 14px;
box-shadow:
0 18px 36px rgba(91, 18, 38, 0.16),
0 4px 10px rgba(91, 18, 38, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.6) inset;
animation: pdSizePanelIn 180ms cubic-bezier(0.4, 0, 0.2, 1);
scrollbar-width: thin;
scrollbar-color: rgba(201, 162, 74, 0.6) transparent;
}
.pd-size-panel::-webkit-scrollbar { width: 6px; }
.pd-size-panel::-webkit-scrollbar-track { background: transparent; }
.pd-size-panel::-webkit-scrollbar-thumb {
background: rgba(201, 162, 74, 0.5);
border-radius: 999px;
}
@keyframes pdSizePanelIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Each option row */
.pd-size-option {
width: 100%;
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 0.8rem;
border: 0;
background: transparent;
color: var(--vmc-burgundy-deep);
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background 140ms ease, color 140ms ease, padding-left 160ms ease;
}
.pd-size-option:hover,
.pd-size-option:focus-visible {
background: var(--vmc-soft);
outline: none;
padding-left: 0.95rem;
}
.pd-size-option-main {
flex: 0 0 auto;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.005em;
}
.pd-size-option-meta {
flex: 1 1 auto;
color: var(--vmc-burgundy);
font-size: 0.92rem; /* bumped from 0.82rem — diameter + weight read clearly */
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.005em;
}
.pd-size-option-check {
flex: 0 0 auto;
color: var(--vmc-gold-deep);
font-size: 1.05rem;
opacity: 0;
transition: opacity 140ms ease;
}
/* Currently-selected row */
.pd-size-option.is-selected {
background: linear-gradient(135deg, var(--vmc-warm) 0%, #fff 100%);
color: var(--vmc-burgundy-deep);
font-weight: 700;
}
.pd-size-option.is-selected .pd-size-option-check { opacity: 1; }
@media (max-width: 575.98px) {
.pd-size-trigger { height: 46px; font-size: 0.9rem; padding: 0 1rem; }
.pd-size-option { padding: 0.7rem 0.8rem; }
.pd-size-option-main { font-size: 0.92rem; }
.pd-size-option-meta { font-size: 0.88rem; }
}
/* Live "Currently selected" preview card.
Top: metal/purity strip with a small gold/silver icon.
Bottom: a row of stat cells (icon + uppercase label + bold value) with
thin vertical dividers, like a data-sheet block. */
.pd-preview {
margin-top: 0.4rem;
padding: 0.85rem 1rem;
/* Subtle diagonal brand gradient — cream/white at top-left fading
through warm cream into a faint gold whisper at the bottom-right. */
background:
linear-gradient(135deg,
#ffffff 0%,
#fff7e6 35%,
#f6e8c2 100%);
border: 1px solid var(--vmc-line);
border-radius: 12px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 4px 12px -8px rgba(58, 13, 24, 0.12);
}
/* --- Purity strip (top row) ----------------------------------------- */
.pd-preview-purity {
display: flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.7rem;
margin-bottom: 0.7rem;
border-bottom: 1px solid rgba(201, 162, 74, 0.3);
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
color: var(--vmc-burgundy-deep);
}
.pd-preview-purity[hidden] { display: none !important; }
.pd-preview-purity-icon {
font-size: 1.05rem;
line-height: 1;
color: var(--vmc-gold-deep);
}
.pd-preview-purity--silver .pd-preview-purity-icon { color: #6b7280; }
.pd-preview-purity-metal,
.pd-preview-purity-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.pd-preview-purity-sep {
opacity: 0.55;
font-weight: 500;
}
/* --- Stats row (bottom) --------------------------------------------- */
.pd-preview-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
gap: 0;
align-items: stretch;
}
.pd-preview-stats:empty { display: none; }
.pd-preview-stat {
display: grid;
grid-template-rows: 1.1rem 0.75rem 1rem;
align-items: center;
justify-items: center;
align-content: start;
row-gap: 0.35rem;
min-width: 0;
padding: 0.1rem 0.45rem;
text-align: center;
position: relative;
}
/* Thin gold-line vertical divider between cells (skip after last). */
.pd-preview-stat + .pd-preview-stat::before {
content: "";
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 1px;
background: rgba(201, 162, 74, 0.3);
}
.pd-preview-stat-icon {
font-size: 1.1rem;
line-height: 1;
color: var(--vmc-gold-deep);
}
.pd-preview-stat-label {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vmc-muted);
line-height: 1;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.pd-preview-stat-value {
font-size: 0.95rem;
font-weight: 700;
color: var(--vmc-burgundy-deep);
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 0;
max-width: 100%;
overflow: unset;
text-overflow: ellipsis;
}
/* Tablet / small-laptop — drop from 5 columns to 3 so labels don't crush. */
@media (max-width: 767.98px) {
.pd-preview-stats {
grid-template-columns: repeat(3, 1fr);
row-gap: 0.7rem;
}
/* Every 3rd cell starts a new row → kill the vertical divider on those. */
.pd-preview-stat:nth-child(3n + 1)::before { display: none; }
}
/* Phone — 2 columns, and each cell switches to a horizontal "icon · text"
layout so values don't wrap and labels stay legible. */
@media (max-width: 575.98px) {
.pd-preview { padding: 0.8rem 0.9rem; }
.pd-preview-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem 0.4rem;
}
/* Reset the vertical divider — at this layout each cell becomes its
own tile with a subtle separator on the right column only. */
.pd-preview-stat::before { display: none !important; }
.pd-preview-stat {
grid-template-columns: 1.15rem minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: center;
justify-content: flex-start;
justify-items: start;
column-gap: 0.55rem;
row-gap: 0.01rem;
text-align: left;
padding: 0.45rem 0.55rem;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(201, 162, 74, 0.25);
border-radius: 8px;
}
.pd-preview-stat-icon {
font-size: 1.1rem;
grid-row: 1 / span 2;
grid-column: 1;
}
/* Label + value sit in a vertical mini-stack on the right side. */
.pd-preview-stat-label,
.pd-preview-stat-value {
display: block;
line-height: 1.1;
grid-column: 2;
}
.pd-preview-stat-label {
font-size: 0.58rem;
margin-bottom: 0.15rem;
}
.pd-preview-stat-value {
font-size: 0.88rem;
}
/* Tighter purity strip on phones — slightly smaller font. */
.pd-preview-purity { font-size: 0.88rem; }
}
/* Very narrow phones (≤360px) — 1 column so nothing ever clips. */
@media (max-width: 360px) {
.pd-preview-stats { grid-template-columns: 1fr; }
}
/* Enquiry submitted success page */
.enquiry-success-page {
position: relative;
overflow: hidden;
}
.enquiry-success-stepper {
margin-bottom: 2rem;
}
.enquiry-success-card {
position: relative;
max-width: 820px;
margin: 0 auto;
padding: clamp(2rem, 5vw, 3.5rem);
overflow: hidden;
text-align: center;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 229, 0.92)),
radial-gradient(circle at 50% 0%, rgba(201, 162, 74, 0.22), transparent 42%);
border: 1px solid rgba(201, 162, 74, 0.28);
border-radius: 18px;
box-shadow:
0 20px 55px rgba(58, 13, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
isolation: isolate;
animation: enquirySuccessRise 540ms ease-out both;
}
.enquiry-success-card::before {
content: "";
position: absolute;
inset: -35% auto auto 50%;
width: 360px;
height: 360px;
border-radius: 999px;
background: radial-gradient(circle, rgba(201, 162, 74, 0.24), transparent 68%);
transform: translateX(-50%);
z-index: -1;
animation: enquirySuccessGlow 2.8s ease-in-out infinite;
}
.enquiry-success-icon {
width: 92px;
height: 92px;
margin: 0 auto 1.25rem;
display: grid;
place-items: center;
border-radius: 999px;
color: #fff;
font-size: 3rem;
background: linear-gradient(135deg, #2f9e44, #8fbf3d 54%, var(--vmc-gold));
box-shadow:
0 18px 36px rgba(47, 158, 68, 0.25),
0 0 0 10px rgba(47, 158, 68, 0.1);
animation: enquirySuccessPop 700ms 120ms cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
.enquiry-success-icon i {
animation: enquirySuccessCheck 520ms 410ms ease-out both;
}
.enquiry-success-eyebrow {
justify-content: center;
}
.enquiry-success-card h1 {
max-width: 680px;
margin: 0 auto 0.85rem;
color: var(--vmc-burgundy-deep);
font-family: "Playfair Display", serif;
font-size: clamp(2rem, 4.4vw, 3.25rem);
line-height: 1.05;
}
.enquiry-success-lead {
max-width: 640px;
margin: 0 auto 1.75rem;
color: var(--vmc-muted);
font-size: 1rem;
line-height: 1.7;
}
.enquiry-success-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 1.75rem auto;
overflow: hidden;
border: 1px solid rgba(201, 162, 74, 0.28);
border-radius: 12px;
background: rgba(255, 255, 255, 0.62);
}
.enquiry-success-meta div {
min-width: 0;
padding: 1rem;
}
.enquiry-success-meta div + div {
border-left: 1px solid rgba(201, 162, 74, 0.24);
}
.enquiry-success-meta span {
display: block;
margin-bottom: 0.35rem;
color: var(--vmc-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.enquiry-success-meta strong {
display: block;
overflow: hidden;
color: var(--vmc-burgundy-deep);
font-size: clamp(0.95rem, 2vw, 1.15rem);
font-weight: 800;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.enquiry-success-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
}
.enquiry-success-burst span {
position: absolute;
left: 50%;
top: 4.25rem;
width: 0.42rem;
height: 1.45rem;
border-radius: 999px;
background: var(--vmc-gold);
opacity: 0;
transform-origin: 50% 116px;
animation: enquirySuccessRay 900ms 280ms ease-out both;
}
.enquiry-success-burst span:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.enquiry-success-burst span:nth-child(2) { transform: translateX(-50%) rotate(60deg); }
.enquiry-success-burst span:nth-child(3) { transform: translateX(-50%) rotate(120deg); }
.enquiry-success-burst span:nth-child(4) { transform: translateX(-50%) rotate(180deg); }
.enquiry-success-burst span:nth-child(5) { transform: translateX(-50%) rotate(240deg); }
.enquiry-success-burst span:nth-child(6) { transform: translateX(-50%) rotate(300deg); }
@keyframes enquirySuccessRise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes enquirySuccessPop {
0% {
opacity: 0;
transform: scale(0.58);
}
70% {
opacity: 1;
transform: scale(1.08);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes enquirySuccessCheck {
from {
opacity: 0;
transform: scale(0.65) rotate(-10deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes enquirySuccessRay {
0% {
opacity: 0;
scale: 0.35;
}
30% {
opacity: 0.9;
}
100% {
opacity: 0;
scale: 1.25;
}
}
@keyframes enquirySuccessGlow {
0%, 100% {
opacity: 0.58;
transform: translateX(-50%) scale(0.96);
}
50% {
opacity: 1;
transform: translateX(-50%) scale(1.04);
}
}
@media (max-width: 575.98px) {
.enquiry-success-card {
border-radius: 14px;
}
.enquiry-success-meta {
grid-template-columns: 1fr;
text-align: left;
}
.enquiry-success-meta div + div {
border-top: 1px solid rgba(201, 162, 74, 0.24);
border-left: 0;
}
.enquiry-success-actions .btn {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.enquiry-success-card,
.enquiry-success-card::before,
.enquiry-success-icon,
.enquiry-success-icon i,
.enquiry-success-burst span {
animation: none !important;
}
}
/* Quantity row — stepper on the left, live total on the right. */
.pd-qty-row {
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: 0.7rem;
flex-wrap: wrap;
}
/* Premium product-detail stepper — matches the dropdown trigger vibe:
cream gradient surface, gold border, bigger numerals, deep inset
highlight, hover/focus gold ring. */
.pd-qty-stepper {
width: 200px;
height: 48px;
border: 1.5px solid rgba(201, 162, 74, 0.4);
border-radius: 12px;
background: linear-gradient(180deg, #fffdf7 0%, var(--vmc-soft) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 1px 2px rgba(91, 18, 38, 0.04);
transition: border-color 200ms ease, box-shadow 220ms ease;
overflow: hidden;
}
.pd-qty-stepper:hover {
border-color: var(--vmc-gold);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 12px rgba(201, 162, 74, 0.15);
}
.pd-qty-stepper:focus-within {
border-color: var(--vmc-gold);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 0 0 3px rgba(201, 162, 74, 0.22),
0 6px 16px rgba(201, 162, 74, 0.18);
}
/* − / + buttons sit flush, divided by faint gold hairlines */
.pd-qty-stepper .qty-step {
width: 70px;
color: var(--vmc-burgundy-deep);
font-size: 1rem;
background: transparent;
transition: background 160ms ease, color 160ms ease;
}
.pd-qty-stepper .qty-step:hover,
.pd-qty-stepper .qty-step:focus-visible {
background: rgba(201, 162, 74, 0.14);
color: var(--vmc-burgundy-deep);
outline: none;
}
.pd-qty-stepper .qty-step:active {
background: rgba(201, 162, 74, 0.22);
}
/* Centre field — number + unit, with hairline dividers from the buttons */
.pd-qty-stepper .qty-field {
flex: 1 1 auto;
min-width: 0;
border-left: 1px solid rgba(201, 162, 74, 0.28);
border-right: 1px solid rgba(201, 162, 74, 0.28);
background: rgba(255, 255, 255, 0.7);
padding: 0 0.55rem;
gap: 0.35rem;
}
.pd-qty-stepper .qty-input {
font-size: 1.05rem;
font-weight: 800;
color: var(--vmc-burgundy-deep);
letter-spacing: -0.005em;
background: transparent;
}
.pd-qty-stepper .qty-unit {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vmc-gold-deep);
}
/* Live total readout — sits inline with the stepper on desktop */
.pd-qty-total {
color: var(--vmc-burgundy);
font-size: 0.95rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.005em;
}
.pd-cta {
width: 100%;
margin-top: 1rem;
padding: 0.7rem 1.4rem;
font-size: 1rem;
font-weight: 700;
border-radius: 10px;
}
.pd-cta i { font-size: 1.05rem; }
.pd-footnote {
margin: 0.7rem 0 0;
font-size: 0.78rem;
color: var(--vmc-muted);
line-height: 1.5;
}
@media (max-width: 575.98px) {
.product-detail-form { padding: 1.2rem 1rem 1.2rem !important; }
.pd-qty-stepper { width: 100%; }
.pd-qty-total { width: 100%; }
}
/* === Cart page header (eyebrow + title + back link) ================= */
.cart-page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
/* Drop the global eyebrow's left/right dash decoration on this page only */
.cart-page-head .eyebrow::before,
.cart-page-head .eyebrow::after {
content: none !important;
display: none !important;
}
.cart-page-head .eyebrow {
padding-left: 0;
padding-right: 0;
}
.cart-page-head-meta {
flex: 1 1 auto;
min-width: 0;
}
.cart-page-title {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-size: clamp(1.55rem, 2.5vw, 2rem);
font-weight: 700;
color: var(--vmc-burgundy-deep);
margin: 0.25rem 0 0.25rem;
line-height: 1.15;
letter-spacing: -0.005em;
}
.cart-page-sub {
color: var(--vmc-muted);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
max-width: 540px;
}
/* Back link — minimal gold-outlined pill */
.cart-page-back {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.1rem;
border-radius: 999px;
border: 1.5px solid rgba(201, 162, 74, 0.55);
background: transparent;
color: var(--vmc-burgundy-deep);
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
line-height: 1;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.cart-page-back i {
transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
font-size: 0.95rem;
}
.cart-page-back:hover,
.cart-page-back:focus-visible {
background: rgba(201, 162, 74, 0.12);
border-color: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
outline: none;
}
.cart-page-back:hover i,
.cart-page-back:focus-visible i {
transform: translateX(-3px); /* arrow nudges back the way it points */
}
@media (max-width: 767.98px) {
.cart-page-head {
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
margin-bottom: 1.25rem;
}
.cart-page-back {
align-self: flex-start;
padding: 0.45rem 0.95rem;
font-size: 0.84rem;
}
}
.cart-row {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 12px;
padding: 1rem 1.1rem;
display: flex;
gap: 1.1rem;
align-items: flex-start; /* top-align so the qty controls sit by the name, not floating mid-card */
margin-bottom: 0.85rem;
flex-wrap: wrap;
box-shadow: var(--vmc-shadow-sm);
transition:
border-color 260ms var(--ease-out-soft),
box-shadow 320ms var(--ease-out-fluid),
transform 320ms var(--ease-out-fluid);
}
.cart-row:hover {
border-color: var(--vmc-champagne);
box-shadow: var(--vmc-shadow-md);
transform: translateY(-2px);
}
.cart-row .cart-thumb {
transition: transform 500ms var(--ease-out-fluid);
}
.cart-row:hover .cart-thumb {
transform: scale(1.04);
}
.cart-row .cart-thumb {
width: 84px;
height: 84px;
border-radius: 10px;
object-fit: cover;
background: linear-gradient(135deg, var(--vmc-maroon-deep), #2a0a12);
flex-shrink: 0;
border: 1px solid var(--vmc-line);
}
/* The cart thumb is now wrapped in an anchor → links to the product
detail page. Make the link wrap the image exactly (no extra padding)
and inherit the flex-row sizing behaviour. */
.cart-thumb-link {
display: block;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
line-height: 0; /* removes inline-image whitespace gap */
transition: box-shadow 220ms ease;
}
.cart-thumb-link:focus-visible {
outline: 2px solid var(--vmc-gold);
outline-offset: 2px;
}
/* Clear-cart button — quiet "ghost" pill that gains a soft red tint on
hover so it reads as destructive without shouting. Confirms via the
form's onsubmit so a misclick never wipes the cart silently. */
.cart-clear-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid rgba(150, 30, 50, 0.25);
border-radius: 999px;
color: var(--vmc-muted);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
cursor: pointer;
transition:
background 200ms ease,
border-color 200ms ease,
color 200ms ease,
box-shadow 200ms ease;
}
.cart-clear-btn i {
font-size: 0.95rem;
color: rgba(150, 30, 50, 0.55);
transition: color 200ms ease;
}
.cart-clear-btn:hover,
.cart-clear-btn:focus-visible {
background: rgba(150, 30, 50, 0.08);
border-color: rgba(150, 30, 50, 0.55);
color: #8a1a2a;
box-shadow: 0 4px 12px rgba(150, 30, 50, 0.10);
outline: none;
}
.cart-clear-btn:hover i,
.cart-clear-btn:focus-visible i {
color: #8a1a2a;
}
.cart-clear-btn:active {
transform: translateY(1px);
}
.cart-row .cart-info {
flex: 1 1 220px;
min-width: 220px;
}
.cart-row .cart-sku {
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--vmc-gold-deep);
font-weight: 700;
margin: 0;
}
.cart-row .cart-name {
display: block;
color: var(--vmc-maroon-deep);
font-family: var(--vmc-font-sans);
font-weight: 800;
font-size: 1.05rem;
line-height: 1.3;
margin: 0.15rem 0 0.4rem;
text-decoration: none;
}
.cart-row .cart-name:hover {
color: var(--vmc-maroon);
}
.cart-row .cart-meta {
color: var(--vmc-muted);
font-size: 0.83rem;
margin: 0;
line-height: 1.5;
}
/* Metal + purity pill — visually anchors each cart line with brand colour */
.cart-purity-row {
margin: 0.35rem 0 0.15rem;
}
/* Match the `.btn-gold` ("View enquiry list") shape + typography exactly */
.purity-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1.4rem; /* same as .btn capsule */
border-radius: 999px;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
/* cursor: help removed — was paired with the tooltip that's been
removed from the cart pills. */
}
.purity-pill-sep {
opacity: 0.55;
font-weight: 500;
}
.purity-pill-metal,
.purity-pill-value {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Gold variant — identical treatment to the footer's `.btn-gold`
("View enquiry list") so brand-gold reads consistently across the site. */
.purity-pill--gold {
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
border: 1px solid var(--vmc-gold-deep);
color: var(--vmc-burgundy-deep);
/* box-shadow:
0 6px 16px rgba(140, 112, 38, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.4); */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Hover lift removed — purity pill is a label, not an interactive control;
the lift made it look like a clickable button which it isn't. */
/* Silver variant — cool steel gradient with matching depth */
.purity-pill--silver {
background:
linear-gradient(135deg,
#fdfdfd 0%,
#e7eaef 25%,
#c5cbd4 55%,
#9aa1ad 85%,
#757b87 100%);
border: 1px solid #5a606b;
color: #1d2230;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(60, 65, 75, 0.4),
0 2px 6px rgba(90, 96, 107, 0.3),
0 1px 0 rgba(255, 255, 255, 0.4);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* Tooltips removed from cart spec chips — they were noisy and the
chip's label+value already explains what it is at a glance. */
/* Spec chips — Die / Ball Gauge / Wire Gauge etc. rendered as scannable
labeled pills instead of one comma-separated paragraph. */
/* Equal-column grid so every chip is the same width and the values line
up in a clean right-hand column (instead of the old content-width
flex-wrap where values floated wherever the text ended). */
.cart-spec-chips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.45rem;
margin: 0.45rem 0 0.55rem;
}
.cart-spec-chip {
display: flex; /* fill the grid cell */
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.7rem;
background: linear-gradient(135deg, #fff8ec 0%, var(--vmc-warm) 100%);
border: 1px solid rgba(201, 162, 74, 0.4);
border-radius: 10px; /* softer rectangle reads better as a data row */
font-size: 0.78rem;
line-height: 1.1;
color: var(--vmc-burgundy-deep);
box-shadow: 0 1px 2px rgba(91, 18, 38, 0.05);
}
.cart-spec-chip i {
color: var(--vmc-gold-deep);
font-size: 0.85rem;
line-height: 1;
}
.cart-spec-chip-label {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vmc-muted);
}
.cart-spec-chip-value {
margin-left: auto; /* push the value to the RIGHT edge of the chip */
padding-left: 0.5rem; /* min gap so label + value never touch */
font-weight: 700;
color: var(--vmc-burgundy-deep);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.cart-spec-chip {
padding: 0.4rem 0.4rem 0.4rem 0.4rem;
font-size: 0.72rem;
gap: 0.3rem;
}
.cart-spec-chip-label { font-size: 0.62rem; }
.cart-spec-chip i { font-size: 0.78rem; }
}
/* === Minimal cart-quantity stepper ================================== */
.cart-row .cart-qty {
flex: 0 0 auto;
display: flex;
gap: 0.5rem;
align-items: center;
}
/* The stepper: [-] [number + unit] [+] welded into one pill */
.qty-stepper {
position: relative;
display: inline-flex;
align-items: stretch;
width: 166px; /* fixed total — same footprint for PCS or G */
height: 38px;
background: #fff;
border: 1px solid var(--vmc-line-strong);
border-radius: 999px;
overflow: hidden;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.qty-stepper:focus-within {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.16);
}
/* Saving — thin gold shimmer along the bottom edge of the pill */
.qty-stepper.is-saving::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%, var(--vmc-gold-soft) 40%,
var(--vmc-gold) 50%, var(--vmc-gold-soft) 60%, transparent 100%);
background-size: 200% 100%;
animation: qtySaveShimmer 900ms linear infinite;
pointer-events: none;
}
@keyframes qtySaveShimmer {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}
/* Saved — brief green ring confirms the change landed */
.qty-stepper.saved {
border-color: #2ea043;
box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.18);
}
.qty-step {
appearance: none;
border: 0;
background: transparent;
width: 70px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vmc-burgundy);
font-size: 0.95rem;
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.qty-step:hover,
.qty-step:focus-visible {
background: var(--vmc-soft);
color: var(--vmc-burgundy-deep);
outline: none;
}
.qty-step:active {
background: var(--vmc-warm);
}
/* Centre field: number + unit caption — center-aligned so the digit,
unit caption, and adjacent -/+ glyphs all share the same midline.
`flex: 1 1 auto` lets it expand into the fixed-width stepper while
the -/+ buttons keep their natural 38px footprint. */
.qty-field {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0 0.5rem;
margin: 0;
border-left: 1px solid var(--vmc-line);
border-right: 1px solid var(--vmc-line);
background: #fff;
flex: 1 1 auto;
min-width: 0;
justify-content: center;
line-height: 1;
}
.qty-input {
appearance: textfield;
-moz-appearance: textfield;
border: 0;
background: transparent;
flex: 1 1 auto;
min-width: 0;
width: 100%;
padding: 0;
text-align: right;
font-size: 0.95rem;
font-weight: 700;
color: var(--vmc-burgundy-deep);
font-variant-numeric: tabular-nums;
outline: none;
line-height: 1;
height: auto;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qty-unit {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8c7026;
flex: 0 0 auto;
}
/* Tiny round trash button — icon only */
.qty-remove-form { display: inline-flex; }
.qty-remove {
appearance: none;
border: 1px solid var(--vmc-line-strong);
background: #fff;
width: 38px;
height: 38px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vmc-muted);
font-size: 0.95rem;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.qty-remove:hover,
.qty-remove:focus-visible {
background: #fff5f5;
color: #c0392b;
border-color: #e88a85;
outline: none;
}
/* Mobile cart card — image + header on the top row; specs, total and the
qty stepper each span the FULL card width below (display:contents hoists
the .cart-info children into the card grid). */
@media (max-width: 575.98px) {
.cart-row {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
grid-template-areas:
"thumb head"
"purity purity"
"main main"
"extra extra"
"meta meta"
"qty qty";
column-gap: 0.85rem;
row-gap: 0.55rem;
align-items: center;
padding: 0.85rem;
}
.cart-row:hover { transform: none; } /* no lift on touch */
.cart-thumb-link { grid-area: thumb; align-self: center; }
.cart-row .cart-thumb { width: 76px; height: 76px; }
.cart-info { display: contents; }
.cart-head { grid-area: head; min-width: 0; align-self: center; }
.cart-head .cart-name { margin-bottom: 0; }
.cart-purity-row { grid-area: purity; margin: 0; }
.cart-row .cart-specs-main { grid-area: main; margin: 0; }
.cart-specs-extra { grid-area: extra; margin: 0; }
.cart-row .cart-meta { grid-area: meta; margin: 0; }
.cart-row .cart-qty {
grid-area: qty;
justify-content: space-between;
width: 100%;
margin-top: 0.8rem;
padding-top: 0.6rem;
border-top: 1px solid var(--vmc-line);
}
.qty-stepper { flex: 1 1 auto; width: auto; }
.qty-field { min-width: 0; }
}
/* ---- Cart card polish (scoped to .cart-row; does NOT touch the admin
enquiry view that also uses .cart-spec-chip) ------------------------- */
.cart-row {
border-color: var(--vmc-line-strong, #e3d6b8);
border-radius: 14px;
box-shadow: 0 2px 10px -6px rgba(91, 18, 38, 0.12);
}
.cart-row:hover {
border-color: var(--vmc-gold-soft, #d6b768);
box-shadow: 0 12px 28px -16px rgba(140, 112, 38, 0.42);
}
/* Cleaner thumbnail frame (size set per-breakpoint: 76px mobile, 92px desktop). */
.cart-row .cart-thumb {
border-radius: 12px;
border: 1px solid var(--vmc-line, #e3d6b8);
}
/* Name a touch larger; sku quieter. */
.cart-row .cart-name { font-size: 1.1rem; line-height: 1.25; }
.cart-row .cart-sku { letter-spacing: 0.14em; opacity: 0.9; }
/* Primary specs — Die / Diameter / Per pc as prominent stat cells.
auto-fit reflows the cells to 2 or 1 across when space is tight, so they
never squish to the point of wrapping the label/value. */
.cart-specs-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
gap: 0.5rem;
margin: 0.55rem 0 0.5rem;
}
.cart-spec-cell {
border: 1px solid var(--vmc-line, #e3d6b8);
border-radius: 10px;
padding: 0.45rem 0.6rem;
background: linear-gradient(180deg, #fffdf8, #fff);
}
.cart-spec-cell-lbl {
display: flex; align-items: center; gap: 0.32rem;
font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--vmc-muted, #9a8f7d);
white-space: nowrap;
}
.cart-spec-cell-lbl i { color: var(--vmc-gold-deep, #8b6a1f); font-size: 0.82rem; flex: 0 0 auto; }
.cart-spec-cell-val {
display: block; margin-top: 0.18rem;
font-size: 0.98rem; font-weight: 800;
color: var(--vmc-coffee-deep, #2f2628); font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Secondary specs — Ball / Wire gauge: quiet inline caption. */
.cart-specs-extra {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem;
margin: 0 0 0.35rem;
font-size: 0.78rem; color: var(--vmc-muted, #9a8f7d);
}
.cart-specs-extra-x { display: inline-flex; align-items: center; gap: 0.32rem; }
.cart-specs-extra-x i { color: var(--vmc-gold-deep, #8b6a1f); font-size: 0.8rem; }
.cart-specs-extra-x b { color: var(--vmc-coffee-deep, #2f2628); font-weight: 700; }
.cart-specs-extra-sep { color: var(--vmc-line-strong, #d8c9a6); }
/* Total weight — clean line, value carries the brand accent. */
.cart-row .cart-meta { font-size: 0.85rem; margin-top: 0.15rem; }
.cart-row .cart-meta strong { font-weight: 600; color: var(--vmc-muted, #9a8f7d); }
.cart-row .cart-meta [data-line-total] {
color: var(--vmc-burgundy, #7a1f33);
font-weight: 800;
font-variant-numeric: tabular-nums;
display: inline-block;
border-radius: 5px;
}
/* Brief gold flash when the total updates via AJAX. */
.cart-row .cart-meta [data-line-total].just-updated {
animation: cartTotalFlash 700ms ease;
}
@keyframes cartTotalFlash {
0% { background: rgba(201, 162, 74, 0.32); }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.cart-row .cart-meta [data-line-total].just-updated { animation: none; }
}
/* Remove — fade + shrink the row before it's pulled from the DOM. */
.cart-row--removing {
opacity: 0;
transform: scale(0.98);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
/* Per-card loading overlay while a qty change saves (Amazon-style) — only
this card dims + spins; the rest of the page stays put. */
.cart-row { position: relative; }
.cart-row.is-updating { pointer-events: none; }
.cart-row.is-updating::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: rgba(255, 255, 255, 0.55);
border-radius: inherit;
}
.cart-row.is-updating::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
z-index: 4;
border: 3px solid rgba(201, 162, 74, 0.35);
border-top-color: var(--vmc-gold-deep, #8b6a1f);
border-radius: 50%;
animation: cartSpin 0.6s linear infinite;
}
@keyframes cartSpin { to { transform: rotate(360deg); } }
/* Enquiry summary — small spinner + dimmed figures while a qty save is in
flight; brief gold ring pulse when the new totals land. */
.enquiry-card.is-updating::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 18px;
height: 18px;
z-index: 4;
border: 2px solid rgba(201, 162, 74, 0.32);
border-top-color: var(--vmc-gold-deep, #8b6a1f);
border-radius: 50%;
animation: cartSpin 0.6s linear infinite;
pointer-events: none;
}
.enquiry-card.is-updating .summary-line strong {
opacity: 0.4;
transition: opacity 0.2s ease;
}
.enquiry-card.is-refreshing { animation: cartSummaryPulse 600ms ease; }
@keyframes cartSummaryPulse {
0% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.45); }
100% { box-shadow: 0 0 0 6px rgba(201, 162, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
.cart-row.is-updating::before,
.enquiry-card.is-updating::after,
.enquiry-card.is-refreshing { animation: none; }
}
/* Desktop: thin divider between the details and the qty controls; controls
stay top-aligned (inline stepper + trash). */
@media (min-width: 576px) {
.cart-row .cart-thumb { width: 92px; height: 92px; }
.cart-row .cart-qty {
padding-left: 1.1rem;
border-left: 1px solid var(--vmc-line, #e3d6b8);
gap: 0.6rem;
}
}
/* Enquiry summary panel (right sidebar on cart page) */
.enquiry-card {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 12px;
padding: 1rem 1.1rem;
box-shadow: var(--vmc-shadow-sm);
position: sticky;
top: 90px;
}
.enquiry-card-head {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.7rem;
}
.enquiry-card-icon,
.enquiry-card .summary-icon {
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
border-radius: 999px;
background: #f7f1eb;
color: var(--vmc-burgundy);
font-size: 0.95rem;
}
.enquiry-card-icon {
color: var(--vmc-gold-deep);
font-size: 1rem;
}
.enquiry-card h6 {
font-family: var(--vmc-font-sans);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--vmc-gold-deep);
font-weight: 800;
margin: 0;
}
.enquiry-card .summary-line {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
align-items: center;
gap: 0.7rem;
padding: 0.65rem 0;
color: var(--vmc-ink);
}
.enquiry-card .summary-line + .summary-line {
border-top: 1px solid rgba(91, 18, 38, 0.12);
}
.enquiry-card .summary-label {
color: #111;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.25;
}
.enquiry-card .summary-label small {
display: block;
margin-top: 0.25rem;
color: var(--vmc-muted);
font-size: 0.68rem;
line-height: 1.25;
}
.enquiry-card .summary-line strong {
color: var(--vmc-burgundy-deep);
font-size: 1.1rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.enquiry-card-cta {
width: 100%;
min-height: 42px;
margin-top: 0.8rem;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.55rem;
border-radius: 999px !important;
font-size: 0.9rem !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(91, 18, 38, 0.16);
}
.enquiry-card-cta i {
font-size: 1rem;
}
.enquiry-card-note {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
margin-top: 0.9rem;
padding: 0.75rem 0.8rem;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255, 248, 239, 0.96), rgba(255, 255, 255, 0.78));
color: #171217;
font-size: 0.84rem;
line-height: 1.5;
}
.enquiry-card-note i {
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
border: 2px solid var(--vmc-gold-deep);
border-radius: 999px;
color: var(--vmc-gold-deep);
font-size: 1.1rem;
}
@media (max-width: 991.98px) {
.enquiry-card { position: static; }
}
@media (max-width: 575.98px) {
.enquiry-card {
border-radius: 12px;
padding: 0.9rem;
}
.enquiry-card .summary-line {
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 0.65rem;
padding: 0.6rem 0;
}
.enquiry-card-icon,
.enquiry-card .summary-icon,
.enquiry-card-note i {
width: 34px;
height: 34px;
font-size: 0.85rem;
}
.enquiry-card-head {
gap: 0.65rem;
margin-bottom: 0.6rem;
}
.enquiry-card h6 {
font-size: 0.7rem;
letter-spacing: 0.16em;
}
.enquiry-card .summary-label {
font-size: 0.9rem;
}
.enquiry-card .summary-line strong {
font-size: 1rem;
}
.enquiry-card-cta {
min-height: 40px;
font-size: 0.86rem !important;
}
.enquiry-card-note {
grid-template-columns: 34px minmax(0, 1fr);
gap: 0.65rem;
padding: 0.65rem 0.7rem;
font-size: 0.78rem;
}
}
.empty-state {
padding: 4rem 1rem;
text-align: center;
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 8px;
}
.admin-shell {
position: relative;
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
align-items: start;
gap: 1.5rem;
padding: 1.5rem;
min-height: calc(100vh - 70px);
/* Layered warm-cream background — subtle gold + burgundy glow against
a soft cream base, plus a faint dot grain for texture. */
background-color: var(--vmc-soft);
background-image:
radial-gradient(ellipse 60% 50% at 100% 0%, rgba(201, 162, 74, 0.10) 0%, transparent 60%),
radial-gradient(ellipse 60% 60% at 0% 100%, rgba(91, 18, 38, 0.06) 0%, transparent 55%),
radial-gradient(circle at 1px 1px, rgba(91, 18, 38, 0.045) 1px, transparent 0),
linear-gradient(180deg, var(--vmc-soft) 0%, #f4ecdb 100%);
background-size: auto, auto, 22px 22px, auto;
background-attachment: fixed, fixed, fixed, fixed;
}
/* Soft, almost-invisible top edge highlight inside the admin shell */
.admin-shell::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 180px;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent);
z-index: 0;
}
.admin-shell > * { position: relative; z-index: 1; }
.admin-sidebar {
align-self: start;
position: sticky;
top: 1.5rem;
min-height: calc(100vh - 3rem);
padding: 0;
border-radius: 16px;
color: #fff;
overflow: visible;
display: flex;
flex-direction: column;
/* Deep coffee → burgundy gradient with a faint gold halo at the top
and a subtle inner highlight so the panel reads as crafted, not flat. */
background:
radial-gradient(ellipse 120% 40% at 50% 0%, rgba(201, 162, 74, 0.16) 0%, transparent 60%),
linear-gradient(180deg, var(--vmc-coffee-deep) 0%, #2a0f17 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
0 12px 32px rgba(38, 12, 22, 0.35);
}
/* Brand-edge gold accent strip running down the right side of the sidebar */
.admin-sidebar::after {
content: "";
position: absolute;
right: 0;
top: 18%;
bottom: 18%;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg,
transparent 0%,
rgba(201, 162, 74, 0.55) 50%,
transparent 100%);
pointer-events: none;
}
.admin-sidebar-overlay {
display: none;
}
.admin-sidebar .admin-side-section {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(242, 196, 109, 0.7);
padding: 1.1rem 1.25rem 0.4rem;
font-weight: 700;
flex-shrink: 0;
}
/* Absorbs leftover vertical space so the View site link, user card,
and Sign out always hug the sidebar bottom (desktop and mobile). */
.admin-sidebar .admin-side-spacer {
flex: 1 1 auto;
min-height: 1rem;
}
.admin-sidebar a {
position: relative;
display: flex;
align-items: center;
gap: 0.65rem;
color: rgba(255, 255, 255, 0.78);
padding: 0.6rem 1.25rem;
border-radius: 0;
border-left: 3px solid transparent;
margin: 0;
font-size: 0.95rem;
text-decoration: none;
flex-shrink: 0;
transition:
background 180ms ease,
color 180ms ease,
border-color 180ms ease,
padding-left 200ms ease;
}
.admin-sidebar a::before {
/* soft inner glow that fades in on hover/active */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(201, 162, 74, 0.16), transparent 70%);
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.admin-sidebar a:hover {
color: #fff;
padding-left: 1.4rem;
}
.admin-sidebar a:hover::before { opacity: 0.6; }
.admin-sidebar a:hover i { color: var(--vmc-gold-soft); }
.admin-sidebar a.active {
color: #fff;
background: linear-gradient(90deg, rgba(201, 162, 74, 0.18) 0%, rgba(201, 162, 74, 0.04) 100%);
border-left-color: var(--vmc-gold);
box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.08);
}
.admin-sidebar a.active::before { opacity: 1; }
.admin-sidebar a.active i {
color: var(--vmc-gold-soft);
filter: drop-shadow(0 0 4px rgba(201, 162, 74, 0.55));
}
.admin-sidebar a i {
width: 18px;
text-align: center;
color: var(--vmc-gold);
flex-shrink: 0;
transition: color 180ms ease, filter 180ms ease;
}
.admin-content {
padding: 0;
min-width: 0;
}
/* Latest-enquiries card: rows sit at natural height. (Earlier the card
stretched to viewport height + rows grew to fill — fine with 9 rows, but
with 2 rows each ballooned to ~280px tall. Natural height fixes it.) */
.admin-latest-enquiries-card table tbody td {
padding-top: 0.85rem;
padding-bottom: 0.85rem;
vertical-align: middle;
}
@media (max-width: 991.98px) {
.admin-shell {
display: block;
padding: 1rem;
}
.admin-sidebar {
position: fixed;
top: 0;
left: -320px;
width: 280px;
min-height: 0;
height: 100%;
height: 100dvh;
max-height: 100dvh;
z-index: 1050;
border-radius: 0;
margin: 0;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
transition: left 0.3s ease;
}
.admin-sidebar::-webkit-scrollbar { display: none; }
.admin-sidebar.show {
left: 0;
}
.admin-sidebar-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.admin-sidebar-overlay.show {
opacity: 1;
visibility: visible;
}
}
/* Page top bar inside admin-content */
.admin-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.admin-top h1 {
font-family: var(--vmc-font-sans);
font-size: 1.4rem;
font-weight: 700;
color: var(--vmc-ink);
margin: 0;
}
.admin-top .admin-top-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* a-card — clean white container for admin sections */
.a-card {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 10px;
padding: 1.25rem;
box-shadow: var(--vmc-shadow-sm);
}
.a-card.p-0 { padding: 0; }
.a-card h2,
.a-card h3 {
font-family: var(--vmc-font-sans);
font-size: 1rem;
color: var(--vmc-maroon);
font-weight: 700;
margin: 0 0 1rem;
}
/* Existing .admin-panel — match the new card look so older pages don't look stale */
.admin-panel {
box-shadow: var(--vmc-shadow-sm);
}
.stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
@media (max-width: 991.98px) {
.stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.stat-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.stat-card {
background: #fff;
border: 1px solid var(--vmc-line);
border-left: 4px solid var(--vmc-champagne);
border-radius: 10px;
padding: 1.1rem 1.2rem;
box-shadow: var(--vmc-shadow-sm);
transition: transform 320ms var(--ease-out-fluid),
box-shadow 320ms var(--ease-out-fluid),
border-left-color 240ms ease;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--vmc-shadow-md);
border-left-color: var(--vmc-emerald);
}
.stat-card span.text-muted {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--vmc-muted) !important;
}
.stat-card strong {
display: block;
margin-top: 0.25rem;
font-family: var(--vmc-font-display);
font-size: 2.1rem;
line-height: 1;
color: var(--vmc-maroon);
font-weight: 700;
}
/* Admin tables — quieter, more elegant header */
.admin-content .table thead th {
background: #faf6ee;
color: var(--vmc-maroon);
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid #ead6ad;
}
.admin-content .table tbody td {
vertical-align: middle;
}
.table img.thumb {
width: 54px;
height: 54px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--vmc-line);
}
/* Sticky save sidebar inside admin form pages */
.admin-sticky {
position: sticky;
top: calc(70px + 1.5rem); /* clears the sticky navbar */
}
@media (max-width: 991.98px) {
.admin-sticky {
position: static;
}
}
/* Status / state pill badges used across admin tables */
.badge-status {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.32em 0.7em;
border-radius: 999px;
line-height: 1;
}
.b-active { background: #dcfce7; color: #166534; }
.b-hidden { background: #e5e7eb; color: #4b5563; }
.b-draft { background: #e5e7eb; color: #4b5563; }
.b-featured { background: #fef3c7; color: #7c4d00; margin-left: 0.25rem; }
.b-new { background: #fef3c7; color: #7c4d00; }
.b-reviewing { background: #dbeafe; color: #1e3a8a; }
.b-quoted { background: #e0e7ff; color: #3730a3; }
.b-closed { background: #dcfce7; color: #166534; }
.b-cancelled { background: #fee2e2; color: #991b1b; }
.footer-brand {
color: #fff;
font-weight: 800;
font-size: 1.4rem;
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin-top: 2rem;
padding-top: 1rem;
color: rgba(255, 255, 255, 0.56);
font-size: 0.9rem;
}
@media (max-width: 1199.98px) {
.product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.hero-carousel,
.hero-slide {
min-height: 620px;
}
.quick-categories {
margin-top: 0;
}
.category-strip a {
border-right: 0;
border-bottom: 1px solid var(--vmc-line);
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.filter-panel {
position: static;
}
}
@media (max-width: 575.98px) {
.hero-carousel,
.hero-slide {
min-height: 560px;
}
.hero-copy {
padding: 5.5rem 0 4rem;
}
.product-grid {
grid-template-columns: 1fr;
}
.spec-grid,
.spec-table {
grid-template-columns: 1fr;
}
.spec-table div:nth-child(odd) {
border-right: 0;
}
.qty-row {
grid-template-columns: 1fr 1fr;
}
.qty-row .btn {
grid-column: 1 / -1;
}
.cart-line {
grid-template-columns: 72px minmax(0, 1fr);
}
.cart-line img {
width: 72px;
height: 72px;
}
.footer-bottom {
flex-direction: column;
}
}
/* Preview parity: matches D:/vmc_web_claude/vmc-preview/index.html */
:root {
--c-burgundy: #5b1226;
--c-burgundy-deep: #3a0d18;
--c-burgundy-soft: #7a1a32;
--c-gold: #c9a24a;
--c-gold-soft: #e3c98a;
--c-gold-deep: #8c7026;
--c-cream: #faf6ee;
--c-cream-warm: #f4ecdb;
--c-ink: #1f1a1c;
--c-ink-soft: #4b3f44;
--c-line: rgba(91,18,38,0.12);
--c-line-strong: rgba(91,18,38,0.25);
--shadow-sm: 0 2px 6px rgba(58,13,24,0.08);
--shadow-md: 0 8px 24px rgba(58,13,24,0.12);
--shadow-lg: 0 18px 48px rgba(58,13,24,0.18);
--radius: 10px;
--radius-lg: 18px;
--font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html, body {
font-family: var(--font-body);
color: var(--c-ink);
background: var(--c-cream);
font-size: 15.5px;
line-height: 1.55;
}
.bg-cream { background: var(--c-cream) !important; }
.bg-warm { background: var(--c-cream-warm) !important; }
.bg-burgundy { background: var(--c-burgundy-deep); color: #f6e8c8; }
h1,h2,h3,h4,h5,.brand-name {
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.12;
color: var(--c-burgundy-deep);
}
a { color: var(--c-burgundy); text-decoration: none; transition: color .2s; }
.vmc-header { position: sticky; top: 0; z-index: 1030; }
.vmc-announcement {
position: relative;
z-index: 1040;
overflow: hidden;
box-shadow: 0 2px 12px rgba(58,13,24,.18);
transition: max-height 360ms cubic-bezier(.22,1,.36,1), opacity 260ms ease, transform 360ms cubic-bezier(.22,1,.36,1);
max-height: 86px;
}
.vmc-announcement::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.13) 42%, transparent 58%);
transform: translateX(-100%);
animation: vmcSheen 5.5s ease-in-out infinite;
pointer-events: none;
}
.vmc-announcement.is-hiding {
max-height: 0;
opacity: 0;
transform: translateY(-8px);
}
.vmc-announcement-inner {
min-height: 42px;
display: flex;
align-items: center;
gap: .85rem;
padding-top: .5rem;
padding-bottom: .5rem;
}
.vmc-announcement-icon {
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: rgba(255,255,255,.16);
flex: 0 0 auto;
}
.vmc-announcement-text {
flex: 1 1 auto;
text-align: center;
font-size: .9rem;
font-weight: 600;
line-height: 1.35;
}
.vmc-announcement-text a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
@keyframes vmcSheen {
0%, 62% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.vmc-nav {
background: var(--c-cream);
padding: .65rem 0;
border-bottom: 1px solid var(--c-line);
box-shadow: 0 2px 0 0 rgba(201,162,74,.18);
transition: box-shadow 260ms ease, background 260ms ease;
}
.vmc-nav .navbar-brand { display: flex; align-items: center; gap: .65rem; }
/* Logo image — sits before the brand text */
.brand-logo {
display: block;
width: 44px;
height: 44px;
object-fit: contain;
object-position: center;
flex: 0 0 auto;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
/* Vertical gold-fade divider between the logo and the wordmark */
.brand-divider {
display: inline-block;
width: 1px;
height: 30px;
flex: 0 0 1px;
background: #f6e8c88a;
margin: 0 0.15rem;
}
@media (max-width: 575.98px) {
.brand-logo { width: 36px; height: 36px; }
.brand-divider { height: 26px; }
}
.vmc-nav .brand-mark,
.brand-mark {
width: 40px;
height: 40px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--c-gold-soft), var(--c-gold) 55%, var(--c-gold-deep) 100%);
box-shadow: inset -3px -3px 6px rgba(0,0,0,.2), 0 2px 4px rgba(91,18,38,.25);
position: relative;
color: transparent;
}
.vmc-nav .brand-mark::after,
.brand-mark::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px dashed rgba(91,18,38,.3);
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
position: relative;
display: inline-block;
font-size: 1.45rem;
letter-spacing: 0;
color: var(--c-burgundy-deep);
transition: letter-spacing 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Shine overlay — duplicate the brand text via `attr(data-text)` and
paint it with a moving bright-gold gradient. The base text underneath
stays fully readable. Animation fires ONCE on load, then again on
hover/focus — no infinite loop. */
.brand-name::before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
font: inherit;
letter-spacing: inherit;
color: transparent;
background-image: linear-gradient(
110deg,
transparent 0%,
transparent 38%,
#f7d98a 46%,
#ffe9a8 50%,
#f7d98a 54%,
transparent 62%,
transparent 100%
);
background-size: 200% 100%;
background-position: -100% 0; /* resting state: gold parked off-left */
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* runs once on initial paint */
animation: brandShineIn 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.4s 1 both;
}
/* Two named keyframes with identical motion. Browsers treat a change of
`animation-name` as a fresh run, so swapping between these on hover
restarts the shimmer reliably. */
@keyframes brandShineIn {
from { background-position: 200% 0; }
to { background-position: -100% 0; }
}
@keyframes brandShineHover {
from { background-position: 200% 0; }
to { background-position: -100% 0; }
}
.vmc-nav .navbar-brand:hover .brand-name::before,
.vmc-nav .navbar-brand:focus-visible .brand-name::before {
animation: brandShineHover 1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1 both;
}
.vmc-nav .navbar-brand:hover .brand-name,
.vmc-nav .navbar-brand:focus-visible .brand-name {
letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: reduce) {
.brand-name::before { animation: none; opacity: 0; }
}
.brand-tag {
display: inline-block;
font-size: .7rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--c-ink-soft);
margin-top: 2px;
transition: letter-spacing 500ms cubic-bezier(0.4, 0, 0.2, 1),
color 300ms ease;
}
.vmc-nav .navbar-brand:hover .brand-tag,
.vmc-nav .navbar-brand:focus-visible .brand-tag {
letter-spacing: 0.22em;
color: var(--vmc-gold-deep);
}
.vmc-nav .nav-link {
color: var(--c-ink);
font-weight: 500;
font-size: .95rem;
letter-spacing: .04em;
padding: .5rem .9rem;
position: relative;
transition: color 180ms ease, transform 260ms cubic-bezier(.22,1,.36,1);
}
.vmc-nav .nav-link.active,
.vmc-nav .nav-link:hover { color: var(--c-burgundy); }
.vmc-nav .nav-link:hover { transform: translateY(-1px); }
.vmc-nav .nav-link.active::after {
content: "";
position: absolute;
left: .9rem;
right: .9rem;
bottom: .25rem;
height: 2px;
background: var(--c-gold);
transform-origin: center;
animation: navUnderlineIn 260ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes navUnderlineIn {
from { transform: scaleX(.25); opacity: 0; }
to { transform: scaleX(1); opacity: 1; }
}
.vmc-nav .navbar-toggler {
border: 0;
color: var(--c-burgundy-deep);
box-shadow: none;
}
.btn {
border-radius: 999px;
padding: .55rem 1.4rem;
font-weight: 500;
letter-spacing: .03em;
transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 220ms ease,
letter-spacing 220ms ease
}
.btn-burgundy {
background: var(--c-burgundy);
color: #fff;
border-color: var(--c-burgundy);
}
.btn-burgundy:hover { background: var(--c-burgundy-deep); color: #fff; border-color: var(--c-burgundy-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(91,18,38,.26); }
.btn-gold {
background: linear-gradient(180deg, var(--c-gold-soft), var(--c-gold));
color: var(--c-burgundy-deep);
border: 1px solid var(--c-gold-deep);
}
.btn-gold:hover {background: var(--c-gold);color: var(--c-burgundy-deep);border-color: var(--c-gold-deep);transform: translateY(-2px);/* box-shadow: 0 10px 24px rgba(201,162,74,.32); */}
.btn-outline-burgundy {
border: 1px solid var(--c-burgundy);
color: var(--c-burgundy);
background: transparent;
}
.btn-outline-burgundy:hover { background: var(--c-burgundy); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(91,18,38,.2); }
.btn-cart {
background: transparent;
border: 1px solid var(--c-line-strong);
color: var(--c-burgundy-deep);
padding: .42rem .9rem;
}
.btn-cart:hover { background: var(--c-burgundy); color: #fff; border-color: var(--c-burgundy); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(91,18,38,.18); }
.cart-badge {
position: absolute;
top: -6px;
right: -6px;
background: var(--c-gold);
color: var(--c-burgundy-deep);
font-size: .7rem;
font-weight: 700;
border-radius: 999px;
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title .eyebrow {
display: inline-block;
font-size: .72rem;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--c-gold-deep);
font-weight: 600;
padding: 0 1rem;
position: relative;
}
.section-title .eyebrow::before,
.section-title .eyebrow::after {
content: "";
position: absolute;
top: 50%;
width: 32px;
height: 1px;
background: var(--c-gold-deep);
}
.section-title .eyebrow::before { right: 100%; }
.section-title .eyebrow::after { left: 100%; }
.section-title h2 { margin-top: .6rem; }
.hero {
position: relative;
background:
radial-gradient(circle at 80% 20%, rgba(201,162,74,.22), transparent 55%),
radial-gradient(circle at 10% 80%, rgba(122,26,50,.45), transparent 60%),
linear-gradient(135deg, var(--c-burgundy-deep) 0%, var(--c-burgundy) 60%, #2a0a12 100%);
color: #fbe9bf;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 36px 36px;
opacity: .5;
pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; padding: clamp(3rem, 8vw, 6rem) 0; }
.hero h1 {
color: #ffeebf;
font-style: italic;
font-weight: 500;
line-height: 1.05;
}
.hero h1 em { color: var(--c-gold-soft); font-style: normal; }
.hero .lead { color: #f1d99c; opacity: .85; font-size: 1.1rem; max-width: 560px; }
.purity-pill {
display: inline-block;
padding: 0.28rem 0.65rem 0.28rem 0.55rem;
border-radius: 8px;
font-size: .72rem;
font-weight: 600;
background: var(--vmc-gold-soft);
color: #2a0a12;
}
.vmc-footer {
background: linear-gradient(359deg, #2f0a13 0%, #280610 100%);
color: #f1d99c;
position: relative;
}
.vmc-footer::before {
content: "";
display: block;
height: 4px;
background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}
.footer-brand {
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.12;
color: var(--c-gold-soft);
font-size: 1.6rem;
}
.footer-heading {
font-family: var(--font-body);
font-size: .75rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--c-gold-soft);
margin-bottom: 1rem;
}
.footer-link { color: #ecd9a4; opacity: .8; display: inline-block; padding: .15rem 0; font-size: .88rem; }
.footer-link:hover { color: #fff; opacity: 1; }
.social-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(241,217,156,.3);
color: #f1d99c;
transition: transform 240ms cubic-bezier(.22,1,.36,1), background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.social-icon:hover { background: var(--c-gold); color: var(--c-burgundy-deep); border-color: var(--c-gold); transform: translateY(-2px); }
.footer-bottom { background: rgba(0,0,0,.25); color: #f1d99c; }
.vmc-footer .footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem 0.8rem;
border-top: 0;
margin-top: 0;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
line-height: 1.5;
}
.vmc-footer .footer-bottom .footer-copy {
white-space: nowrap;
}
.vmc-footer .footer-bottom .footer-sep {
color: rgba(201, 162, 74, 0.55);
font-size: 1rem;
line-height: 1;
}
.vmc-footer .footer-bottom .footer-credit {
color: #c9a24a;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Mobile: stack the two halves on their own lines, no orphaned bullet */
@media (max-width: 575.98px) {
.vmc-footer .footer-bottom {
flex-direction: column;
gap: 0.35rem;
text-align: center;
padding-left: 1rem;
padding-right: 1rem;
}
.vmc-footer .footer-bottom .footer-copy {
white-space: normal; /* allow natural wrapping in narrow viewports */
}
.vmc-footer .footer-bottom .footer-sep {
display: none; /* drop the middot when stacked */
}
}
.whatsapp-fab {
position: fixed !important;
right: 18px;
bottom: 18px;
z-index: 1040;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
box-shadow: 0 8px 20px rgba(37, 211, 102, .4);
isolation: isolate;
overflow: visible;
/* GPU-isolated compositor layer (own paint context) so carousel paints
can't disturb it. Critically, `transform` is NOT in the baseline
transition list, so any transform change cannot animate. */
transform: none !important;
backface-visibility: visible;
will-change: auto !important;
animation: none !important;
transition: opacity 220ms ease, box-shadow 200ms ease, background 200ms ease;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
color: #fff;
transform: none !important;
transition: box-shadow 180ms ease !important;
}
/* Belt-and-braces — no global keyframe can leak in */
.whatsapp-fab,
.whatsapp-fab * {
animation-name: none !important;
}
.card,
.product-card,
.cart-row,
.admin-panel,
.stat-card,
.filter-panel,
.auth-panel,
.detail-panel,
.cart-panel {
transition: transform 340ms cubic-bezier(.22,1,.36,1), box-shadow 340ms cubic-bezier(.22,1,.36,1), border-color 240ms ease;
}
.card:hover,
.product-card:hover,
.cart-row:hover,
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--c-gold);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
@media (max-width: 991px) {
.vmc-nav .nav-link.active::after { display: none; }
.navbar-collapse { background: var(--c-cream); padding: .75rem 0; }
}
@media (max-width: 575px) {
.brand-name { font-size: 1.2rem; }
.home-featured .product-card .body { padding: .85rem; }
.btn-cart .bi { font-size: 1.1rem; }
.whatsapp-fab { width: 50px; height: 50px; font-size: 1.4rem; bottom: 14px; right: 14px; }
}
/* =====================================================================
FINAL OVERRIDES — these win the cascade for refinements requested.
===================================================================== */
/* --- Announcement shine — bright, smooth, visible across themes ----- */
.vmc-announcement::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: -40% !important;
width: 30% !important;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.45) 35%,
rgba(255, 255, 255, 0.95) 50%,
rgba(255, 255, 255, 0.45) 65%,
rgba(255, 255, 255, 0) 100%
) !important;
transform: skewX(-22deg);
animation: announceShineFinal 2.8s linear infinite !important;
pointer-events: none !important;
z-index: 1 !important;
inset: auto;
filter: blur(0.6px);
}
@keyframes announceShineFinal {
0% { left: -40%; opacity: 0; }
8% { opacity: 1; }
65% { left: 130%; opacity: 1; }
66% { opacity: 0; }
100% { left: 130%; opacity: 0; }
}
/* --- Smoother detail-media zoom-in ---------------------------------- */
.detail-media.has-zoom img {
transition: transform 980ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 280ms ease,
transform-origin 260ms ease !important;
}
.detail-media.has-zoom.is-zooming img {
transform: scale(1.55);
transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* --- Product status pill — theme colours + alignment + shine -------- */
.product-tag-pill {
position: relative;
display: inline-flex !important;
align-items: center;
line-height: 1;
padding: 0.35em 0.85em !important;
overflow: hidden;
isolation: isolate;
/* default = champagne gold, like the rest of the theme accents */
background: linear-gradient(135deg, var(--vmc-gold-soft), var(--vmc-gold)) !important;
color: var(--vmc-burgundy-deep) !important;
box-shadow: 0 3px 10px rgba(140, 112, 38, 0.32) !important;
}
.product-tag-pill::after {
/* shine sweep across the pill */
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 50%;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-20deg);
animation: tagShine 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes tagShine {
0%, 12% { left: -60%; }
55% { left: 120%; }
100% { left: 120%; }
}
/* Theme-aligned variants (override earlier distinct colours) */
.product-tag-new-arrival {
background: linear-gradient(135deg, var(--vmc-gold), #d8b85a) !important;
color: var(--vmc-burgundy-deep) !important;
}
.product-tag-bestseller {
background: linear-gradient(135deg, var(--vmc-burgundy), var(--vmc-burgundy-deep)) !important;
color: var(--vmc-gold-soft) !important;
box-shadow: 0 3px 10px rgba(91, 18, 38, 0.4) !important;
}
.product-tag-limited-edition {
background: linear-gradient(135deg, var(--vmc-burgundy-soft), var(--vmc-burgundy)) !important;
color: var(--vmc-gold-soft) !important;
}
.product-tag-coming-soon {
background: linear-gradient(135deg, #d4c5a8, #b9a47e) !important;
color: var(--vmc-burgundy-deep) !important;
}
.product-card .product-tag-pill {
top: 12px;
left: 12px;
font-size: 0.62rem;
padding: 0.32em 0.7em !important;
letter-spacing: 0.08em;
border-radius: 999px;
}
/* --- Product card refinement (spacing + hover) ---------------------- */
.product-body {
padding: 1rem 1.05rem 1.05rem !important;
gap: 0.55rem !important;
flex: 1;
display: flex;
flex-direction: column;
}
.product-body h3 {
font-size: 1.05rem !important;
line-height: 1.3 !important;
margin: 0 !important;
font-weight: 700 !important;
letter-spacing: -0.005em !important;
}
.product-body h3 a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.product-body .small.text-muted {
margin-top: 0 !important;
font-size: 0.78rem !important;
letter-spacing: 0.01em;
color: var(--vmc-muted) !important;
}
.product-body .metal-pill {
font-size: 0.66rem;
padding: 0.22rem 0.55rem;
align-self: flex-start;
}
.product-body .btn-vmc {
margin-top: auto !important; /* push CTA to the bottom regardless of meta height */
padding: 0.45rem 0.85rem;
font-size: 0.85rem;
}
@media (max-width: 575.98px) {
.product-body { padding: 0.85rem !important; gap: 0.45rem !important; }
.product-body h3 { font-size: 1rem !important; }
}
/* =====================================================================
NAVBAR ICON REFRESH — flatter, more modern user avatar; refined cart.
===================================================================== */
/* User avatar — replace radial bevel with a flat burgundy disc + gold ring */
.vmc-nav-icon-user {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
width: 42px !important;
height: 42px !important;
overflow: visible !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.vmc-nav-icon-user .vmc-user-avatar {
width: 38px !important;
height: 38px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--vmc-burgundy) 0%, var(--vmc-burgundy-deep) 100%) !important;
color: var(--vmc-gold-soft) !important;
font-weight: 700 !important;
font-size: 0.92rem !important;
box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.55),
0 4px 10px rgba(58, 13, 24, 0.18) !important;
transition: box-shadow 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
display: grid !important;
place-items: center;
line-height: 1;
}
.vmc-nav-icon-user:hover .vmc-user-avatar,
.vmc-nav-icon-user:focus-visible .vmc-user-avatar,
.vmc-nav-icon-user.active .vmc-user-avatar,
.vmc-nav-icon-user.show .vmc-user-avatar {
box-shadow: 0 0 0 1px var(--vmc-gold),
0 8px 18px rgba(58, 13, 24, 0.32) !important;
}
.vmc-nav-icon-user:hover,
.vmc-nav-icon-user:focus-visible,
.vmc-nav-icon-user.active {
background: transparent !important;
border-color: transparent !important;
}
/* Cart icon — refined: cleaner border, refined hover, larger badge */
.vmc-nav-icon-cart {
border-color: rgba(201, 162, 74, 0.7) !important;
background: transparent !important;
}
.vmc-nav-icon-cart i {
font-size: 1.2rem;
color: var(--vmc-burgundy-deep);
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms ease;
}
.vmc-nav-icon-cart:hover,
.vmc-nav-icon-cart:focus-visible {
background: var(--vmc-gold) !important;
border-color: var(--vmc-gold) !important;
}
.vmc-nav-icon-cart:hover i { transform: rotate(-6deg); }
.vmc-nav-icon-cart.has-items i { color: var(--vmc-burgundy); }
.vmc-nav-icon-cart.has-items {
background: rgba(201, 162, 74, 0.15) !important;
}
/* Cart badge — slightly bigger, with a subtle pulse on appearance */
.vmc-nav-icon-cart .cart-badge {
min-width: 18px !important;
height: 18px !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
background: var(--vmc-burgundy) !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 6px rgba(91, 18, 38, 0.4);
animation: cartBadgePop 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cartBadgePop {
0% { transform: scale(0.4); opacity: 0; }
70% { transform: scale(1.12); }
100% { transform: scale(1); opacity: 1; }
}
/* User-menu dropdown's small avatar — same flat treatment */
.vmc-user-menu .vmc-user-avatar,
.vmc-user-dropdown-head .vmc-user-avatar {
background: linear-gradient(135deg, var(--vmc-burgundy) 0%, var(--vmc-burgundy-deep) 100%) !important;
color: var(--vmc-gold-soft) !important;
box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.55) !important;
}
/* =====================================================================
ADMIN — compact action buttons (no icons) + cleaner Settings UI
===================================================================== */
/* Tiny pill button — used in admin tables for Edit/Delete/View */
.btn-action {
display: inline-block;
padding: 0.3rem 0.95rem;
font-size: 0.78rem;
font-weight: 600;
line-height: 1.4;
border-radius: 10px;
border: 1px solid var(--vmc-line-strong);
background: #fff;
color: var(--vmc-burgundy);
text-decoration: none;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
letter-spacing: 0.02em;
/* margin-left: 0.25rem; */
}
.btn-action:first-child { margin-left: 0; }
.btn-action:hover,
.btn-action:focus-visible {
background: var(--vmc-burgundy);
border-color: var(--vmc-burgundy);
color: #fff;
outline: none;
box-shadow: 0 4px 10px rgba(91, 18, 38, 0.18);
}
.btn-action.btn-action-danger {
color: #b91c1c;
border-color: rgba(185, 28, 28, 0.3);
}
.btn-action.btn-action-danger:hover,
.btn-action.btn-action-danger:focus-visible {
background: #b91c1c;
border-color: #b91c1c;
color: #fff;
box-shadow: 0 4px 10px rgba(185, 28, 28, 0.22);
}
/* Admin tables — compact rows, clearer column alignment */
.admin-shell .table th,
.admin-shell .table td {
padding: 0.55rem 0.7rem !important;
vertical-align: middle;
}
.admin-shell .table thead th {
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.06em;
background: #faf6ee;
color: var(--vmc-burgundy);
font-weight: 700;
}
.admin-shell .table .text-end form,
.admin-shell .table .text-end .btn-action {
display: inline-block;
}
/* Size chart — fixed-height card with sticky header + bottom pager.
The card itself is flexbox so the table scroll fills the remaining
space between the head and the pager regardless of row count. */
.sizes-card {
display: flex;
flex-direction: column;
/* CAP, not fixed height: card sizes to its content but never taller than
the viewport — so the pager is always on-screen (the fixed calc height
overflowed the viewport and pushed the pager off the bottom). When the
page (10/page) exceeds the cap the inner table-scroll handles it. */
height: auto;
min-height: 420px;
max-height: calc(100vh - 8.5rem);
}
.sizes-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.sizes-card-tools {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
}
.sizes-total strong {
color: var(--vmc-burgundy);
font-weight: 800;
font-size: 1rem;
}
.sizes-pagesize {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
}
.sizes-pagesize select {
width: auto;
min-width: 70px;
}
.sizes-table-scroll {
flex: 1 1 auto; /* take the leftover space between head & pager */
min-height: 0; /* required so flex child can actually shrink */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--vmc-line);
border-radius: 8px;
}
.admin-shell .sizes-table { margin-bottom: 0; }
.admin-shell .sizes-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: #faf6ee;
box-shadow: inset 0 -1px 0 var(--vmc-line);
}
/* Pager bar at the bottom of the card */
.sizes-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
flex-wrap: wrap;
padding-top: 0.7rem;
margin-top: 0.6rem;
border-top: 1px dashed var(--vmc-line);
}
.sizes-pager-info strong {
color: var(--vmc-burgundy);
font-weight: 800;
}
.sizes-pager-nav {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.sizes-pager-pages {
display: inline-flex;
align-items: center;
gap: 0.2rem;
margin: 0 0.15rem;
}
.sizes-pager-btn,
.sizes-pager-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 0.55rem;
border: 1px solid var(--vmc-line-strong);
border-radius: 7px;
background: #fff;
color: var(--vmc-coffee-deep);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.sizes-pager-btn:hover:not(:disabled),
.sizes-pager-num:hover:not(.is-current) {
border-color: var(--vmc-gold);
background: rgba(201, 162, 74, 0.08);
color: var(--vmc-burgundy-deep);
}
.sizes-pager-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.sizes-pager-num.is-current {
background: var(--vmc-gold);
border-color: var(--vmc-gold-deep);
color: var(--vmc-burgundy-deep);
box-shadow: 0 1px 4px rgba(201, 162, 74, 0.35);
}
.sizes-pager-ellipsis {
color: var(--vmc-muted);
padding: 0 0.15rem;
user-select: none;
}
/* Mobile — let the card breathe by shrinking the height and tightening pager */
@media (max-width: 767.98px) {
.sizes-card { height: auto; max-height: 70vh; }
.sizes-pager-btn,
.sizes-pager-num {
min-width: 28px;
height: 28px;
padding: 0 0.4rem;
font-size: 0.78rem;
}
.sizes-pager-info { width: 100%; text-align: center; }
.sizes-pager-nav { width: 100%; justify-content: center; }
}
/* ===== Site Settings page ============================================ */
/* .settings-page-head is now fully styled by the unified .admin-page-head
rule above — this block is intentionally a no-op kept for grep history.
Override here only if a per-page tweak is genuinely needed. */
/* Sticky section quick-nav — anchor pills, horizontal scroll on mobile */
.settings-quicknav {
position: sticky;
top: 0;
z-index: 4;
display: flex;
gap: 0.4rem;
padding: 0.55rem 0.6rem;
margin: 0 -0.25rem 1.1rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border: 1px solid var(--vmc-line);
border-radius: 999px;
box-shadow: var(--vmc-shadow-sm);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.settings-quicknav::-webkit-scrollbar { display: none; }
.settings-quicknav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 600;
color: var(--vmc-burgundy);
text-decoration: none;
border: 1px solid transparent;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
white-space: nowrap;
}
.settings-quicknav a i {
color: var(--vmc-gold-deep);
font-size: 0.95rem;
}
.settings-quicknav a:hover {
background: var(--vmc-soft);
border-color: var(--vmc-line);
}
.settings-quicknav a.active {
background: var(--vmc-burgundy);
color: #fff;
border-color: var(--vmc-burgundy);
}
.settings-quicknav a.active i { color: var(--vmc-gold-soft); }
/* Settings page card stack — replaces the long single form with hr separators */
.settings-card {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 14px;
padding: 1.25rem 1.4rem 1.4rem;
box-shadow: var(--vmc-shadow-sm);
margin-bottom: 1.1rem;
scroll-margin-top: 5rem;
transition: box-shadow 200ms ease, border-color 200ms ease;
}
.settings-card:hover {
border-color: var(--vmc-line-strong);
box-shadow: var(--vmc-shadow-md);
}
.settings-card:target {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18), var(--vmc-shadow-md);
}
.settings-card .admin-section-head {
margin-bottom: 1rem;
}
.settings-card .form-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--vmc-burgundy-deep);
letter-spacing: 0.02em;
margin-bottom: 0.3rem;
}
.settings-card .form-text {
color: var(--vmc-muted);
font-size: 0.78rem;
}
.settings-card .form-control,
.settings-card .form-select,
.settings-card textarea.form-control {
border-color: var(--vmc-line-strong);
border-radius: 8px;
}
.settings-card .form-control:focus,
.settings-card .form-select:focus {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}
.settings-card .form-control-color {
width: 100%;
height: 38px;
padding: 4px;
border-radius: 8px;
}
.settings-save-bar {
position: sticky;
bottom: 1rem;
z-index: 5;
margin: 1.4rem 0 0;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, var(--vmc-burgundy-deep) 0%, var(--vmc-coffee-deep) 100%);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow:
0 12px 32px rgba(38, 12, 22, 0.35),
0 2px 6px rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
gap: 0.9rem;
flex-wrap: wrap;
}
/* Hint slot — collapses to zero space when empty (not dirty). */
.settings-save-bar .save-bar-hint {
display: none;
color: rgba(255, 255, 255, 0.85);
font-size: 0.85rem;
font-weight: 500;
min-width: 0;
flex: 1 1 auto;
}
.settings-save-bar.is-dirty .save-bar-hint {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.settings-save-bar .btn {
flex-shrink: 0;
margin-left: auto; /* always hug the right edge */
}
/* High-contrast Save button on the dark bar — balanced proportions */
.settings-save-bar .btn-vmc {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(135deg, var(--vmc-gold-soft) 0%, var(--vmc-gold) 55%, var(--vmc-gold-deep) 100%);
border: 1px solid var(--vmc-gold-deep);
color: var(--vmc-burgundy-deep);
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.015em;
line-height: 1.25;
padding: 0.6rem 1.5rem;
min-height: 42px;
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
0 3px 8px rgba(0, 0, 0, 0.22);
transition:
transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 200ms ease,
background 200ms ease,
letter-spacing 200ms ease;
}
/* Diagonal sheen that sweeps across on hover */
.settings-save-bar .btn-vmc::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent 30%,
rgba(255, 255, 255, 0.55) 50%,
transparent 70%
);
transform: translateX(-120%);
transition: transform 650ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1;
}
.settings-save-bar .btn-vmc > * {
position: relative;
z-index: 2;
}
.settings-save-bar .btn-vmc:hover,
.settings-save-bar .btn-vmc:focus-visible {
background: linear-gradient(135deg, var(--vmc-gold) 0%, var(--vmc-gold-deep) 100%);
color: var(--vmc-burgundy-deep);
transform: translateY(-2px) scale(1.02);
letter-spacing: 0.04em;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 8px 20px rgba(201, 162, 74, 0.45),
0 2px 6px rgba(0, 0, 0, 0.3);
}
.settings-save-bar .btn-vmc:hover::before,
.settings-save-bar .btn-vmc:focus-visible::before {
transform: translateX(120%);
}
.settings-save-bar .btn-vmc:focus-visible {
outline: 2px solid var(--vmc-gold-soft);
outline-offset: 2px;
}
.settings-save-bar .btn-vmc:active {
transform: translateY(0) scale(1);
letter-spacing: 0.015em;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.25),
0 1px 2px rgba(0, 0, 0, 0.15);
transition-duration: 80ms;
}
.settings-save-bar.is-dirty {
border-color: var(--vmc-gold);
box-shadow:
0 0 0 2px rgba(201, 162, 74, 0.35),
0 14px 36px rgba(38, 12, 22, 0.45);
}
.settings-save-bar.is-dirty .save-bar-hint {
color: var(--vmc-gold-soft);
font-weight: 600;
}
.settings-save-bar.is-dirty .save-bar-hint i {
color: var(--vmc-gold);
}
@media (max-width: 767.98px) {
.settings-card {
padding: 1rem 1rem 1.1rem;
border-radius: 12px;
}
.settings-card .admin-section-head {
margin-bottom: 0.75rem;
}
.settings-quicknav {
border-radius: 12px;
margin: 0 0 1rem;
}
.settings-quicknav a {
padding: 0.4rem 0.75rem;
font-size: 0.78rem;
}
}
@media (max-width: 575.98px) {
.settings-save-bar {
bottom: 0.5rem;
padding: 0.55rem 0.8rem;
gap: 0.5rem;
}
.settings-save-bar .save-bar-hint {
font-size: 0.78rem;
flex: 1 1 100%;
order: -1; /* hint sits above the button when dirty */
}
.settings-save-bar .btn {
margin-left: 0; /* button stretches full width on phones */
width: 100%;
}
.settings-quicknav a span {
display: none;
}
.settings-quicknav a {
padding: 0.45rem 0.65rem;
}
.settings-quicknav a i { font-size: 1.05rem; }
}
/* =====================================================================
ABOUT page — minimal, elegant, with a soft animated brand backdrop
===================================================================== */
.about-page {
position: relative;
z-index: 1; /* sits above the animated backdrop */
}
/* ---- Animated backdrop ----------------------------------------------
Calm, breathing mesh: three slow drifting orbs + a slowly-shifting
mesh gradient + faint paper grain. Inspired by the hero's flowing
gradient but pure-CSS, lower contrast, and much slower.
------------------------------------------------------------------- */
.about-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Soft mesh that slowly slides — adds a gentle 'breathing' to the page
so the orbs aren't the only motion. ~45s loop = barely perceptible. */
.about-bg::before {
content: "";
position: absolute;
inset: -10%;
background:
radial-gradient(ellipse 40% 30% at 20% 30%, rgba(201, 162, 74, 0.10), transparent 60%),
radial-gradient(ellipse 35% 35% at 80% 70%, rgba(91, 18, 38, 0.08), transparent 60%),
radial-gradient(ellipse 45% 35% at 50% 50%, rgba(255, 240, 200, 0.10), transparent 60%);
background-size: 150% 150%, 150% 150%, 150% 150%;
background-position: 0% 0%, 100% 100%, 50% 50%;
animation: aboutMesh 45s ease-in-out infinite alternate;
}
.about-bg-orb {
--mx: 0px;
--my: 0px;
position: absolute;
border-radius: 999px;
filter: blur(90px);
opacity: 0.4;
will-change: transform, opacity;
transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Each orb composes its own drift animation + a base mouse-parallax
translate fed by the --mx / --my custom properties from JS. */
.about-bg-orb--gold {
width: 440px; height: 440px;
top: -100px; right: -100px;
background: radial-gradient(circle, rgba(243, 220, 145, 0.85), transparent 70%);
animation: aboutOrbA 28s ease-in-out infinite alternate,
aboutOrbBreathe 12s ease-in-out infinite alternate;
}
.about-bg-orb--burgundy {
width: 420px; height: 420px;
bottom: -120px; left: -110px;
background: radial-gradient(circle, rgba(91, 18, 38, 0.55), transparent 70%);
animation: aboutOrbB 32s ease-in-out infinite alternate,
aboutOrbBreathe 14s ease-in-out infinite alternate;
}
.about-bg-orb--champagne {
width: 320px; height: 320px;
top: 42%; left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255, 240, 200, 0.45), transparent 70%);
animation: aboutOrbC 38s ease-in-out infinite alternate,
aboutOrbBreathe 16s ease-in-out infinite alternate;
}
/* When the cursor moves, the JS sets --mx / --my and we add that on
top of each keyframe's transform via a tiny outer wrapper trick:
re-declare the running animation translates to honour --mx/--my. */
.about-bg-orb--gold { animation-name: aboutOrbA_m, aboutOrbBreathe; }
.about-bg-orb--burgundy { animation-name: aboutOrbB_m, aboutOrbBreathe; }
.about-bg-orb--champagne { animation-name: aboutOrbC_m, aboutOrbBreathe; }
@keyframes aboutOrbA_m {
0% { transform: translate(var(--mx), var(--my)) scale(1); }
100% { transform: translate(calc(-60px + var(--mx)), calc(40px + var(--my))) scale(1.08); }
}
@keyframes aboutOrbB_m {
0% { transform: translate(var(--mx), var(--my)) scale(1); }
100% { transform: translate(calc(50px + var(--mx)), calc(-40px + var(--my))) scale(1.10); }
}
@keyframes aboutOrbC_m {
0% { transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) scale(1); }
100% { transform: translate(calc(-44% + var(--mx)), calc(-56% + var(--my))) scale(1.08); }
}
.about-bg-grain {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(91, 18, 38, 0.04) 1px, transparent 0);
background-size: 24px 24px;
opacity: 0.55;
}
@keyframes aboutMesh {
0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
50% { background-position: 30% 20%, 70% 80%, 40% 60%; }
100% { background-position: 10% 40%, 90% 60%, 60% 40%; }
}
@keyframes aboutOrbA {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-60px, 40px) scale(1.08); }
}
@keyframes aboutOrbB {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(50px, -40px) scale(1.10); }
}
@keyframes aboutOrbC {
0% { transform: translate(-50%, -50%) scale(1); }
100% { transform: translate(-44%, -56%) scale(1.08); }
}
/* Independent slow opacity breath layered on top of the drift */
@keyframes aboutOrbBreathe {
0% { opacity: 0.32; }
100% { opacity: 0.50; }
}
@media (prefers-reduced-motion: reduce) {
.about-bg-orb,
.about-bg::before { animation: none; }
}
/* ---- Shared section rhythm — tighter & more even -------------------- */
.about-page section { padding: 2rem 0; }
.about-page section:first-of-type { padding-top: 3rem; }
.about-page section:last-of-type { padding-bottom: 4rem; }
@media (max-width: 767.98px) {
.about-page section { padding: 2rem 0; }
.about-page section:first-of-type { padding-top: 2rem; }
.about-page section:last-of-type { padding-bottom: 2rem; }
}
/* ---- Eyebrow + section heads ---------------------------------------- */
.about-eyebrow {
display: inline-block;
color: var(--vmc-gold-deep);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.72rem;
font-weight: 700;
margin-bottom: 0.3rem;
}
.about-section-head {
text-align: center;
max-width: 680px;
margin: 0 auto 1.6rem;
}
.about-section-head h2 {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--vmc-burgundy-deep);
margin: 0;
line-height: 1.2;
}
/* ---- Hero ----------------------------------------------------------- */
.about-hero { text-align: center; }
.about-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
font-family: var(--vmc-font-display, var(--vmc-font-sans));
color: var(--vmc-burgundy-deep);
margin: 0 auto 1rem;
max-width: 880px;
line-height: 1.05;
letter-spacing: -0.005em;
font-weight: 700;
}
/* Small italic "About" — sits above the brand name as a refined label */
.about-title-pre {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-style: italic;
font-weight: 400;
font-size: clamp(1rem, 1.4vw, 1.25rem);
letter-spacing: 0.02em;
color: var(--vmc-gold-deep);
margin-bottom: 0.1rem;
position: relative;
padding: 0 1.4rem;
}
.about-title-pre::before,
.about-title-pre::after {
content: "";
position: absolute;
top: 50%;
width: 0.9rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--vmc-gold), transparent);
}
.about-title-pre::before { left: 0; }
.about-title-pre::after { right: 0; }
/* The brand name — does the heavy visual lifting */
.about-title-name {
font-size: clamp(2.1rem, 4.5vw, 3.6rem);
line-height: 1.05;
font-weight: 700;
}
.about-lead {
color: var(--vmc-muted);
font-size: clamp(1.02rem, 1.6vw, 1.18rem);
line-height: 1.55;
margin: 0 auto;
max-width: 680px;
}
.about-hero-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
margin: 2rem auto 0;
max-width: 240px;
}
.about-hero-divider span {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, var(--vmc-gold), transparent);
}
.about-hero-divider i { color: var(--vmc-gold-deep); font-size: 1rem; }
/* ---- Stats strip ---------------------------------------------------- */
.about-stats { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.about-stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.6rem;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid var(--vmc-line);
border-radius: 16px;
padding: 1.3rem 1rem;
box-shadow: 0 10px 30px rgba(91, 18, 38, 0.08);
}
.about-stat {
text-align: center;
padding: 0.5rem 0.7rem;
border-right: 1px solid var(--vmc-line);
}
.about-stat:last-child { border-right: 0; }
.about-stat strong {
display: block;
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
color: var(--vmc-burgundy-deep);
line-height: 1.1;
letter-spacing: -0.01em;
}
.about-stat span {
display: block;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vmc-gold-deep);
margin-top: 0.35rem;
}
@media (max-width: 767.98px) {
.about-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.about-stat { border-right: 0; border-bottom: 1px dashed var(--vmc-line); padding-bottom: 0.9rem; }
.about-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
/* ---- Body story ----------------------------------------------------- */
.about-body-section { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.about-body {
max-width: 720px;
margin: 0 auto;
font-size: 1.02rem;
line-height: 1.75;
color: var(--vmc-burgundy-deep);
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(8px);
border: 1px solid var(--vmc-line);
border-radius: 16px;
padding: 2rem 2.2rem;
box-shadow: 0 8px 24px rgba(91, 18, 38, 0.06);
}
@media (max-width: 575.98px) {
.about-body { padding: 1.4rem 1.3rem; font-size: 0.96rem; }
}
/* ---- Values --------------------------------------------------------- */
.about-values-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.about-value {
--spot-x: 50%;
--spot-y: 50%;
position: relative;
background: #ffffff; /* crisp solid card surface */
border: 1px solid var(--vmc-line);
border-radius: 16px;
padding: 1.8rem 1.6rem;
text-align: center;
box-shadow: 0 1px 2px rgba(91, 18, 38, 0.04);
transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 280ms ease,
border-color 280ms ease;
}
/* Animated brand-gradient underglow — sits BEHIND the card, pushed down
so only the bottom edges peek out. Slightly narrower than the card so
the glow tapers near the corners. Inspired by the reference pattern. */
.about-value::before {
content: "";
position: absolute;
top: 18px; /* push the glow down */
left: 0;
right: 0;
height: 100%;
z-index: -1;
border-radius: inherit;
transform: scale(0.9) translateZ(0);
filter: blur(18px);
opacity: 0.78;
background: linear-gradient(
90deg,
var(--vmc-gold-soft),
var(--vmc-gold),
#d68a3a,
var(--vmc-burgundy),
var(--vmc-burgundy-deep),
var(--vmc-burgundy),
#d68a3a,
var(--vmc-gold),
var(--vmc-gold-soft)
);
background-size: 200% 200%;
background-position: 0% 50%;
animation: aboutValueGlow 5s linear infinite;
transition: opacity 320ms ease, top 320ms cubic-bezier(0.34, 1.4, 0.64, 1), filter 320ms ease;
will-change: background-position, opacity;
}
.about-value > * {
position: relative;
z-index: 1; /* keep content above the underglow */
}
@keyframes aboutValueGlow {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.about-value::before { animation: none; }
}
.about-value-icon {
display: inline-flex;
width: 56px; height: 56px;
align-items: center; justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, var(--vmc-gold-soft), var(--vmc-gold));
color: var(--vmc-burgundy-deep);
font-size: 1.4rem;
margin-bottom: 1rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 4px 12px rgba(201, 162, 74, 0.25);
}
.about-value h3 {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
color: var(--vmc-burgundy-deep);
margin: 0 0 0.5rem;
font-size: 1.18rem;
}
.about-value p {
color: var(--vmc-muted);
margin: 0;
line-height: 1.6;
font-size: 0.93rem;
}
@media (max-width: 767.98px) {
.about-values-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Premium gold button with a continuous diagonal sheen sweep ----- */
.btn-gold-shine {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(180deg, var(--c-gold-soft), var(--c-gold));
border: 1px solid #8b6320;
color: #3a1410;
font-weight: 700;
letter-spacing: 0.015em;
padding: 0.7rem 1.6rem;
border-radius: 999px;
box-shadow:
inset 0 1px 0 rgba(255, 250, 220, 0.85),
inset 0 -1px 0 rgba(120, 75, 20, 0.45),
0 6px 18px rgba(168, 118, 30, 0.35);
text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
box-shadow 220ms ease,
letter-spacing 220ms ease;
}
.btn-gold-shine > * { position: relative; z-index: 2; }
/* The sheen — a bright diagonal band that slides across the surface.
GPU-only `transform: translate3d` animation (was `background-position`
which forces paint on every frame and stutters on iOS Safari). */
.btn-gold-shine::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
z-index: 1;
background: linear-gradient(
115deg,
transparent 30%,
rgba(255, 255, 255, 0.55) 50%,
transparent 70%);
transform: translate3d(-180%, 0, 0);
-webkit-transform: translate3d(-180%, 0, 0);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
animation: goldShineSweep 3.6s ease-in-out infinite;
pointer-events: none;
}
.btn-gold-shine:hover,
.btn-gold-shine:focus-visible {
color: #3a1410;
transform: translateY(-2px);
letter-spacing: 0.03em;
box-shadow:
inset 0 1px 0 rgba(255, 250, 220, 0.95),
inset 0 -1px 0 rgba(120, 75, 20, 0.45),
0 12px 26px rgba(168, 118, 30, 0.5);
outline: none;
}
@keyframes goldShineSweep {
0% { transform: translate3d(-180%, 0, 0); }
55% { transform: translate3d( 320%, 0, 0); }
100% { transform: translate3d( 320%, 0, 0); } /* dwell before next sweep */
}
@media (prefers-reduced-motion: reduce) {
.btn-gold-shine::before { animation: none; }
}
/* ---- Closing CTA ---------------------------------------------------- */
.about-cta-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, var(--vmc-burgundy-deep) 0%, #1f0712 100%);
color: #f6e8c8;
border-radius: 20px;
padding: 2.6rem 2.4rem;
box-shadow: 0 16px 38px rgba(38, 12, 22, 0.35);
position: relative;
overflow: hidden;
}
.about-cta-inner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 100% 0%, rgba(201, 162, 74, 0.22), transparent 60%),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(201, 162, 74, 0.08), transparent 60%);
pointer-events: none;
}
.about-cta-inner > * { position: relative; }
.about-cta-inner h2 {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
color: #ffe9a8;
margin: 0 0 0.7rem;
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.about-cta-inner p {
color: rgba(246, 232, 200, 0.82);
line-height: 1.6;
margin: 0 0 1.4rem;
}
.about-cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7rem;
}
.about-cta-actions .btn-outline-vmc {
color: #ffe9a8;
border-color: rgba(201, 162, 74, 0.6);
}
.about-cta-actions .btn-outline-vmc:hover {
background: rgba(201, 162, 74, 0.16);
border-color: var(--vmc-gold);
color: #fff;
}
@media (max-width: 575.98px) {
.about-cta-inner { padding: 1.9rem 1.4rem; border-radius: 16px; }
.about-cta-actions .btn { width: 100%; }
}
/* ---- About page typography — Playfair Display override -------------- */
/* One consolidated rule so every heading on /about.php uses the same
Playfair Display treatment as .detail-title, .spec-card-title, and the
"Two specialities" section heading. Placed at the END of the about-page
CSS section so it wins the cascade over the per-element font-family
declarations above without needing !important. */
.about-title,
.about-title-name,
.about-title-pre,
.about-section-head h2,
.about-stat strong,
.about-value h3,
.about-cta-inner h2 {
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
}
/* Tune weight + tracking per element since Playfair Display sits
differently at each size. */
.about-title-name,
.about-section-head h2,
.about-cta-inner h2 {
font-weight: 800;
letter-spacing: -0.012em;
line-height: 1.08;
}
.about-stat strong {
font-weight: 800;
letter-spacing: -0.015em; /* numerals look tighter naturally */
font-feature-settings: "tnum" 1, "lnum" 1;
}
.about-value h3 {
font-weight: 700; /* card sub-headings stay one step lighter */
letter-spacing: -0.005em;
}
/* The italic "About" preamble keeps its italic — Playfair Display ships
500 italic in the loaded set. */
.about-title-pre {
font-style: italic;
font-weight: 500;
}
/* ===== Contact page ================================================= */
.contact-section {
/* the body's atmospheric backdrop already gives the room — no extra bg */
}
/* Header */
.contact-head {
text-align: center;
max-width: 720px;
margin: 0 auto 2.4rem;
}
.contact-head .eyebrow {
display: inline-block;
color: var(--vmc-gold-deep);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 0.6rem;
}
.contact-head h1 {
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-weight: 800;
letter-spacing: 0;
margin: 0 0 0.7rem;
line-height: 1.12;
}
.contact-title-brand {
position: relative;
display: inline-block;
padding: 0 0.08em;
font-style: normal;
color: #2a0a12;
white-space: nowrap;
}
.contact-title-brand::after {
content: "";
position: absolute;
left: 0.02em;
right: 0.02em;
bottom: 0.05em;
height: 0.22em;
border-radius: 999px;
background: linear-gradient(90deg, rgba(201, 162, 74, 0.12), rgba(201, 162, 74, 0.32), rgba(201, 162, 74, 0.12));
z-index: -1;
}
.contact-head .lead {
color: var(--vmc-muted);
font-size: 1.02rem;
margin: 0;
}
/* Three-card row: address / phone / email */
.contact-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.6rem;
}
.contact-card {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.25rem 1.2rem 1rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border: 1px solid var(--vmc-line);
border-radius: 14px;
color: var(--vmc-burgundy-deep);
text-decoration: none;
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.contact-card:hover {
transform: translateY(-2px);
border-color: var(--vmc-gold);
background: #fff;
box-shadow: 0 14px 30px rgba(91, 18, 38, 0.10);
color: var(--vmc-burgundy-deep);
}
.contact-card-icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, var(--vmc-gold-soft), var(--vmc-gold));
color: var(--vmc-burgundy-deep);
font-size: 1.1rem;
margin-bottom: 0.35rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.contact-card-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vmc-gold-deep);
}
.contact-card-value {
font-size: 1.02rem;
font-weight: 600;
line-height: 1.4;
color: var(--vmc-burgundy-deep);
word-break: break-word;
}
.contact-card-cta {
margin-top: auto;
padding-top: 0.5rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--vmc-muted);
display: inline-flex;
align-items: center;
gap: 0.3rem;
transition: color 200ms ease;
}
.contact-card-cta i {
font-size: 0.78rem;
transition: transform 220ms ease;
}
.contact-card:hover .contact-card-cta {
color: var(--vmc-gold-deep);
}
.contact-card:hover .contact-card-cta i {
transform: translate(2px, -2px);
}
/* Map (7) + aside (5) */
.contact-main {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 1rem;
align-items: stretch;
}
/* Map frame — clean rounded panel */
.contact-map {
position: relative;
overflow: hidden;
border-radius: 16px;
border: 1px solid var(--vmc-line);
background: #fff;
box-shadow: 0 8px 24px rgba(91, 18, 38, 0.08);
min-height: 420px;
}
.contact-map iframe {
width: 100%;
height: 100%;
min-height: 420px;
border: 0;
display: block;
filter: saturate(0.92); /* tone Google's flat colors a touch */
}
.contact-map-overlay {
position: absolute;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--vmc-burgundy-deep);
border: 1px solid var(--vmc-line);
border-radius: 999px;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transition: background 180ms ease, color 180ms ease;
}
.contact-map-overlay:hover {
background: var(--vmc-burgundy);
color: #fff;
border-color: var(--vmc-burgundy);
}
/* Sidebar */
.contact-aside {
padding: 1.5rem 1.4rem 1.6rem;
background: linear-gradient(180deg, #fff 0%, var(--vmc-soft) 100%);
border: 1px solid var(--vmc-line);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(91, 18, 38, 0.08);
display: flex;
flex-direction: column;
}
.contact-aside-title {
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
font-size: 1.25rem;
color: var(--vmc-burgundy-deep);
margin: 0 0 0.55rem;
line-height: 1.25;
}
.contact-aside-text {
color: var(--vmc-muted);
font-size: 0.92rem;
line-height: 1.55;
margin: 0 0 1rem;
}
.contact-aside-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.contact-aside-actions .btn {
flex: 1 1 140px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.contact-aside-meta {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px dashed var(--vmc-line);
padding-top: 0.95rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.contact-aside-meta li {
display: flex;
align-items: flex-start;
gap: 0.7rem;
color: var(--vmc-burgundy-deep);
font-size: 0.86rem;
line-height: 1.4;
}
.contact-aside-meta li i {
color: var(--vmc-gold-deep);
font-size: 1rem;
flex: 0 0 auto;
margin-top: 2px;
}
.contact-aside-meta li strong { color: var(--vmc-burgundy-deep); }
/* Responsive */
@media (max-width: 991.98px) {
.contact-main {
grid-template-columns: minmax(0, 1fr);
}
.contact-map { min-height: 340px; }
.contact-map iframe { min-height: 340px; }
}
@media (max-width: 767.98px) {
.contact-grid {
grid-template-columns: minmax(0, 1fr);
}
.contact-head { margin-bottom: 1.8rem; }
}
/* =====================================================================
ADMIN — Admins page (admin/admins.php)
Cleaner two-column layout: form on the left, list of admins on the right.
Card row pattern mirrors enquiry detail / cart row vocabulary.
===================================================================== */
.admins-layout .settings-card {
padding: 1.2rem 1.3rem 1.3rem;
}
/* Toggle "Receives enquiry emails" inside the form */
.admin-receives-toggle {
padding: 0.85rem 0.95rem;
background: var(--vmc-soft);
border: 1px solid var(--vmc-line);
border-radius: 10px;
}
.admin-receives-toggle .form-check-input {
width: 2.4em;
height: 1.3em;
margin-top: 0.15rem;
cursor: pointer;
}
.admin-receives-toggle .form-check-input:checked {
background-color: var(--vmc-gold-deep);
border-color: var(--vmc-gold-deep);
}
.admin-receives-toggle .form-check-label {
cursor: pointer;
padding-left: 0.25rem;
}
.admin-receives-toggle .form-check-label small { font-size: 0.78rem; line-height: 1.4; }
/* ---- The list of admins ------------------------------------------- */
.admins-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.admin-row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 1.05rem;
align-items: center;
padding: 1rem 1.15rem;
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 8px 22px -14px rgba(58, 13, 24, 0.18),
0 2px 6px -3px rgba(58, 13, 24, 0.08);
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.admin-row:hover {
border-color: var(--vmc-gold);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 14px 28px -16px rgba(58, 13, 24, 0.28),
0 4px 10px -4px rgba(58, 13, 24, 0.12);
transform: translateY(-1px);
}
.admin-row.is-editing {
border-color: var(--vmc-gold);
box-shadow:
0 0 0 3px rgba(201, 162, 74, 0.22),
0 14px 28px -16px rgba(58, 13, 24, 0.28);
background: linear-gradient(135deg, #fff 75%, var(--vmc-warm) 100%);
}
.admin-row.is-self {
background: linear-gradient(135deg, #fff 82%, var(--vmc-soft) 100%);
}
/* Compact avatar disc for the customer list table — same brand language
as .admin-row-avatar but sized for an inline table cell. */
.user-avatar {
width: 36px;
height: 36px;
border-radius: 999px;
display: grid;
place-items: center;
background: radial-gradient(circle at 30% 30%, #6b1830 0%, var(--vmc-burgundy-deep) 70%);
color: var(--vmc-gold-soft);
font-family: var(--vmc-font-sans);
font-size: 0.95rem;
font-weight: 700;
box-shadow:
0 0 0 1px var(--vmc-gold) inset,
0 0 0 2px rgba(201, 162, 74, 0.18);
flex: 0 0 auto;
}
/* Avatar disc — gold-ringed burgundy circle with initial */
.admin-row-avatar {
width: 64px;
height: 64px;
border-radius: 999px;
display: grid;
place-items: center;
background: radial-gradient(circle at 30% 30%, #6b1830 0%, var(--vmc-burgundy-deep) 70%);
color: var(--vmc-gold-soft);
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-size: 1.75rem;
font-weight: 600;
/* Double ring — thin gold rim against a paler outer ring for the
"framed coin" look in the reference. */
box-shadow:
0 0 0 2px var(--vmc-gold) inset,
0 0 0 2px rgba(201, 162, 74, 0.55),
0 0 0 5px rgba(201, 162, 74, 0.18),
0 6px 14px -6px rgba(58, 13, 24, 0.45);
flex: 0 0 auto;
}
.admin-row-body { min-width: 0; }
.admin-row-name-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.45rem;
margin-bottom: 0.25rem;
}
.admin-row-name {
color: var(--vmc-burgundy-deep);
font-size: 1rem;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
}
/* Role pill */
.admin-role-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.18rem 0.55rem;
border-radius: 999px;
line-height: 1;
}
.admin-role-pill--super {
background: #f7e7bf; /* flat soft gold, no gradient */
color: var(--vmc-gold-deep, #8b6a1f);
border: 0;
box-shadow: none;
}
.admin-role-pill--admin {
background: rgba(91, 18, 38, 0.08);
color: var(--vmc-burgundy);
border: 1px solid var(--vmc-line);
}
.admin-self-tag {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vmc-gold-deep);
padding: 0.16rem 0.5rem;
border: 1px dashed var(--vmc-gold);
border-radius: 999px;
line-height: 1;
}
/* Contact line — email + mobile with icons and a subtle vertical
divider between them, matching the reference design. */
.admin-row-contact {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.85rem;
font-size: 0.88rem;
color: var(--vmc-muted);
}
.admin-row-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--vmc-muted);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
position: relative;
}
.admin-row-link:hover { color: var(--vmc-burgundy); }
.admin-row-link i {
color: var(--vmc-gold-deep);
font-size: 0.95rem;
flex: 0 0 auto;
}
/* Hairline gold divider between email + phone */
.admin-row-link + .admin-row-link::before {
content: "";
width: 1px;
height: 14px;
background: var(--vmc-line);
margin-right: 0.6rem;
flex: 0 0 auto;
}
/* Right-hand cluster: ON/OFF switch · vertical divider · Edit / Delete */
.admin-row-actions {
display: flex;
align-items: stretch;
gap: 0.6rem;
flex: 0 0 auto;
}
/* Vertical hairline between the switch and the action buttons. */
.admin-row-actions::before {
content: "";
align-self: stretch;
width: 1px;
background: linear-gradient(180deg, transparent 0%, var(--vmc-line) 20%, var(--vmc-line) 80%, transparent 100%);
margin: 0 0.15rem;
order: 1;
}
.admin-row-actions .admin-rcv-form { order: 0; display: flex; align-items: center; }
.admin-row-actions .admin-row-btn,
.admin-row-actions form:not(.admin-rcv-form) { order: 2; }
.admin-rcv-form { margin: 0; }
/* Enquiry-email toggle — same card shape as the row action buttons, but a
clear two-state control. OFF = muted with a slashed envelope; ON = gold
with a filled envelope. State is signalled by BOTH icon and colour (not
colour alone) so it reads at a glance and stays accessible. No JS — it's a
server-side submit button like the others. */
.admin-row-btn--mail { /* OFF (default) */
background: linear-gradient(180deg, #fff 0%, #f1ece0 100%);
border-color: var(--vmc-line-strong);
color: var(--vmc-muted);
}
.admin-row-btn--mail i { color: var(--vmc-muted); }
.admin-row-btn--mail:hover {
border-color: var(--vmc-gold);
color: var(--vmc-coffee-deep, #3a221a);
box-shadow: 0 4px 10px -4px rgba(140, 112, 38, 0.28);
}
.admin-row-btn--mail.is-on {
background: linear-gradient(180deg, #fffaf0 0%, #f6e3b8 100%);
border-color: var(--vmc-gold-deep);
color: var(--vmc-burgundy-deep);
box-shadow: 0 3px 8px -4px rgba(140, 112, 38, 0.45);
}
.admin-row-btn--mail.is-on i { color: var(--vmc-gold-deep, #8b6a1f); }
.admin-row-btn--mail:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.22);
}
/* Action buttons — vertical layout: icon on top, label below, square-ish
card. Matches the reference: Edit (cream), Delete (rose), You (grey). */
.admin-row-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.18rem;
min-width: 56px;
padding: 0.45rem 0.55rem;
border-radius: 12px;
border: 1px solid var(--vmc-line-strong);
background: linear-gradient(180deg, #fff 0%, #fbf3df 100%);
color: var(--vmc-coffee-deep, #3a221a);
font-size: 0.72rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
cursor: pointer;
text-decoration: none;
transition: background 160ms ease, color 160ms ease,
border-color 160ms ease, transform 160ms ease,
box-shadow 160ms ease;
}
.admin-row-btn i {
font-size: 1.1rem;
line-height: 1;
color: var(--vmc-gold-deep, #8b6a1f);
}
.admin-row-btn span { display: inline !important; }
.admin-row-btn:hover {
border-color: var(--vmc-gold);
box-shadow: 0 4px 10px -4px rgba(140, 112, 38, 0.35);
transform: translateY(-1px);
}
.admin-row-btn--edit { /* default cream is already correct */ }
.admin-row-btn--delete {
background: linear-gradient(180deg, #fff5f5 0%, #fde2e0 100%);
border-color: #f1c2bd;
color: #b3331f;
}
.admin-row-btn--delete i { color: #c0392b; }
.admin-row-btn--delete:hover {
background: linear-gradient(180deg, #ffe9e6 0%, #f8c8c1 100%);
border-color: #e88a85;
color: #9a2a18;
box-shadow: 0 4px 10px -4px rgba(192, 57, 43, 0.35);
}
.admin-row-btn--locked {
background: linear-gradient(180deg, #f3eee2 0%, #e8e0cc 100%);
color: var(--vmc-muted);
border-color: var(--vmc-line-strong);
border-style: dashed;
cursor: not-allowed;
box-shadow: none;
}
.admin-row-btn--locked i { color: var(--vmc-muted); }
.admin-row-btn--locked:hover { transform: none; box-shadow: none; }
/* ---- Mobile layout (≤767.98px) — reflow grid -------------------- */
@media (max-width: 767.98px) {
.admins-layout .settings-card { padding: 1rem 1rem 1.1rem; }
.admin-row {
grid-template-columns: 52px minmax(0, 1fr);
grid-template-areas:
"avatar body"
"actions actions";
padding: 0.85rem 0.9rem;
gap: 0.7rem 0.85rem;
border-radius: 16px;
}
.admin-row-avatar { grid-area: avatar; width: 52px; height: 52px; font-size: 1.35rem; }
.admin-row-body { grid-area: body; }
.admin-row-actions {
grid-area: actions;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.5rem;
border-top: 1px dashed var(--vmc-line);
padding-top: 0.65rem;
margin-top: 0.15rem;
}
/* On mobile, drop the vertical divider — the dashed top-border is the
separator instead. */
.admin-row-actions::before { display: none; }
.admin-row-name { font-size: 0.98rem; }
.admin-row-btn { min-width: 52px; padding: 0.4rem 0.5rem; }
.admin-row-btn i { font-size: 1rem; }
}
/* === Admin enquiry — back link to "All enquiries" =================== */
.enq-back-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.95rem;
border-radius: 10px;
border: 1.5px solid rgba(201, 162, 74, 0.5);
background: transparent;
color: var(--vmc-burgundy);
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
letter-spacing: 0.02em;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.enq-back-link i {
color: var(--vmc-gold-deep);
font-size: 0.95rem;
transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), color 180ms ease;
}
.enq-back-link:hover,
.enq-back-link:focus-visible {
background: rgba(201, 162, 74, 0.12);
border-color: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
outline: none;
}
.enq-back-link:hover i,
.enq-back-link:focus-visible i {
color: var(--vmc-gold-deep);
transform: translateX(-3px); /* arrow nudges the way it points */
}
/* === Admin enquiries — items table (column-per-spec layout) =========== */
.enquiry-items-table thead th {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vmc-muted);
white-space: nowrap;
}
.enquiry-items-table tbody td {
vertical-align: middle;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
/* SKU stays on one line — without this, browsers break at every hyphen. */
.enquiry-items-table td:first-child code {
white-space: nowrap;
}
/* Quantity cell — keep the number + unit together, with "approx." below. */
.enquiry-items-table td:last-child {
white-space: nowrap;
}
/* Numeric spec cells — tabular figures so digits line up across rows. */
.enquiry-num {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--vmc-burgundy-deep);
white-space: nowrap;
}
/* Inline purity tag — flat text, just colour-coded by metal so the
admin can scan gold vs silver at a glance without any chrome. */
.enquiry-purity {
display: inline-block;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.enquiry-purity.is-gold { color: var(--vmc-gold-deep, #8b6a1f); }
.enquiry-purity.is-silver { color: #4f5663; }
/* === Status quick-transition card ==================================== */
.enquiry-status-card {
display: flex;
flex-direction: column;
}
/* "Current state" strip — sits between the section title and the chips.
Big badge on the right, label + submitted date on the left, hairline
gold separator below to mark the boundary from the chip area. */
.enquiry-status-now {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 0;
margin-bottom: 0.9rem;
border-bottom: 1px dashed rgba(201, 162, 74, 0.35);
}
.enquiry-status-now-meta {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.enquiry-status-now-label {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--vmc-muted);
}
.enquiry-status-now-since {
font-size: 0.82rem;
color: var(--vmc-burgundy-deep);
font-weight: 600;
}
.enquiry-status-now-badge {
font-size: 0.78rem !important;
padding: 0.4rem 0.85rem !important;
letter-spacing: 0.1em;
flex: 0 0 auto;
}
/* Helper line above the chips */
.enquiry-status-helper {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.55rem;
font-size: 0.75rem;
color: var(--vmc-muted);
font-style: italic;
}
.enquiry-status-helper i { color: var(--vmc-gold-deep); font-style: normal; }
.enquiry-status-form { margin: 0; }
.enquiry-status-chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0;
}
.enquiry-status-chip {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
flex: 1 1 0;
min-width: 90px;
padding: 0.6rem 0.7rem;
border-radius: 10px;
border: 1.5px solid var(--vmc-line-strong);
background: #fff;
color: var(--vmc-burgundy-deep);
font-size: 0.85rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 180ms ease,
color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
/* Status-coloured dot mirrors the active fill colour. */
.enquiry-status-chip-dot {
width: 8px;
height: 8px;
border-radius: 999px;
flex: 0 0 8px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
transition: background 180ms ease, box-shadow 180ms ease;
}
.enquiry-status-chip[data-status="new"] .enquiry-status-chip-dot { background: #5b1226; }
.enquiry-status-chip[data-status="reviewing"] .enquiry-status-chip-dot { background: #b07a1d; }
.enquiry-status-chip[data-status="quoted"] .enquiry-status-chip-dot { background: #2f7d4f; }
.enquiry-status-chip[data-status="closed"] .enquiry-status-chip-dot { background: #5a6270; }
/* Active dot — inverted ring so it reads against the filled background. */
.enquiry-status-chip.is-active .enquiry-status-chip-dot {
background: #fff;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.enquiry-status-chip:hover:not(.is-active):not(:disabled) {
background: var(--vmc-soft);
border-color: var(--vmc-gold);
box-shadow: 0 4px 10px -4px rgba(140, 112, 38, 0.25);
}
.enquiry-status-chip:focus-visible {
outline: 2px solid rgba(201, 162, 74, 0.5);
outline-offset: 2px;
}
/* Active state — the current status. Looks "pressed in" and isn't
clickable (the button is `disabled` server-side too). Each status
gets its own colour so the row mirrors the .badge-status legend. */
.enquiry-status-chip.is-active,
.enquiry-status-chip:disabled {
cursor: not-allowed;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
opacity: 1;
}
.enquiry-status-chip.is-active[data-status="new"] { background: #5b1226; border-color: #4a0e1f; }
.enquiry-status-chip.is-active[data-status="reviewing"] { background: #b07a1d; border-color: #8b6017; color: #fff; }
.enquiry-status-chip.is-active[data-status="quoted"] { background: #2f7d4f; border-color: #245f3c; }
.enquiry-status-chip.is-active[data-status="closed"] { background: #5a6270; border-color: #3f444e; }
/* Inactive chips get a subtle hint of their target colour on hover so the
admin can preview what they're about to set. */
.enquiry-status-chip[data-status="new"]:hover:not(.is-active) { color: #5b1226; }
.enquiry-status-chip[data-status="reviewing"]:hover:not(.is-active) { color: #8b6017; }
.enquiry-status-chip[data-status="quoted"]:hover:not(.is-active) { color: #245f3c; }
.enquiry-status-chip[data-status="closed"]:hover:not(.is-active) { color: #3f444e; }
@media (max-width: 575.98px) {
.enquiry-status-chip { flex-basis: calc(50% - 0.45rem); }
}
/* === Status audit-log timeline ======================================
Collapsed by default via ; the shows the latest
transition + a count badge. Expanded list is scroll-clipped so the
card height stays bounded regardless of how many entries exist. */
.enquiry-status-log {
margin-top: 1rem;
padding-top: 0.85rem;
border-top: 1px dashed rgba(201, 162, 74, 0.35);
}
/* The summary row — compact one-liner */
.enquiry-status-log-summary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
background: var(--vmc-soft);
border: 1px solid var(--vmc-line);
border-radius: 8px;
cursor: pointer;
list-style: none; /* kill the disclosure triangle */
transition: background 160ms ease, border-color 160ms ease;
}
.enquiry-status-log-summary::-webkit-details-marker { display: none; }
.enquiry-status-log-summary:hover {
background: #fff;
border-color: var(--vmc-gold);
}
.enquiry-status-log-summary-icon {
color: var(--vmc-gold-deep);
font-size: 0.95rem;
flex: 0 0 auto;
}
.enquiry-status-log-summary-title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vmc-burgundy-deep);
flex: 0 0 auto;
}
.enquiry-status-log-summary-meta {
font-size: 0.74rem;
color: var(--vmc-muted);
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tiny inline coloured token used in the summary "Last: " line. */
.enquiry-status-log-mini {
display: inline-block;
padding: 0.05rem 0.4rem;
margin: 0 0.1rem;
border-radius: 999px;
background: #fff;
border: 1px solid var(--vmc-line-strong);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--vmc-burgundy-deep);
line-height: 1.3;
vertical-align: 1px;
}
.enquiry-status-log-mini[data-status="new"] { color: #5b1226; border-color: #5b1226; }
.enquiry-status-log-mini[data-status="reviewing"] { color: #8b6017; border-color: #b07a1d; }
.enquiry-status-log-mini[data-status="quoted"] { color: #245f3c; border-color: #2f7d4f; }
.enquiry-status-log-mini[data-status="closed"] { color: #3f444e; border-color: #5a6270; }
/* Count badge on the right of the summary. */
.enquiry-status-log-summary-count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
font-size: 0.7rem;
font-weight: 800;
line-height: 1;
flex: 0 0 auto;
}
.enquiry-status-log-summary-chev {
color: var(--vmc-muted);
font-size: 0.85rem;
transition: transform 200ms ease;
flex: 0 0 auto;
}
.enquiry-status-log[open] .enquiry-status-log-summary-chev {
transform: rotate(180deg);
}
/* Expanded list — scroll-clipped so the card can never grow beyond ~14rem
of history, no matter how many transitions an enquiry has accumulated. */
.enquiry-status-log-list {
list-style: none;
padding: 0;
margin: 0.6rem 0 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
max-height: 14rem;
overflow-y: auto;
/* Pull-in a subtle scroll-shadow when content overflows. */
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 12px), transparent);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 12px), transparent);
}
.enquiry-status-log-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.6rem;
background: var(--vmc-soft);
border: 1px solid var(--vmc-line);
border-radius: 8px;
font-size: 0.78rem;
color: var(--vmc-burgundy-deep);
}
/* Tiny status-coloured tags used for from/to labels in each row. */
.enquiry-status-log-from,
.enquiry-status-log-to {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
background: #fff;
border: 1px solid var(--vmc-line-strong);
color: var(--vmc-burgundy-deep);
}
.enquiry-status-log-from { opacity: 0.7; } /* "from" reads slightly muted */
.enquiry-status-log-from[data-status="new"],
.enquiry-status-log-to[data-status="new"] { border-color: #5b1226; color: #5b1226; }
.enquiry-status-log-from[data-status="reviewing"],
.enquiry-status-log-to[data-status="reviewing"] { border-color: #b07a1d; color: #8b6017; }
.enquiry-status-log-from[data-status="quoted"],
.enquiry-status-log-to[data-status="quoted"] { border-color: #2f7d4f; color: #245f3c; }
.enquiry-status-log-from[data-status="closed"],
.enquiry-status-log-to[data-status="closed"] { border-color: #5a6270; color: #3f444e; }
.enquiry-status-log-arrow {
color: var(--vmc-gold-deep);
font-size: 0.85rem;
}
.enquiry-status-log-meta {
font-size: 0.72rem;
color: var(--vmc-muted);
margin-left: auto;
text-align: right;
font-variant-numeric: tabular-nums;
}
.enquiry-status-log-meta strong { color: var(--vmc-burgundy-deep); }
@media (max-width: 575.98px) {
.enquiry-status-log-meta {
margin-left: 0;
flex-basis: 100%;
text-align: left;
}
}
.enquiry-spec-cell .purity-pill {
margin-bottom: 0.4rem;
/* Slightly more compact than the cart's pill since this is a denser table */
padding: 0.32rem 0.85rem;
font-size: 0.8rem;
/* Flat, non-interactive — no hover lift, no help cursor, no tooltip. */
cursor: default !important;
transition: none !important;
transform: none !important;
}
.enquiry-spec-cell .purity-pill:hover {
/* Keep every visual property identical to the rest state so hovering
does nothing (matches the chip behaviour in the same cell). */
transform: none !important;
box-shadow:
0 6px 16px rgba(140, 112, 38, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.enquiry-spec-cell .purity-pill--gold:hover {
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold)) !important;
color: var(--vmc-burgundy-deep) !important;
}
.enquiry-spec-cell .purity-pill--silver:hover {
background:
linear-gradient(135deg,
#fdfdfd 0%,
#e7eaef 25%,
#c5cbd4 55%,
#9aa1ad 85%,
#757b87 100%) !important;
color: #1d2230 !important;
}
.enquiry-spec-cell .purity-pill .purity-pill-value {
font-size: 0.82rem;
}
.enquiry-spec-cell .cart-spec-chips {
margin: 0;
gap: 0.3rem;
}
.enquiry-spec-cell .cart-spec-chip {
padding: 0.22rem 0.55rem 0.22rem 0.5rem;
font-size: 0.72rem;
/* Flat, non-interactive — no gradient/shadow/help-cursor. */
background: var(--vmc-soft) !important;
border: 1px solid var(--vmc-line) !important;
box-shadow: none !important;
cursor: default !important;
transition: none !important;
transform: none !important;
}
.enquiry-spec-cell .cart-spec-chip:hover {
background: var(--vmc-soft) !important;
border-color: var(--vmc-line) !important;
box-shadow: none !important;
transform: none !important;
}
.enquiry-spec-cell .cart-spec-chip-label {
font-size: 0.6rem;
}
.enquiry-spec-cell .cart-spec-chip i {
font-size: 0.78rem;
}
/* ===== Products admin — filter bar ================================== */
.product-filter-bar {
background: linear-gradient(135deg, #fff 0%, var(--vmc-soft) 100%);
border: 1px solid var(--vmc-line);
border-radius: 14px;
padding: 0.85rem 1rem;
box-shadow: var(--vmc-shadow-sm);
margin-bottom: 1rem;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.product-filter-bar.has-filters {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.12), var(--vmc-shadow-sm);
}
.product-filter-row {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
/* Search input with leading icon + inline clear */
.product-filter-search {
position: relative;
flex: 1 1 280px;
min-width: 200px;
}
.product-filter-search > i {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: var(--vmc-muted);
font-size: 1rem;
pointer-events: none;
}
.product-filter-search .form-control {
padding-left: 2.4rem;
padding-right: 2.4rem;
height: 42px;
border-radius: 10px;
border-color: var(--vmc-line-strong);
background: #fff;
font-size: 0.92rem;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.product-filter-search .form-control:focus {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
outline: none;
}
.product-filter-search-clear {
position: absolute;
right: 0.45rem;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: var(--vmc-line);
color: var(--vmc-burgundy);
font-size: 0.95rem;
cursor: pointer;
transition: background 140ms ease;
}
.product-filter-search-clear:hover {
background: var(--vmc-burgundy);
color: #fff;
}
/* Compound category select with header pill */
.product-filter-select {
position: relative;
flex: 1 1 200px;
min-width: 180px;
margin: 0;
}
.product-filter-select-label {
position: absolute;
top: -0.55rem;
left: 0.7rem;
background: #fff;
padding: 0 0.4rem;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vmc-burgundy);
border-radius: 4px;
pointer-events: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
z-index: 1;
}
.product-filter-select-label i {
color: var(--vmc-gold-deep);
font-size: 0.8rem;
}
.product-filter-select .form-select {
height: 42px;
border-radius: 10px;
border-color: var(--vmc-line-strong);
background-color: #fff;
font-size: 0.92rem;
padding-top: 0.45rem;
}
.product-filter-select .form-select:focus {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}
/* Segmented status buttons — a sliding gold pill ("thumb") glides under
the active segment for a smooth, springy transition instead of each
button getting its own background. */
.product-filter-segmented {
position: relative; /* anchor for .product-filter-segmented-thumb */
display: inline-flex;
background: #fff;
border: 1px solid var(--vmc-line-strong);
border-radius: 10px;
padding: 3px;
gap: 2px;
height: 42px;
flex: 0 0 auto;
isolation: isolate; /* keep the thumb behind buttons via z-index */
}
.product-filter-segmented-thumb {
/* IMPORTANT: left:0 (not 3px). The button's offsetLeft already
includes the container's 3px left padding, so the JS translateX
lands the thumb in the right place. Using left:3px would double
the padding and make the rightmost active state overflow. */
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 0;
border-radius: 7px;
background: linear-gradient(180deg, var(--vmc-burgundy) 0%, var(--vmc-burgundy-deep) 100%);
box-shadow: 0 4px 10px -4px rgba(91, 18, 38, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transform: translateX(0);
opacity: 0;
transition: transform 320ms cubic-bezier(0.34, 1.36, 0.64, 1),
width 320ms cubic-bezier(0.34, 1.36, 0.64, 1),
opacity 200ms ease;
z-index: 0;
pointer-events: none;
}
.product-filter-segmented button {
appearance: none;
border: 0;
background: transparent;
color: var(--vmc-burgundy);
font-size: 0.83rem;
font-weight: 600;
padding: 0 1.1rem;
border-radius: 7px;
cursor: pointer;
display: inline-flex;
align-items: center; /* vertical center icon + text */
justify-content: center; /* horizontal center within the button */
gap: 0.4rem;
line-height: 1; /* kill any baseline drift between dot and text */
min-width: 5.5rem; /* equalize the 3 buttons so they look balanced */
transition: color 200ms ease;
white-space: nowrap;
position: relative;
z-index: 1; /* sit above the sliding thumb */
}
.product-filter-segmented button > i,
.product-filter-segmented button > .dot {
flex: 0 0 auto;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.product-filter-segmented button > i { font-size: 0.85rem; }
.product-filter-segmented button > span { line-height: 1; }
.product-filter-segmented button:hover:not(.active) {
color: var(--vmc-burgundy-deep);
}
.product-filter-segmented button.active {
color: #fff;
}
.product-filter-segmented button:focus-visible {
outline: 2px solid rgba(201, 162, 74, 0.55);
outline-offset: 2px;
}
.product-filter-segmented .dot {
width: 8px;
height: 8px;
border-radius: 999px;
display: inline-block;
box-shadow: 0 0 0 0 currentColor;
transition: box-shadow 240ms ease, transform 240ms ease;
}
.product-filter-segmented .dot-on { background: #22c55e; }
.product-filter-segmented .dot-off { background: #94a3b8; }
.product-filter-segmented button.active .dot-on,
.product-filter-segmented button.active .dot-off {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
transform: scale(1.1);
}
/* Reset button — always rendered at the same dimensions. Only the
colour / border / cursor change between disabled and enabled state;
no growing rings, no transforms, so the bar layout doesn't shift. */
.product-filter-reset {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
height: 42px;
padding: 0 1.1rem;
border-radius: 10px;
border: 1px solid var(--vmc-line-strong);
color: var(--vmc-burgundy);
font-size: 0.83rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
background: #fff;
cursor: pointer;
transition: background 180ms ease,
color 180ms ease,
border-color 180ms ease,
opacity 180ms ease;
}
.product-filter-reset > i { font-size: 0.95rem; line-height: 1; }
.product-filter-reset:not(.is-disabled) {
border-color: var(--vmc-gold);
background: linear-gradient(180deg, #fffaf0 0%, #fdecc7 100%);
color: var(--vmc-burgundy-deep);
}
.product-filter-reset:not(.is-disabled):hover {
background: var(--vmc-burgundy);
color: #fff;
border-color: var(--vmc-burgundy-deep);
}
.product-filter-reset.is-disabled {
color: var(--vmc-muted);
background: #fff;
border-color: var(--vmc-line);
cursor: not-allowed;
opacity: 0.65;
}
.product-filter-reset.is-disabled > i { color: var(--vmc-muted); }
@media (prefers-reduced-motion: reduce) {
.product-filter-segmented-thumb { transition: opacity 120ms ease; }
}
/* Live-hide rows with a quick fade — no layout reflow lag */
.product-table tbody tr {
transition: opacity 140ms ease, background 140ms ease;
}
.product-table tbody tr.is-hidden {
display: none;
}
.product-table tbody tr:hover {
background: var(--vmc-soft);
}
/* Inline empty state inside the list panel */
.product-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--vmc-muted);
}
.product-empty i {
font-size: 2.6rem;
color: var(--vmc-gold-deep);
display: block;
margin-bottom: 0.4rem;
}
.product-empty h3 {
font-size: 1.02rem;
font-weight: 700;
color: var(--vmc-burgundy);
margin-bottom: 0.25rem;
}
/* Products page header — the unified .admin-page-head rule above handles
the framed card + icon tile + spacing. We only need to override the
inner alignment so the title + count badge stay LEFT-aligned (not
centred, which is what the parent's flex-direction: column would do
if the inner div had align-items: center). */
.products-head-title {
align-items: flex-start; /* keep title text + count badge on the left */
}
.products-head-title h1 {
display: inline-flex; /* keep "Products" + count badge inline */
align-items: center;
gap: 0.55rem;
}
.products-head-cta {
flex: 0 0 auto;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.products-head {
gap: 0.85rem;
}
.products-head-cta {
width: 100%; /* full-width tappable button on phones */
justify-content: center;
}
}
/* Count badge — small pill that sits inline next to "Products" */
.products-count-badge {
display: inline-flex;
align-items: baseline;
gap: 0.15rem;
padding: 0.18rem 0.6rem;
background: linear-gradient(135deg, var(--vmc-warm) 0%, var(--vmc-soft) 100%);
border: 1px solid var(--vmc-line);
border-radius: 999px;
font-family: var(--vmc-font-sans);
font-size: 0.78rem;
font-weight: 700;
color: var(--vmc-burgundy);
line-height: 1.4;
letter-spacing: 0.01em;
cursor: default;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.products-count-badge [data-shown-count] {
color: var(--vmc-burgundy-deep);
min-width: 1ch;
text-align: right;
font-variant-numeric: tabular-nums;
}
.products-count-badge .products-count-sep {
color: var(--vmc-gold-deep);
opacity: 0.7;
margin: 0 0.05rem;
font-weight: 600;
}
.products-count-badge .products-count-total {
color: var(--vmc-muted);
font-variant-numeric: tabular-nums;
}
/* When the visible count differs from total → badge takes on the gold "active filter" look */
.product-filter-bar.has-filters ~ .admin-panel, /* (no-op safety) */
.products-count-badge.is-filtered {
/* placeholder for cascade */
}
.products-count-badge.is-filtered {
background: linear-gradient(135deg, var(--vmc-gold-soft) 0%, var(--vmc-warm) 100%);
border-color: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
}
.products-count-badge.is-filtered [data-shown-count] {
color: var(--vmc-burgundy-deep);
}
/* "Filtered" chip — only shown when filters are active */
.filter-state-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vmc-burgundy-deep);
background: var(--vmc-warm);
border: 1px solid var(--vmc-gold);
padding: 0.18rem 0.55rem;
border-radius: 999px;
}
.filter-state-tag i {
color: var(--vmc-gold-deep);
font-size: 0.7rem;
}
@media (max-width: 575.98px) {
.products-count-badge {
font-size: 0.72rem;
padding: 0.15rem 0.5rem;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.product-filter-bar {
padding: 0.85rem 0.85rem 0.85rem;
}
.product-filter-row {
gap: 0.9rem; /* room for the floating "Category" label */
}
.product-filter-search,
.product-filter-select {
flex: 1 1 100%;
}
.product-filter-select {
margin-top: 0.35rem; /* extra breathing room above floating label */
}
.product-filter-segmented {
flex: 1 1 100%;
justify-content: stretch;
margin-top: 0.15rem;
}
.product-filter-segmented button {
flex: 1 1 auto;
justify-content: center;
padding: 0 0.6rem;
}
.product-filter-reset {
flex: 1 1 100%;
justify-content: center;
}
}
/* ===== Hero Carousel admin =========================================== */
.carousel-admin .carousel-form {
padding: 1.25rem 1.4rem 1.4rem;
}
/* Page head sits OUTSIDE .carousel-admin (it's a sibling, not a child),
so target it directly on the carousel page. Inline-on-one-line at md+
and wrap only on phones. */
/* Carousel-page-specific overrides previously lived here — now covered
by the unified .admin-page-head rules above. Kept as a deliberate
no-op so the grep trail is preserved. */
/* Subsection blocks inside the form */
.carousel-subsection {
padding: 0.9rem 0 0.2rem;
border-top: 1px dashed var(--vmc-line);
margin-top: 0.9rem;
}
.carousel-subsection:first-of-type {
border-top: 0;
padding-top: 0.1rem;
margin-top: 0.4rem;
}
.carousel-subhead {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vmc-burgundy);
margin-bottom: 0.75rem;
}
.carousel-subhead i {
color: var(--vmc-gold-deep);
font-size: 1rem;
}
.carousel-active-switch {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 0.85rem;
background: var(--vmc-soft);
border: 1px solid var(--vmc-line);
border-radius: 10px;
min-height: 38px;
}
.carousel-active-switch .form-check-input {
margin: 0;
width: 2.2em;
height: 1.2em;
cursor: pointer;
}
.carousel-active-switch .form-check-input:checked {
background-color: var(--vmc-gold-deep);
border-color: var(--vmc-gold-deep);
}
.carousel-active-switch .form-check-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--vmc-burgundy);
margin: 0;
cursor: pointer;
}
/* Slide list (replaces the dense table) */
.slide-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.slide-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
padding: 0.7rem;
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 12px;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.slide-row:hover {
border-color: var(--vmc-gold);
box-shadow: var(--vmc-shadow-sm);
}
.slide-row.is-editing {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.22);
background: linear-gradient(135deg, #fff 70%, var(--vmc-warm) 100%);
}
.slide-row.is-hidden {
opacity: 0.7;
}
.slide-row-thumb {
position: relative;
width: 110px;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
background: var(--vmc-soft);
border: 1px solid var(--vmc-line);
}
.slide-row-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide-row-sort {
position: absolute;
top: 4px;
left: 4px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
padding: 3px 6px;
border-radius: 999px;
min-width: 20px;
text-align: center;
}
.slide-row-body { min-width: 0; }
.slide-row-title-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.2rem;
}
.slide-row-title {
font-size: 0.98rem;
color: var(--vmc-burgundy-deep);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.slide-row-status {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: 999px;
}
.slide-row-status.on { background: rgba(46, 160, 67, 0.12); color: #2ea043; }
.slide-row-status.off { background: rgba(120, 120, 120, 0.14); color: #666; }
.slide-row-status i { font-size: 0.8rem; }
.slide-row-sub {
color: var(--vmc-muted);
font-size: 0.85rem;
margin: 0 0 0.25rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.slide-row-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.9rem;
font-size: 0.75rem;
color: var(--vmc-muted);
}
.slide-row-meta span {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.slide-row-meta i { color: var(--vmc-gold-deep); }
.slide-row-actions {
display: flex;
gap: 0.4rem;
align-items: center;
}
.slide-row-actions form { margin: 0; }
/* Empty state */
.carousel-empty {
text-align: center;
padding: 3rem 1rem;
border-radius: 14px;
background: var(--vmc-soft);
}
.carousel-empty i {
font-size: 2.8rem;
color: var(--vmc-gold-deep);
display: block;
margin-bottom: 0.4rem;
}
.carousel-empty h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--vmc-burgundy);
margin-bottom: 0.3rem;
}
/* Mobile tightening */
@media (max-width: 767.98px) {
.carousel-admin .carousel-form {
padding: 1rem 1rem 1.1rem;
}
.slide-row {
grid-template-columns: 84px minmax(0, 1fr);
grid-template-areas:
"thumb body"
"actions actions";
gap: 0.7rem;
padding: 0.6rem;
}
.slide-row-thumb { width: 84px; grid-area: thumb; }
.slide-row-body { grid-area: body; }
.slide-row-actions {
grid-area: actions;
justify-content: flex-end;
border-top: 1px dashed var(--vmc-line);
padding-top: 0.55rem;
}
}
/* =====================================================================
ACCOUNT PAGE — refined typography + equal-size stat cards
===================================================================== */
/* Header strip — avatar (left) + info + sign-out (right), full container width */
.account-head {
display: flex !important;
width: 100%;
align-items: center;
gap: 1.2rem !important;
flex-wrap: wrap;
padding: 1.1rem 1.6rem !important;
background: linear-gradient(135deg, #fff 0%, var(--vmc-soft) 65%, var(--vmc-warm) 100%) !important;
border: 1px solid var(--vmc-line);
border-radius: 16px !important;
box-shadow: var(--vmc-shadow-sm);
max-width: 100%;
}
.account-head-avatar {
width: 72px !important;
height: 72px !important;
border-radius: 999px;
display: grid;
place-items: center;
font-family: var(--vmc-font-display); /* Cormorant Garamond — premium feel */
font-size: 2.5rem !important;
font-weight: 600;
color: var(--vmc-gold-soft);
background: linear-gradient(135deg, var(--vmc-burgundy) 0%, var(--vmc-burgundy-deep) 100%);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.55), 0 6px 14px rgba(58, 13, 24, 0.22);
flex: 0 0 auto;
}
.account-head-info {
flex: 1 1 240px;
min-width: 240px;
}
.account-head-info .eyebrow {
margin-bottom: 0.25rem;
display: inline-block;
padding-left: 0;
padding-right: 0;
}
/* Drop the global eyebrow's left/right dash decoration on this page only */
.account-head-info .eyebrow::before,
.account-head-info .eyebrow::after {
content: none !important;
display: none !important;
}
.account-name {
font-family: var(--vmc-font-display);
font-size: 2rem;
font-weight: 800;
line-height: 1.1;
color: var(--vmc-burgundy-deep);
letter-spacing: -0.012em;
margin: 0 0 0.45rem;
}
.account-meta {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
color: var(--vmc-muted);
font-size: 0.92rem;
}
.account-verified-badge,
.account-unverified-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.25em 0.6em;
border-radius: 999px;
line-height: 1;
}
.account-verified-badge {
background: #dcfce7;
color: #166534;
}
.account-unverified-badge {
background: #fef3c7;
color: #7c4d00;
}
.account-head-actions {
margin-left: auto;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Sign out — gold-outlined ghost pill that signals destructive on hover.
Replaces the bright-red filled button, which was overpowering at rest. */
.account-signout {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.1rem;
border-radius: 999px;
background: transparent;
border: 1.5px solid rgba(201, 162, 74, 0.55);
color: var(--vmc-burgundy-deep);
font-size: 0.87rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
letter-spacing: 0.01em;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.account-signout i {
font-size: 0.95rem;
color: var(--vmc-gold-deep);
transition: color 180ms ease, transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.account-signout:hover,
.account-signout:focus-visible {
background: rgba(185, 28, 28, 0.08);
border-color: #b91c1c;
color: #b91c1c;
outline: none;
}
.account-signout:hover i,
.account-signout:focus-visible i {
color: #b91c1c;
transform: translateX(2px); /* door-arrow nudges right */
}
@media (max-width: 767.98px) {
/* Mobile = compact horizontal layout: avatar (left) + info (right),
sign-out drops to its own row beneath the meta block. */
.account-head {
align-items: center !important;
gap: 0.85rem !important;
padding: 1.1rem 1.2rem !important;
}
.account-head-info {
flex: 1 1 auto; /* fill the space next to the avatar */
min-width: 0;
}
.account-head-actions {
margin-left: 0;
flex: 1 1 100%; /* drop to its own row below */
justify-content: flex-start;
margin-top: 0.4rem;
}
.account-signout {
align-self: flex-start; /* hug content, no full-width pill */
}
}
@media (max-width: 575.98px) {
.account-head { padding: 1rem 1.1rem !important; gap: 0.8rem !important; }
.account-name { font-size: 1.3rem; margin-bottom: 0.3rem; }
.account-head-avatar {
width: 54px !important;
height: 54px !important;
font-size: 1.4rem !important;
}
.account-head-info .eyebrow { font-size: 0.65rem; margin-bottom: 0.1rem; }
.account-meta { gap: 0.45rem; font-size: 0.84rem; }
.account-verified-badge,
.account-unverified-badge { font-size: 0.62rem; padding: 0.18em 0.5em; }
.account-signout {
padding: 0.48rem 0.95rem;
font-size: 0.82rem;
}
}
/* === Account stat cards — horizontal layout with icon + chevron ====== */
.account-stats { display: flex; flex-wrap: wrap; }
.account-stats > [class*="col-"] {
display: flex;
}
.account-stat-card {
flex: 1 1 auto;
width: 100%;
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 18px;
padding: 1.1rem 1.25rem;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 8px 22px -14px rgba(58, 13, 24, 0.16),
0 2px 6px -3px rgba(58, 13, 24, 0.07);
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
min-height: 92px;
text-decoration: none;
color: inherit;
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 200ms ease;
}
.account-stat-card--link { cursor: unset; }
.account-stat-card:hover {
transform: translateY(-2px);
border-color: var(--vmc-gold);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 14px 28px -16px rgba(58, 13, 24, 0.28),
0 4px 10px -4px rgba(58, 13, 24, 0.12);
color: inherit;
}
/* Cream-peach circle holding the gold stat icon. */
.account-stat-icon {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: linear-gradient(135deg, #fbe9d4 0%, #f4d9b4 100%);
color: var(--vmc-gold-deep, #8b6a1f);
font-size: 1.35rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 2px 6px -3px rgba(140, 112, 38, 0.25);
}
.account-stat-card:hover .account-stat-icon {
background: linear-gradient(135deg, #f8e0c1 0%, #efc99c 100%);
}
/* Middle column — label on top, value below. */
.account-stat-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.account-stat-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--vmc-muted);
line-height: 1.2;
}
.account-stat-value {
font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
color: var(--vmc-burgundy-deep);
}
.account-stat-value.account-stat-text {
font-size: 1.4rem;
line-height: 1.2;
}
/* Trailing chevron — gold for clickable cards, muted for static. */
.account-stat-chev {
flex: 0 0 auto;
font-size: 1.1rem;
color: var(--vmc-gold-deep, #8b6a1f);
line-height: 1;
transition: transform 240ms cubic-bezier(0.34, 1.36, 0.64, 1),
color 200ms ease;
}
.account-stat-chev--muted {
color: var(--vmc-line-strong, #d8c89e);
}
.account-stat-card--link:hover .account-stat-chev {
transform: translateX(4px);
color: var(--vmc-burgundy);
}
@media (max-width: 575.98px) {
.account-stat-card {
padding: 0.9rem 1rem;
gap: 0.85rem;
min-height: 82px;
border-radius: 16px;
}
.account-stat-icon {
flex-basis: 46px;
width: 46px;
height: 46px;
font-size: 1.2rem;
}
.account-stat-value { font-size: 1.7rem; }
.account-stat-value.account-stat-text { font-size: 1.3rem; }
.account-stat-chev { font-size: 1rem; }
}
/* === Account tabs — refined (no icons) ============================== */
.account-tabs {
border-bottom: 1px solid var(--vmc-line);
gap: 0.4rem;
padding-bottom: 0;
margin-top: 0.5rem;
}
.account-tabs .nav-item .nav-link {
border: 0;
background: transparent;
color: var(--vmc-muted);
padding: 0.75rem 1.4rem;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
border-bottom: 2px solid transparent;
border-radius: 0;
transition: color 180ms ease, border-color 180ms ease;
}
.account-tabs .nav-item .nav-link:hover {
color: var(--vmc-burgundy);
}
.account-tabs .nav-item .nav-link.active {
color: var(--vmc-burgundy-deep);
border-bottom-color: var(--vmc-gold);
background: transparent;
}
.account-count {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
border-radius: 999px;
background: var(--vmc-warm);
color: var(--vmc-burgundy);
font-size: 0.75rem;
font-weight: 600;
padding: 0 7px;
margin-left: 0.4rem;
line-height: 1;
}
.account-tabs .nav-link.active .account-count {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
}
/* === Account panels — better fonts + spacing ======================== */
.account-panel {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 14px;
padding: 1.6rem 1.8rem !important;
box-shadow: var(--vmc-shadow-sm);
}
.account-panel h2 {
font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
font-size: 1.45rem;
font-weight: 700;
color: var(--vmc-burgundy-deep);
margin: 0 0 0.4rem;
letter-spacing: 0.01em;
}
.account-panel .form-label {
font-size: 0.82rem;
font-weight: 600;
color: var(--vmc-burgundy-deep);
letter-spacing: 0.02em;
}
.account-panel .form-control,
.account-panel .form-select {
border-color: var(--vmc-line-strong);
border-radius: 8px;
}
.account-panel .form-control:focus,
.account-panel .form-select:focus {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}
@media (max-width: 575.98px) {
.account-panel { padding: 1.1rem 1.2rem !important; }
.account-panel h2 { font-size: 1.2rem; }
}
/* =====================================================================
MOBILE NAVBAR — clean text-only stack (no icons, generous tap targets)
Active below the Bootstrap navbar collapse breakpoint (lg = 992px).
===================================================================== */
@media (max-width: 991.98px) {
/* Drop a soft cream backdrop on the collapsed menu so it reads as a sheet */
.vmc-nav .navbar-collapse {
background: var(--vmc-soft);
border-top: 1px solid var(--vmc-line);
margin: 0.6rem -1rem 0;
padding: 0.4rem 1rem 0.85rem;
border-radius: 0 0 14px 14px;
box-shadow: var(--vmc-shadow-sm);
}
/* Stack items full-width with comfortable spacing */
.vmc-nav-list {
flex-direction: column;
gap: 0 !important;
align-items: stretch !important;
}
.vmc-nav-list > .nav-item {
width: 100%;
border-bottom: 1px solid var(--vmc-line);
}
.vmc-nav-list > .nav-item:last-child {
border-bottom: 0;
}
/* Products / About / Contact pills become flat text rows in the menu */
.vmc-nav-products .nav-link,
.vmc-nav-pill .nav-link {
height: auto !important;
padding: 0.85rem 0.4rem !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
justify-content: flex-start !important;
font-size: 1rem !important;
font-weight: 600;
color: var(--vmc-burgundy-deep) !important;
width: 100%;
}
.vmc-nav-products .nav-link.dropdown-toggle::after {
margin-left: auto; /* push caret to the far right */
}
/* Sub-menu items appear inline (Bootstrap's default), tighten them */
.vmc-nav-dropdown,
.vmc-nav .navbar-collapse .dropdown-menu {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 0 0.4rem 0.6rem !important;
margin: 0 !important;
}
.vmc-nav .navbar-collapse .dropdown-item {
padding: 0.5rem 0.4rem !important;
font-size: 0.92rem;
color: var(--vmc-ink) !important;
}
.vmc-nav .navbar-collapse .dropdown-item:hover {
background: rgba(201, 162, 74, 0.1) !important;
color: var(--vmc-burgundy) !important;
}
.vmc-nav .navbar-collapse .dropdown-divider { margin: 0.3rem 0 !important; }
/* === Cart + Account: hide ALL icon chrome on mobile, show text only === */
.vmc-nav-icon,
.vmc-nav-icon:hover,
.vmc-nav-icon:focus,
.vmc-nav-icon.active,
.vmc-nav-icon-cart,
.vmc-nav-icon-user {
display: flex !important;
width: 100% !important;
height: auto !important;
padding: 0.85rem 0.4rem !important;
justify-content: flex-start !important;
align-items: center !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--vmc-burgundy-deep) !important;
font-size: 1rem;
font-weight: 600;
gap: 0.6rem;
box-shadow: none !important;
}
/* Hide bag icon, handbag icon, avatar disc — text only on mobile */
.vmc-nav-icon i.bi,
.vmc-nav-icon-user .vmc-user-avatar {
display: none !important;
}
/* Show the inline label that's hidden on desktop */
.vmc-nav-icon-label {
display: inline-block !important;
margin: 0 !important;
color: var(--vmc-burgundy-deep) !important;
font-weight: 600;
}
/* Cart count badge moves to the right edge as a compact pill */
.vmc-nav-icon-cart .cart-badge,
.vmc-nav-icon-cart .cart-count:not(.visually-hidden) {
position: static !important;
margin-left: auto !important;
border: 0 !important;
background: var(--vmc-gold) !important;
color: var(--vmc-burgundy-deep) !important;
min-width: 24px !important;
height: 22px !important;
font-size: 0.72rem !important;
animation: none !important;
box-shadow: none !important;
}
/* Subtle hover state for each row */
.vmc-nav-list > .nav-item > a:hover,
.vmc-nav-list > .nav-item > .nav-link:hover {
background: rgba(201, 162, 74, 0.08) !important;
color: var(--vmc-burgundy) !important;
}
/* Sign-in button on mobile — full width, primary action style */
.vmc-nav-list .btn-outline-burgundy {
width: 100%;
margin-top: 0.5rem;
padding: 0.6rem;
}
/* User dropdown — looks the same as Products dropdown when open */
.vmc-user-dropdown,
.vmc-nav .navbar-collapse .vmc-user-dropdown {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 0 0.4rem 0.6rem !important;
margin: 0 !important;
position: static !important;
float: none;
width: 100%;
}
.vmc-user-dropdown .vmc-user-dropdown-head {
padding: 0.4rem 0.4rem 0.6rem !important;
}
.vmc-user-dropdown .vmc-user-dropdown-head strong { color: var(--vmc-burgundy-deep); }
.vmc-user-dropdown .vmc-user-dropdown-head small { color: var(--vmc-muted); }
}
/* Tighter on phones — preserve readability without scroll */
@media (max-width: 575.98px) {
.vmc-nav .navbar-collapse {
margin: 0.5rem -0.75rem 0;
padding: 0.4rem 0.75rem 0.75rem;
}
.vmc-nav-products .nav-link,
.vmc-nav-pill .nav-link,
.vmc-nav-icon,
.vmc-nav-icon-cart,
.vmc-nav-icon-user {
padding: 0.78rem 0.3rem !important;
font-size: 0.95rem !important;
}
}
/* =====================================================================
FINAL: Products pill padding (desktop) + mobile flatten dropdowns
===================================================================== */
/* DESKTOP — wide, generous, NEVER stretched (display: inline-flex shrinks to content) */
@media (min-width: 992px) {
.vmc-nav-products,
.vmc-nav-pill {
display: inline-flex !important; /* keep nav-item compact, not full-width */
}
.vmc-nav-products .nav-link,
.vmc-nav-pill .nav-link {
height: 42px !important;
min-width: 130px !important; /* even pill widths across Products / About / Contact */
padding: 0 1.4rem !important;
width: auto !important; /* don't stretch with the parent flex */
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
line-height: 1 !important;
border-radius: 999px !important;
background: rgba(201, 162, 74, 0.08) !important;
border: 1.5px solid transparent !important;
color: var(--vmc-burgundy-deep) !important;
}
.vmc-nav-products .nav-link:hover,
.vmc-nav-products .nav-link.active,
.vmc-nav-products.show .nav-link,
.vmc-nav-pill .nav-link:hover,
.vmc-nav-pill .nav-link.active {
background: rgba(201, 162, 74, 0.18) !important;
border-color: rgba(201, 162, 74, 0.4) !important;
color: var(--vmc-burgundy) !important;
}
}
/* MOBILE — Products + Account go DIRECTLY to their pages, no dropdown */
@media (max-width: 991.98px) {
/* Hide the dropdown sub-menus entirely on mobile */
.vmc-nav-products .dropdown-menu,
.vmc-user-menu .dropdown-menu,
.vmc-nav .navbar-collapse .dropdown-menu {
display: none !important;
}
/* Hide the dropdown caret since there's nothing to drop down to */
.vmc-nav-products .nav-link.dropdown-toggle::after,
.vmc-user-menu .nav-link.dropdown-toggle::after,
.vmc-nav .navbar-collapse .dropdown-toggle::after {
display: none !important;
content: none !important;
}
/* Make sure the toggle reads as a normal link, not an interactive caret */
.vmc-nav-products .nav-link,
.vmc-user-menu .vmc-nav-icon-user {
cursor: pointer;
}
}
/* =====================================================================
DARK GLASSY NAVBAR — burgundy-tinted translucent with backdrop blur
Light cream text on the dark glass for premium luxury feel.
===================================================================== */
.vmc-nav {
background: linear-gradient(180deg, #2d0912 0%, #1b050b 100%); /* #2a0a12 dark burgundy at 90% */
-webkit-backdrop-filter: saturate(140%) blur(16px);
backdrop-filter: saturate(140%) blur(16px);
border-bottom: 1px solid rgba(201, 162, 74, 0.55) !important;
box-shadow: 0 1px 0 rgba(201, 162, 74, 0.2),
0 8px 22px rgba(0, 0, 0, 0.28) !important;
/* Extend the burgundy plate up behind the iOS notch / Dynamic Island.
Works with the viewport meta's `viewport-fit=cover`. Content stays
below the notch; only the background colour extends behind it. */
padding-top: calc(env(safe-area-inset-top, 0px) + 0.65rem) !important;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
transition: background 240ms ease, box-shadow 240ms ease, padding 200ms ease !important;
}
/* Slightly more opaque + stronger shadow when scrolled past the top */
.vmc-nav.is-scrolled {
/* background: #21080f !important; */
box-shadow: 0 1px 0 rgba(201, 162, 74, 0.25),
0 14px 32px rgba(0, 0, 0, 0.4) !important;
}
.vmc-nav:hover {
background: linear-gradient(180deg, #2d0912 0%, #1b050b 100%);
}
/* Fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.vmc-nav {
background: #2a0a12 !important;
}
}
/* === Light text on the dark glass ============================== */
.vmc-nav .navbar-brand,
.vmc-nav .brand-name,
.vmc-nav .brand-tag,
.vmc-navbar .navbar-brand strong {
color: #e3c98a !important;
}
.vmc-nav .brand-tag {
color: rgba(201, 162, 74, 0.85) !important;
letter-spacing: 0.18em;
}
/* Products / About / Contact / Cart / User pills — light gold ring on dark background */
.vmc-nav-products .nav-link,
.vmc-nav-pill .nav-link,
.vmc-nav-icon,
.vmc-nav-icon-cart,
.vmc-nav-icon-user {
color: #f6e8c8 !important;
border-color: rgba(201, 162, 74, 0.45) !important;
}
.vmc-nav-products .nav-link:hover,
.vmc-nav-products .nav-link.active,
.vmc-nav-pill .nav-link:hover,
.vmc-nav-pill .nav-link.active,
.vmc-nav-icon:hover,
.vmc-nav-icon.active,
.vmc-nav-icon-cart:hover,
.vmc-nav-icon-cart:focus-visible,
.vmc-nav-icon-cart.has-items,
.vmc-nav-icon-user:hover,
.vmc-nav-icon-user.active,
.vmc-nav-icon-user.show {
background: rgba(201, 162, 74, 0.16) !important;
border-color: var(--vmc-gold) !important;
color: #fff !important;
}
/* Cart bag icon stays cream/gold instead of burgundy */
.vmc-nav-icon-cart i {
color: #ecc47f !important;
}
.vmc-nav-icon-cart:hover i {
color: #ecc47f !important;
}
.vmc-nav-icon-cart:hover {
background: var(--vmc-gold) !important;
}
/* User avatar inside the dark navbar — gold disc on burgundy */
.vmc-nav-icon-user .vmc-user-avatar {
background: linear-gradient(135deg, var(--vmc-gold-soft) 0%, var(--vmc-gold) 60%, var(--vmc-gold-deep) 100%) !important;
color: var(--vmc-burgundy-deep) !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15),
0 4px 10px rgba(0, 0, 0, 0.3) !important;
}
/* Hamburger toggler icon — light */
.vmc-nav .navbar-toggler {
border: 1.5px solid rgba(201, 162, 74, 0.45) !important;
color: #f6e8c8 !important;
padding: 0.45rem 0.7rem;
border-radius: 999px;
}
.vmc-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.25) !important; }
/* === Mobile collapsed menu — clean, dark, fluid ==================== */
@media (max-width: 991.98px) {
/* Anchor the overlay menu to the navbar BAR itself (not the inner
.container). The bar's box includes its padding/margin, so top:100%
lands on the navbar's TRUE bottom edge. Anchoring to .container opened
it inside the bar's bottom padding (looked like it came from the
toggler). */
.vmc-nav { position: relative; }
/* Overlay dropdown menu. Bootstrap animates `height` (a LAYOUT prop) which
repaints the body's 7 fixed-gradient backdrop every frame → the leggy
"2-step" close. Float the menu (absolute) so it never reflows the page,
and reveal it with GPU-composited opacity + transform instead. Height is
forced auto so Bootstrap's inline height does nothing. */
.vmc-nav .navbar-collapse {
position: absolute !important;
top: calc(100% + 48px);
left: 0;
right: 0;
z-index: 1035;
height: auto !important;
background: rgb(31, 7, 13) !important;
border: 1px solid rgba(201, 162, 74, 0.22) !important;
border-radius: 14px !important;
padding: 0.5rem 0 !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
overflow: hidden;
opacity: 0;
transform: translateY(-8px) translateZ(0);
-webkit-transform: translateY(-8px) translateZ(0);
transition: opacity 200ms ease, transform 200ms ease;
pointer-events: none;
}
/* Stays block + un-clipped while Bootstrap is mid-toggle (the .collapsing
phase) so the fade is visible; its 200ms transition is what Bootstrap
waits on before display:none — no abrupt cut. */
.vmc-nav .navbar-collapse.collapsing {
height: auto !important;
overflow: hidden;
display: block !important;
transition: opacity 200ms ease, transform 200ms ease !important;
}
.vmc-nav .navbar-collapse.show {
opacity: 1;
transform: translateY(0) translateZ(0);
-webkit-transform: translateY(0) translateZ(0);
pointer-events: auto;
}
/* Stack items with comfortable vertical rhythm */
.vmc-nav-list {
flex-direction: column !important;
gap: 0 !important;
align-items: stretch !important;
}
.vmc-nav-list > .nav-item {
width: 100%;
border-bottom: 1px solid rgba(201, 162, 74, 0.12) !important;
}
.vmc-nav-list > .nav-item:last-child {
border-bottom: 0 !important;
}
/* Each row is a full-width text link, no chrome, no pill */
.vmc-nav-products .nav-link,
.vmc-nav-icon,
.vmc-nav-icon-cart,
.vmc-nav-icon-user {
display: flex !important;
width: 100% !important;
height: auto !important;
min-height: 52px;
padding: 0.85rem 1.1rem !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 0.7rem !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: #f6e8c8 !important;
font-size: 1rem !important;
font-weight: 500 !important;
box-shadow: none !important;
}
/* Hide all icons + avatar discs on mobile (text-only menu) */
.vmc-nav-icon i.bi,
.vmc-nav-icon-user .vmc-user-avatar {
display: none !important;
}
/* Hidden labels (used on desktop in icon pills) become visible on mobile */
.vmc-nav-icon-label {
display: inline-block !important;
color: #f6e8c8 !important;
font-weight: 500 !important;
margin: 0 !important;
}
/* Cart count badge on mobile — small gold pill at the right */
.vmc-nav-icon-cart .cart-badge,
.vmc-nav-icon-cart .cart-count:not(.visually-hidden) {
position: static !important;
margin-left: auto !important;
background: var(--vmc-gold) !important;
color: var(--vmc-burgundy-deep) !important;
border: 0 !important;
min-width: 26px !important;
height: 22px !important;
font-size: 0.74rem !important;
font-weight: 800 !important;
animation: none !important;
box-shadow: none !important;
}
/* Hover state — gentle gold tint, no transforms */
.vmc-nav-list > .nav-item > a:hover,
.vmc-nav-list > .nav-item > .nav-link:hover {
background: rgba(201, 162, 74, 0.1) !important;
color: #fff !important;
}
/* Hide dropdown carets and sub-menus on mobile (we treat them as direct links) */
.vmc-nav-products .nav-link.dropdown-toggle::after,
.vmc-user-menu .nav-link.dropdown-toggle::after {
display: none !important;
}
.vmc-nav .navbar-collapse .dropdown-menu {
display: none !important;
}
}
/* =====================================================================
HERO — proper mobile fit + centered CTAs
===================================================================== */
/* Static hero (no carousel slides) */
@media (max-width: 991.98px) {
.hero {
padding: 4rem 0 3.2rem !important;
text-align: center;
}
.hero .hero-eyebrow,
.hero .eyebrow {
display: inline-block;
}
.hero .lead { margin-left: auto; margin-right: auto; }
.hero .hero-actions {
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.hero .hero-trust {
justify-content: center;
}
/* The orb on tablet looks fine — but on phones it's hidden via d-lg-block already */
}
@media (max-width: 575.98px) {
.hero {
padding: 3rem 0 2.4rem !important;
}
.hero h1 {
font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
line-height: 1.05 !important;
}
.hero .lead {
font-size: 0.98rem;
max-width: 100%;
}
.hero .hero-actions {
flex-direction: column;
align-items: stretch;
gap: 0.55rem !important;
width: 100%;
}
.hero .hero-actions .btn {
width: 100%;
}
.hero .hero-trust {
gap: 0.7rem !important;
font-size: 0.84rem;
}
}
/* Carousel hero (when slides exist) — same mobile fit */
@media (max-width: 991.98px) {
.hero-carousel,
.hero-slide {
min-height: 520px !important;
}
.hero-slide .hero-copy {
padding: 4.2rem 0 3.6rem !important;
text-align: center;
}
.hero-slide .hero-copy h1 {
margin-left: auto;
margin-right: auto;
}
.hero-slide .hero-copy p {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.hero-slide .hero-actions {
justify-content: center !important;
margin-left: auto;
margin-right: auto;
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
width: 12%;
}
}
@media (max-width: 575.98px) {
.hero-carousel,
.hero-slide {
min-height: 460px !important;
}
.hero-slide .hero-copy {
padding: 3.4rem 0 2.8rem !important;
}
.hero-slide .hero-copy h1 {
font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
line-height: 1.05;
}
.hero-slide .hero-copy p {
font-size: 0.95rem !important;
line-height: 1.45;
}
/* CTA stack — contained, not edge-to-edge */
.hero-slide .hero-actions,
.hero .hero-actions {
flex-direction: column;
align-items: stretch;
gap: 0.6rem !important;
width: auto;
max-width: 340px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.hero-slide .hero-actions .btn,
.hero .hero-actions .btn {
width: 100%;
}
/* Trust badges — equal-width 3-column grid, icon stacked above text */
.hero .hero-trust,
.hero-slide .hero-trust {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.4rem !important;
text-align: center;
font-size: 0.72rem !important;
max-width: 360px;
margin-left: auto;
margin-right: auto;
padding: 0 0.25rem;
}
.hero-trust span,
.hero-slide .hero-trust span {
display: inline-flex !important;
flex-direction: column;
align-items: center;
gap: 0.25rem;
line-height: 1.25;
word-break: break-word;
}
.hero-trust i,
.hero-slide .hero-trust i {
margin-right: 0 !important;
font-size: 1.05rem;
}
}
/* =====================================================================
ENQUIRY STEPPER (cart → confirm → submitted)
===================================================================== */
.enquiry-stepper {
display: flex;
align-items: center;
gap: 0.6rem;
list-style: none;
padding: 0.85rem 1.2rem;
margin: 0 0 1.6rem;
background: linear-gradient(135deg, #fff 0%, var(--vmc-soft) 100%);
border: 1px solid var(--vmc-line);
border-radius: 999px;
box-shadow: var(--vmc-shadow-sm);
overflow-x: auto;
}
.enq-step {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--vmc-muted);
font-weight: 600;
font-size: 0.92rem;
white-space: nowrap;
}
.enq-step-num {
width: 28px;
height: 28px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 0.85rem;
font-weight: 800;
background: rgba(91, 18, 38, 0.08);
color: var(--vmc-muted);
border: 1.5px solid transparent;
transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.enq-step.is-current { color: var(--vmc-burgundy-deep); }
.enq-step.is-current .enq-step-num {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
border-color: var(--vmc-gold-deep);
box-shadow: 0 0 0 4px rgba(201, 162, 74, 0.22);
}
.enq-step.is-done { color: var(--vmc-burgundy); }
.enq-step.is-done .enq-step-num {
background: var(--vmc-burgundy);
color: var(--vmc-gold-soft);
border-color: var(--vmc-burgundy);
}
.enq-step-line {
flex: 1 1 auto;
height: 2px;
min-width: 24px;
background: rgba(91, 18, 38, 0.12);
border-radius: 1px;
}
.enq-step-line.is-done { background: var(--vmc-burgundy); }
@media (max-width: 575.98px) {
.enquiry-stepper {
padding: 0.65rem 0.9rem;
gap: 0.4rem;
}
.enq-step-label { display: none; }
.enq-step.is-current .enq-step-label { display: inline; }
.enq-step-num { width: 24px; height: 24px; font-size: 0.75rem; }
}
/* =====================================================================
CART BADGE / ICON pulse — fires on every cart update for visual feedback
===================================================================== */
@keyframes cartBadgePulse {
0% { transform: scale(1); }
35% { transform: scale(1.45); box-shadow: 0 0 0 8px rgba(201, 162, 74, 0.32); }
70% { transform: scale(0.96); }
100% { transform: scale(1); }
}
.cart-pulse {
animation: cartBadgePulse 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cartIconPulse {
0% { transform: scale(1); }
40% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.cart-icon-pulse {
animation: cartIconPulse 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* =====================================================================
SPLIT-CAROUSEL HERO — text left, gold-framed image right
===================================================================== */
/* === Container hierarchy — let the frame shadow + child animations escape =====
*
* .hero-split-carousel position: relative; overflow: visible
* ├── .hero-split-bg absolute; inset: 0; overflow: hidden ← dotted pattern clipped here
* ├── .hero-split-decor absolute; inset: 0; overflow: hidden ← orbs/lines clipped here
* └── .hero-split-container (Bootstrap .container)
* ├── .carousel-inner ← BOOTSTRAP CLIPS THIS BY DEFAULT — we open it
* │ └── .carousel-item ← BOOTSTRAP CLIPS THIS BY DEFAULT — we open it
* │ └── .row.hero-split-row
* │ ├── .hero-split-text
* │ └── .hero-split-image
* │ └── .hero-frame ← shadow lives here, must escape upward
* └── .hero-split-arrow (×2)
*
* Decorative effects stay contained at the bg/decor layers; everything inside
* the carousel itself can render without being clipped.
* ============================================================================ */
.hero-split-carousel {
position: relative;
overflow: visible !important; /* section lets shadows escape */
isolation: isolate;
}
.hero-split-carousel .carousel-inner {
overflow: visible !important; /* default Bootstrap is overflow:hidden */
}
.hero-split-carousel .carousel-item {
overflow: visible !important; /* same — default Bootstrap is overflow:hidden */
}
/* The Bootstrap .container has no overflow rule by default, but make it explicit
so a future Bootstrap upgrade or custom theme can't reintroduce a clip.
Also make it the positioning ancestor for the arrow buttons so they can be
placed precisely on the frame's left/right edges. */
.hero-split-carousel .hero-split-container {
overflow: visible;
position: relative;
}
/* The .row also stays open — Bootstrap rows have negative margins but no clip. */
.hero-split-carousel .hero-split-row { overflow: visible; }
/* Decoration containment — only these two layers clip, so dotted pattern,
floating lines, sparkles, etc. don't escape the hero. */
.hero-split-bg {
/* Already has overflow: hidden in its own block above. */
}
.hero-split-decor {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
/* Image column — no clipping; the frame's shadow extends below it freely. */
.hero-split-image {
overflow: visible;
}
/* Mobile breakpoints inherit the same overflow rules — no additional clip points
need to be added since Bootstrap doesn't introduce new clipping at smaller widths. */
/* === Animated burgundy gradient — slow, fluid, no decorative children ===
*
* Three independently animated layers create a subtle "breathing" depth:
* 1. A gold radial highlight that drifts in a wide circle
* 2. A burgundy-soft radial that counter-drifts (opposite direction)
* 3. The base linear gradient hue rotates very slowly
* Each layer has its own duration so they never sync into a distracting pulse.
* ====================================================================== */
.hero-split-bg {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
background-color: var(--vmc-burgundy-deep);
color: #fbe9bf;
}
/* Layer 1: gold highlight that orbits slowly */
.hero-split-bg::before {
content: "";
position: absolute;
inset: -30%;
background:
radial-gradient(circle at 50% 50%,
rgba(201, 162, 74, 0.28) 0%,
rgba(201, 162, 74, 0.12) 25%,
transparent 55%);
animation: heroGoldOrbit 26s ease-in-out infinite;
pointer-events: none;
}
/* Layer 2: burgundy-soft glow drifting opposite + base linear bg gradient */
.hero-split-bg::after {
content: "";
position: absolute;
inset: -30%;
background:
radial-gradient(circle at 50% 50%,
rgba(122, 26, 50, 0.48) 0%,
rgba(122, 26, 50, 0.22) 30%,
transparent 60%),
linear-gradient(135deg,
var(--vmc-burgundy-deep) 0%,
var(--vmc-burgundy) 50%,
#2a0a12 100%);
background-size: 100% 100%, 200% 200%;
background-position: 50% 50%, 50% 50%;
animation:
heroBurgundyDrift 32s ease-in-out infinite,
heroBaseShift 40s ease-in-out infinite;
pointer-events: none;
}
/* Gold orb orbits in a wide ellipse */
@keyframes heroGoldOrbit {
0% { transform: translate( 18%, -10%); }
25% { transform: translate(-18%, -16%); }
50% { transform: translate(-22%, 12%); }
75% { transform: translate( 12%, 18%); }
100% { transform: translate( 18%, -10%); }
}
/* Burgundy soft drifts the opposite way (counter-orbit) */
@keyframes heroBurgundyDrift {
0% { transform: translate(-20%, 14%); }
25% { transform: translate( 16%, 18%); }
50% { transform: translate( 22%, -14%); }
75% { transform: translate(-14%, -18%); }
100% { transform: translate(-20%, 14%); }
}
/* Subtle base-gradient pan so the diagonal light line drifts across */
@keyframes heroBaseShift {
0%, 100% { background-position: 50% 50%, 0% 0%; }
50% { background-position: 50% 50%, 100% 100%; }
}
/* Hero background subtle breathing pulse — still in use by `.hero-split-bg` */
.hero-split-bg {
animation: heroBgBreath 12s ease-in-out infinite;
}
@keyframes heroBgBreath {
0%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.06) saturate(1.08); }
}
.hero-split-container {
padding-top: 4rem;
padding-bottom: 5.5rem;
position: relative;
}
.hero-split-row { min-height: 480px; }
/* === Slide transitions ============================================== */
/* Speed up Bootstrap's own `.carousel-fade` cross-fade — default is 600ms */
.hero-split-carousel.carousel-fade .carousel-item {
transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Layered child animations — text rises from below, image glides in from the side.
Tightened timings so the slide feels snappy, not laggy. */
.hero-split-carousel .carousel-item .hero-split-text,
.hero-split-carousel .carousel-item .hero-split-image {
opacity: 0;
will-change: transform, opacity;
}
.hero-split-carousel .carousel-item .hero-split-text {
transform: translateY(16px);
transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1) 60ms,
transform 380ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}
.hero-split-carousel .carousel-item .hero-split-image {
transform: translateX(28px);
transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1) 100ms,
transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}
.hero-split-carousel .carousel-item.active .hero-split-text,
.hero-split-carousel .carousel-item.active .hero-split-image {
opacity: 1;
transform: translate(0);
}
/* When sliding to previous, image glides in from the LEFT instead */
.hero-split-carousel .carousel-item.carousel-item-prev:not(.carousel-item-end) .hero-split-image,
.hero-split-carousel .carousel-item-prev.active .hero-split-image {
transform: translateX(-28px);
}
/* Reduced motion — respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
.hero-split-carousel.carousel-fade .carousel-item { transition: none !important; }
.hero-split-carousel .carousel-item .hero-split-text,
.hero-split-carousel .carousel-item .hero-split-image {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.hero-flourish, .hero-line, .hero-spark { animation: none !important; }
}
/* Text colours tuned for the dark burgundy backdrop */
.hero-split-text {
color: #fbe9bf;
position: relative;
z-index: 2;
}
.hero-split-text h1 {
font-family: var(--vmc-font-display);
font-size: clamp(2rem, 4.6vw, 3.4rem);
line-height: 1.05;
margin: 0 0 1rem;
color: #ffeebf;
}
.hero-split-text h1 em {
color: var(--vmc-gold-soft);
font-style: normal;
}
/* Gold-gradient title finish — fixed metallic gradient clipped to the
text; direction is set per-slide via the --gold-dir custom property
(default top→bottom). Scoped under `.hero-split-text h1` so it beats
that rule's `color` (which would otherwise hide the clip in Firefox). */
.hero-split-text h1.hero-title-gold {
background: linear-gradient(var(--gold-dir, 180deg),
#fff6d2 0%,
#f6d889 26%,
#d8af56 50%,
#a87d2c 72%,
#f3da92 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* Soft warm glow so the metal reads as luminous, not flat. */
filter: drop-shadow(0 2px 10px rgba(201, 162, 74, 0.35));
}
.hero-split-text p {
font-size: clamp(1rem, 1.5vw, 1.15rem);
color: rgba(251, 233, 191, 0.85);
max-width: 540px;
line-height: 1.55;
margin: 0 0 1.4rem;
}
.hero-split-text .hero-actions {
margin-top: 1.5rem;
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
/* Gold-bordered landscape frame — bigger, slightly thicker border, full shadow */
.hero-frame {
position: relative;
aspect-ratio: 16 / 10;
width: 100%;
max-width: 680px; /* was 560px — bigger */
margin: 0 auto;
padding: 0;
background: transparent;
border: 2.5px solid rgba(201, 162, 74, 0.9); /* slightly thicker gold line */
border-radius: 8px;
box-shadow:
0 28px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(201, 162, 74, 0.22);
overflow: hidden;
z-index: 2;
}
/* No inner hairline ring — the reference is a single clean line */
.hero-frame::before { display: none; }
.hero-frame-inner {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: var(--vmc-burgundy-deep);
background-size: cover;
background-position: center;
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-frame:hover .hero-frame-inner {
transform: scale(1.04);
}
/* Reference shows no decorative bracket corners — hide them */
.hero-frame-corner { display: none !important; }
/* Side arrows */
/* Side arrows — gold-filled circles aligned with the FRAME, not the row */
.hero-split-arrow {
position: absolute;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(--vmc-gold-deep);
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
color: var(--vmc-burgundy-deep);
display: grid;
place-items: center;
font-size: 1.1rem;
box-shadow: 0 6px 14px rgba(140, 112, 38, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
z-index: 4;
cursor: pointer;
/* Anchor to the same vertical mid-point as the FRAME (the frame is the row's
tallest item, so 50% of the row matches the frame's middle on desktop) */
top: 50%;
transform: translateY(-50%);
transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.hero-split-arrow:hover,
.hero-split-arrow:focus-visible {
background: linear-gradient(180deg, var(--vmc-gold), var(--vmc-gold-deep));
color: #fff;
border-color: var(--vmc-gold-deep);
box-shadow: 0 10px 22px rgba(140, 112, 38, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
outline: none;
}
/* Centre the arrows EXACTLY on the frame's left/right border edges.
*
* Geometry — for a Bootstrap `.container` with default g-4 row gutter:
*
* container outer width = W (1320px at xxl, etc.)
* container padding-x = 12px each side
* row negative margin = -12px each side (cancels container padding so row spans W)
* col-lg-6 outer width = W / 2
* col-lg-6 padding-x = 12px each side
* frame is centered in col, max 680px, fills col on every desktop break
*
* So in container-outer-left coordinates:
* frame's LEFT edge = W/2 + 12px (col padding inside right col)
* frame's RIGHT edge = W - 12px (right col inner edge, 12px from container outer right)
*
* CSS `right: X` for an abs-positioned element offsets X from the containing
* block's outer right edge (i.e. `right: 0` = element's right edge AT outer right).
*
* Arrow has 44px diameter (radius 22px). For arrow CENTER at frame edge:
* prev → left = (W/2 + 12px) - 22px → calc(50% - 10px)
* next → right = -(W - (W - 12) - 22) = -10 → -10px
* (i.e. arrow extends 10px past the container's outer right edge,
* so its center sits at frame's right edge which is 12px inside)
*/
.hero-split-arrow-prev { left: calc(50% - 10px); }
.hero-split-arrow-next { right: -10px; }
@media (max-width: 991.98px) {
/* Mobile — arrows back to comfortable side positions */
.hero-split-arrow { width: 38px; height: 38px; font-size: 1rem; }
.hero-split-arrow-prev { left: 0.4rem; }
.hero-split-arrow-next { right: 0.4rem; }
}
/* Dots indicator — HIDDEN (was cutting the frame's drop shadow visually) */
.hero-split-dots {
display: none !important;
}
/* === Hero CTAs — primary is GOLD-FILLED with shine, secondary is wireframe === */
/* Common pill shape */
.hero-split-text .btn,
.hero-split-text .btn-gold,
.hero-split-text .btn-outline-light {
border-radius: 999px !important;
padding: 0.7rem 1.6rem !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
/* PRIMARY — golden capsule with gradient + warm shine sweep */
.hero-split-text .btn-gold {
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold)) !important;
color: var(--vmc-burgundy-deep) !important;
border: 1px solid var(--vmc-gold-deep) !important;
box-shadow: 0 6px 16px rgba(140, 112, 38, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
background-image: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold)) !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) !important;
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero-split-text .btn-gold:hover,
.hero-split-text .btn-gold:focus-visible {
background: linear-gradient(180deg, var(--vmc-gold), var(--vmc-gold-deep)) !important;
color: #fff !important;
border-color: var(--vmc-gold-deep) !important;
box-shadow: 0 14px 28px rgba(140, 112, 38, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
text-shadow: none !important;
}
/* Re-enable the global gold shine sweep on the hero primary
(same animation as the "View enquiry list" footer button).
GPU-only transform — no `left` animation. */
.hero-split-text .btn-gold::after {
display: block !important;
content: "" !important;
position: absolute !important;
top: 0;
left: 0;
width: 65%;
height: 100%;
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 45%,
rgba(255, 255, 255, 0.85) 50%,
rgba(255, 255, 255, 0.55) 55%,
transparent 100%);
transform: translate3d(-180%, 0, 0) skewX(-18deg);
-webkit-transform: translate3d(-180%, 0, 0) skewX(-18deg);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
pointer-events: none;
animation: btnShineIdle 3.6s ease-in-out infinite !important;
}
.hero-split-text .btn-gold:hover::after {
animation: btnShineFast 700ms cubic-bezier(0.22, 1, 0.36, 1) 1 !important;
}
/* SECONDARY — white wireframe, fills white on hover (text flips to burgundy) */
.hero-split-text .btn-outline-light {
background: transparent !important;
color: #fff !important;
border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
box-shadow: none !important;
}
.hero-split-text .btn-outline-light:hover,
.hero-split-text .btn-outline-light:focus-visible {
background: #fff !important;
color: var(--vmc-burgundy-deep) !important;
border-color: #fff !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28) !important;
}
/* Mobile — text first, smaller frame, dots/arrows still work */
@media (max-width: 991.98px) {
.hero-split-container { padding-top: 3rem; padding-bottom: 5rem; } /* extra bottom room for the frame shadow */
.hero-split-row { min-height: 0; }
.hero-split-text { text-align: center; }
.hero-split-text p { margin-left: auto; margin-right: auto; }
.hero-split-text .hero-actions { justify-content: center; }
.hero-frame { width: min(340px, 90%); aspect-ratio: 1 / 1; margin-top: 1.5rem; }
.hero-split-arrow { width: 38px; height: 38px; font-size: 1.05rem; }
.hero-split-arrow-prev { left: 0.25rem; }
.hero-split-arrow-next { right: 0.25rem; }
}
@media (max-width: 575.98px) {
.hero-split-text .hero-actions { flex-direction: column; align-items: stretch; gap: 0.55rem; }
.hero-split-text .hero-actions .btn { width: 100%; }
}
/* =====================================================================
UNIFIED NAVBAR ICON BUTTONS — Products / Cart / User all match
Minimal: light gold ring, transparent center
===================================================================== */
.vmc-nav-products .nav-link,
.vmc-nav-pill .nav-link,
.vmc-nav-icon,
.vmc-nav-icon-cart,
.vmc-nav-icon-user {
background: transparent !important;
border: 1.5px solid rgba(201, 162, 74, 0.45) !important;
color: #e3c98a !important;
box-shadow: none !important;
/* Smooth, springy highlight on hover — same curve as the value-card lift */
transition:
background-color 320ms cubic-bezier(0.34, 1.4, 0.64, 1),
border-color 320ms cubic-bezier(0.34, 1.4, 0.64, 1),
color 260ms ease,
box-shadow 380ms cubic-bezier(0.34, 1.4, 0.64, 1),
transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}
.vmc-nav-products .nav-link,
.vmc-nav-pill .nav-link {
height: 42px !important;
border-radius: 999px !important;
padding: 0 1.5rem !important;
font-weight: 600 !important;
}
.vmc-nav-icon,
.vmc-nav-icon-cart {
width: 42px !important;
height: 42px !important;
border-radius: 999px !important;
}
.vmc-nav-icon-user {
width: 42px !important;
height: 42px !important;
padding: 0 !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.vmc-nav-icon-user .vmc-user-avatar {
width: 36px !important;
height: 36px !important;
font-size: 1.05rem !important;
box-shadow: none !important; /* lose the extra inner gold ring — outer ring is enough */
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold)) !important;
color: #2a0a12 !important;
border-radius: 999px !important;
}
/* Hover — smooth fade-in highlight with a soft gold glow that lifts
the pill ~1px. Curve is springy so it feels alive, not snappy. */
.vmc-nav-products .nav-link:hover,
.vmc-nav-products .nav-link.active,
.vmc-nav-pill .nav-link:hover,
.vmc-nav-pill .nav-link.active,
.vmc-nav-icon:hover,
.vmc-nav-icon:focus-visible,
.vmc-nav-icon.active,
.vmc-nav-icon-cart:hover,
.vmc-nav-icon-cart:focus-visible,
.vmc-nav-icon-cart.has-items,
.vmc-nav-icon-user:hover,
.vmc-nav-icon-user.active,
.vmc-nav-icon-user.show {
background: rgba(201, 162, 74, 0.1) !important;
border-color: var(--vmc-gold) !important;
color: #d9c6a6 !important;
transform: translateY(-1px);
box-shadow:
0 0 0 3px rgba(201, 162, 74, 0), /* soft outer halo ring */
0 6px 18px rgba(201, 162, 74, 0.32), /* warm gold drop glow */
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; /* subtle top sheen */
}
/* Active-page pill stays pressed (no lift) so it feels grounded vs. hover */
.vmc-nav-products .nav-link.active,
.vmc-nav-pill .nav-link.active {
transform: none !important;
}
/* Cart icon — keep the bag glyph but in burgundy not the gold-fill version */
.vmc-nav-icon-cart i {
color: var(--vmc-burgundy-deep);
font-size: 1.05rem;
}
.vmc-nav-icon-cart:hover i { color: var(--vmc-burgundy); transform: none; }
/* Cart count badge sits on top of the gold ring */
.vmc-nav-icon-cart .cart-badge {
background: #f1d99c !important;
color: #2a0a12 !important;
border: 0px solid #fff !important;
}
/* =====================================================================
HERO MESH GRADIENT — Stripe/whatamesh-style animated canvas
===================================================================== */
/* Canvas fills the hero. Reads the four colour vars below (and a base colour)
and renders 4 drifting radial blobs with screen-blend so they mix like light. */
canvas#hero-gradient-canvas.hero-split-bg {
/* Brand mesh palette — change here to retheme the hero in one place */
--gradient-color-1: #2E1F1B; /* burgundy */
--gradient-color-2: #3a0d18; /* burgundy-deep */
--gradient-color-3: #471A23; /* gold */
--gradient-color-4: #7a1a32; /* burgundy-soft */
--gradient-base: #5E4B43; /* base fill behind blobs */
display: block;
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
/* Solid fallback so the area still looks intentional before/without JS */
background:
radial-gradient(circle at 80% 20%, rgba(201, 162, 74, 0.22), transparent 55%),
radial-gradient(circle at 10% 80%, rgba(122, 26, 50, 0.45), transparent 60%),
linear-gradient(135deg, var(--vmc-burgundy-deep) 0%, var(--vmc-burgundy) 60%, #2a0a12 100%);
animation: none !important;
}
/* The old `::before` / `::after` decorative layers on .hero-split-bg are
meaningless on a element — kill them to be safe. */
canvas#hero-gradient-canvas.hero-split-bg::before,
canvas#hero-gradient-canvas.hero-split-bg::after {
display: none !important;
content: none !important;
}
/* =====================================================================
Stability fixes — carousel arrows + mobile FAB rail
===================================================================== */
.hero-split-arrow {
pointer-events: auto;
touch-action: manipulation;
}
/* Safe fallback positions before JS fine-tunes them against the active frame */
.hero-split-arrow-prev { left: calc(50% + 12px); }
.hero-split-arrow-next { right: 12px; }
@media (max-width: 991.98px) {
.hero-split-arrow {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-split-arrow-prev { left: 0.75rem; }
.hero-split-arrow-next { right: 0.75rem; }
:root {
--vmc-fab-gap: 12px;
--vmc-fab-size: 52px;
--vmc-fab-edge: 14px;
}
.whatsapp-fab {
width: var(--vmc-fab-size) !important;
height: var(--vmc-fab-size) !important;
right: calc(env(safe-area-inset-right, 0px) + var(--vmc-fab-edge)) !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vmc-fab-edge)) !important;
font-size: 1.45rem !important;
z-index: 1090 !important;
touch-action: manipulation;
}
.vmc-cart-fab {
width: var(--vmc-fab-size) !important;
height: var(--vmc-fab-size) !important;
right: calc(env(safe-area-inset-right, 0px) + var(--vmc-fab-edge)) !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vmc-fab-edge) + var(--vmc-fab-size) + var(--vmc-fab-gap)) !important;
font-size: 1.35rem !important;
z-index: 1091 !important;
touch-action: manipulation;
}
}
@media (max-width: 575px) {
:root {
--vmc-fab-size: 50px;
--vmc-fab-edge: 12px;
}
.whatsapp-fab { font-size: 1.38rem !important; }
.vmc-cart-fab { font-size: 1.28rem !important; }
}
@media (hover: none) and (pointer: coarse) {
.hero-split-arrow:hover,
.hero-split-arrow:focus-visible,
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible,
.vmc-cart-fab:hover,
.vmc-cart-fab:focus-visible {
transform: none !important;
}
}
/* =====================================================================
Bottom carousel control pill — replaces side arrows
===================================================================== */
.hero-split-arrow {
display: none !important;
}
.hero-split-controls {
position: absolute;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.35rem 0.45rem;
border-radius: 999px;
background: rgba(32, 10, 17, 0.54);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px) saturate(135%);
-webkit-backdrop-filter: blur(14px) saturate(135%);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.hero-split-pill-btn {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 999px;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.76);
display: inline-grid;
place-items: center;
font-size: 0.92rem;
transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.hero-split-pill-btn:hover,
.hero-split-pill-btn:focus-visible {
background: rgba(255, 255, 255, 0.08);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
outline: none;
transform: translateY(-1px);
}
.hero-split-dots {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 0;
padding: 0 0.1rem;
}
/* Each dot is a *fixed-width* hit-target (18px) so the row never reflows
between active states — siblings never shift mid-swipe. The visible
indicator is a centred ::before pseudo that uses transform: scaleX()
to morph between a 7px circle (inactive) and a full 18px pill (active).
transform is GPU-composited, so rapid swipes can never leave a dot
stuck at an in-between width (the "half pill" bug). */
.hero-split-dots button {
position: relative;
width: 18px;
height: 18px; /* taller hit target for finger taps */
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
/* Keep the click target tappable but invisible — visuals live in ::before. */
-webkit-appearance: none;
appearance: none;
opacity: 1;
transition: none;
}
.hero-split-dots button::before {
/* Centred via left:50% + translateX(-50%) so only width animates;
transform stays constant. Width is animated (not scaleX) so the
border-radius produces a true circle/pill at every frame instead
of the pinched-stadium artefact scaleX created. Because the
indicator is position:absolute inside a fixed-width button, the
width animation never reflows the surrounding flex row. */
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
transform: translate(-50%, -50%);
transition: width 220ms cubic-bezier(0.34, 1.36, 0.64, 1),
background 200ms ease,
opacity 200ms ease;
will-change: width;
pointer-events: none;
}
.hero-split-dots button:hover::before {
background: rgba(255, 255, 255, 0.78);
}
.hero-split-dots button.active::before,
.hero-split-dots button[aria-current="true"]::before {
width: 18px; /* true stadium pill, no pinching */
background: #fff;
}
.hero-split-dots button:focus-visible {
outline: none;
}
.hero-split-dots button:focus-visible::before {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}
@media (max-width: 991.98px) {
.hero-split-controls {
bottom: 1rem;
padding: 0.32rem 0.42rem;
gap: 0.32rem;
}
.hero-split-pill-btn {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 0.88rem;
}
.hero-split-dots {
gap: 0.34rem;
}
/* Slightly tighter pill on mobile — same width-animation approach. */
.hero-split-dots button {
width: 16px;
}
.hero-split-dots button::before {
width: 6px;
height: 6px;
}
.hero-split-dots button.active::before,
.hero-split-dots button[aria-current="true"]::before {
width: 16px;
height: 6px;
}
}
@media (max-width: 575px) {
.hero-split-controls {
bottom: 0.85rem;
max-width: calc(100% - 1.5rem);
}
}
/* =====================================================================
MOBILE NAVBAR — clean, fluid, no-jank (final overrides)
===================================================================== */
@media (max-width: 991.98px) {
/* Navbar bar itself: tighter, still dark */
.vmc-nav {
padding: 0.55rem 0 !important;
}
.vmc-nav .container {
padding-left: 1rem;
padding-right: 1rem;
}
/* Force navbar header to stay on a single line — brand on the left,
bell + hamburger pinned to the right. Without this, the Playfair
brand name pushes the icons onto a second row on narrow phones. */
.vmc-nav .container {
flex-wrap: nowrap !important;
min-width: 0;
}
.vmc-nav .navbar-brand {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.vmc-nav .brand-text {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
/* Mobile bell + hamburger must NOT shrink — they keep their fixed
circular footprints; the brand text absorbs the slack instead. */
.vmc-mobile-bell,
.vmc-nav .navbar-toggler {
flex: 0 0 auto;
}
/* Brand — slightly smaller on phones, ellipsis on overflow. */
.vmc-nav .brand-name {
font-size: 1.15rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.vmc-nav .brand-tag {
font-size: 0.62rem;
letter-spacing: 0.18em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
/* On very narrow phones, drop the tagline to reclaim space for the
brand name + actions. */
@media (max-width: 420px) {
.vmc-nav .brand-tag { display: none !important; }
.vmc-nav .brand-name { font-size: 1.05rem; }
.vmc-nav .brand-divider { display: none !important; }
.vmc-mobile-bell { margin-right: 0.3rem; }
}
@media (max-width: 991.98px) {
/* (re-open the lg breakpoint so following rules keep working — the
original block continues below.) */
/* Hamburger — a clear gold-bordered pill that doesn't conflict with bs-icon weirdness */
.vmc-nav .navbar-toggler {
background: rgba(201, 162, 74, 0.12) !important;
border: 1.5px solid rgba(201, 162, 74, 0.55) !important;
color: var(--vmc-gold-soft) !important;
width: 42px;
height: 42px;
padding: 0 !important;
border-radius: 999px !important;
display: inline-grid;
place-items: center;
font-size: 1.1rem;
line-height: 1;
transition: background 180ms ease, transform 180ms ease;
}
.vmc-nav .navbar-toggler:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.32) !important;
}
.vmc-nav .navbar-toggler[aria-expanded="true"] {
background: var(--vmc-gold) !important;
color: var(--vmc-burgundy-deep) !important;
}
.vmc-nav .navbar-toggler i { font-size: 1.3rem; }
/* Collapsed sheet — overlay (absolute) + GPU fade. NO height animation
(height = layout = repaints body's fixed gradients → the leggy 2-step
close). Blur removed (cost + flicker). This block wins over the earlier
duplicate, so the real fix lives here. */
/* Driven by a custom toggle (.is-open) instead of Bootstrap collapse, so
BOTH open AND close animate via CSS (Bootstrap's height-collapse could
only do one direction cleanly + caused the leg). Always display:block;
visibility/opacity/transform do the show/hide. */
.vmc-nav .navbar-collapse {
display: block !important;
position: absolute !important;
top: 100%;
left: 0;
right: 0;
z-index: 1035;
height: auto !important;
background: #2a0a12 !important;
border: 1px solid rgba(201, 162, 74, 0.28) !important;
border-top: 0 !important;
border-radius: 0 0 14px 14px !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5) !important;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) translateZ(0);
-webkit-transform: translateY(-8px) translateZ(0);
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 220ms;
will-change: transform, opacity;
pointer-events: none;
}
.vmc-nav .navbar-collapse .vmc-nav-list { padding: 0.4rem 0 !important; }
.vmc-nav .navbar-collapse.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0) translateZ(0);
-webkit-transform: translateY(0) translateZ(0);
pointer-events: auto;
transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Staggered item reveal (mirrors .vmc-user-dropdown--rich rows). On open
items hold opacity 0 during their delay (animation `both`) then rise in.
On close, .is-open drops → items revert instantly while the panel
fades + lifts out. */
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item {
animation: vmcUserDropdownRowIn 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(1) { animation-delay: 40ms; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(2) { animation-delay: 75ms; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(3) { animation-delay: 110ms; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(4) { animation-delay: 145ms; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(5) { animation-delay: 180ms; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(6) { animation-delay: 215ms; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(7) { animation-delay: 250ms; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item:nth-child(n+8) { animation-delay: 285ms; }
/* Force list to stack cleanly */
.vmc-nav-list {
flex-direction: column !important;
gap: 0 !important;
align-items: stretch !important;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
/* Each row: full-width, generous tap target, separator below */
.vmc-nav-list > .nav-item {
width: 100%;
border-bottom: 1px solid rgba(201, 162, 74, 0.1) !important;
}
.vmc-nav-list > .nav-item:last-child {
border-bottom: 0 !important;
}
/* Universal row style — text only, no chrome, no icons */
.vmc-nav-list > .nav-item > .nav-link,
.vmc-nav-list > .nav-item > a {
display: flex !important;
align-items: center;
width: 100% !important;
min-height: 54px;
padding: 0.95rem 1.4rem !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: #f6e8c8 !important;
font-size: 1rem !important;
font-weight: 500 !important;
letter-spacing: 0.01em;
line-height: 1.2;
box-shadow: none !important;
transform: none !important;
text-decoration: none;
}
/* Hide only the dropdown caret on mobile — icons are now shown as
gold-bordered bubbles (see "Mobile nav: icon rows" block below). */
.vmc-nav-list .dropdown-toggle::after {
display: none !important;
}
/* The inline labels for cart/account (hidden on desktop) become visible */
.vmc-nav-list .vmc-nav-icon-label {
display: inline !important;
color: inherit !important;
font-weight: inherit !important;
margin: 0 !important;
}
/* Cart count: small gold chip pinned right */
.vmc-nav-list .cart-count.cart-badge,
.vmc-nav-list .cart-badge {
position: static !important;
margin-left: auto !important;
background: var(--vmc-gold) !important;
color: var(--vmc-burgundy-deep) !important;
border: 0 !important;
min-width: 22px !important;
height: 22px !important;
font-size: 0.74rem !important;
font-weight: 800 !important;
padding: 0 7px !important;
border-radius: 999px;
line-height: 22px;
animation: none !important;
box-shadow: none !important;
display: inline-grid !important;
place-items: center;
}
/* Hover state — subtle gold wash, no transforms */
.vmc-nav-list > .nav-item > .nav-link:hover,
.vmc-nav-list > .nav-item > a:hover {
background: rgba(201, 162, 74, 0.1) !important;
color: #fff !important;
}
/* Hide any nested dropdown menus — Products and Account behave as direct links */
.vmc-nav .navbar-collapse .dropdown-menu {
display: none !important;
}
}
/* =====================================================================
FLOATING CART FAB — MOBILE ONLY (hidden on desktop)
Sits just above the WhatsApp FAB. Hidden via CSS when cart is empty.
===================================================================== */
.vmc-cart-fab {
/* DESKTOP DEFAULT — hidden entirely. Only renders below the lg breakpoint. */
display: none !important;
}
@media (max-width: 991.98px) {
.vmc-cart-fab {
display: inline-flex !important;
position: fixed !important;
right: 18px;
bottom: 86px; /* just ABOVE the WhatsApp FAB (56 + 12 gap + 18 bottom) */
z-index: 1040;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vmc-gold-soft) 0%, var(--vmc-gold) 55%, var(--vmc-gold-deep) 100%) !important;
color: var(--vmc-burgundy-deep) !important;
align-items: center;
justify-content: center;
font-size: 1.5rem;
/* Single clean gold-deep border line — no white inner ring */
border: 1px solid var(--vmc-gold-deep) !important;
/* Refined shadow: warm drop shadow + subtle inset highlight for depth */
box-shadow:
0 6px 18px rgba(140, 112, 38, 0.4),
0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
isolation: isolate;
overflow: visible !important;
/* Own GPU compositor layer — keeps the FAB paint independent of the
carousel/canvas paints. `transform` is NOT in the baseline transition
list, so any layout-driven transform change cannot animate. */
transform: none !important;
backface-visibility: visible;
will-change: auto !important;
animation: none !important;
transition: opacity 220ms ease, box-shadow 200ms ease, background 200ms ease;
text-decoration: none;
}
/* Hover ONLY — explicitly add transform to the transition list */
.vmc-cart-fab:hover,
.vmc-cart-fab:focus-visible {
color: var(--vmc-burgundy-deep) !important;
transform: none !important;
box-shadow:
0 12px 26px rgba(140, 112, 38, 0.55),
0 1px 0 rgba(255, 255, 255, 0.35) inset !important;
transition: box-shadow 180ms ease !important;
}
/* === Count badge — pinned to the corner, NEVER inside the button === */
/* The badge has both .cart-fab-count AND .cart-count classes so the JS sync
finds it. The global .cart-count rules tend to win the cascade, so we
force the corner-badge layout with high specificity + !important. */
.vmc-cart-fab > .cart-fab-count,
.vmc-cart-fab > .cart-fab-count.cart-count,
.vmc-cart-fab > .cart-fab-count.cart-count.cart-badge {
position: absolute !important;
top: -6px !important;
right: -6px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
min-width: 22px !important;
width: auto !important;
height: 22px !important;
padding: 0 6px !important;
border-radius: 999px !important;
background: var(--vmc-burgundy) !important;
color: #fff !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
line-height: 18px !important; /* 22 - 2*2 border = 18 */
text-align: center !important;
border: 2px solid #fff !important;
box-shadow: 0 3px 8px rgba(91, 18, 38, 0.45) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 2;
animation: none !important;
transform: none !important;
}
/* Hidden state — opacity + visibility only, no transform involved
so carousel slide animations can't inadvertently "ride" on the FAB. */
.vmc-cart-fab[data-cart-empty="1"] {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Belt-and-braces: kill every animation in the FAB subtree */
.vmc-cart-fab,
.vmc-cart-fab * {
animation-name: none !important;
}
}
@media (max-width: 575px) {
.vmc-cart-fab {
width: 50px !important;
height: 50px !important;
font-size: 1.3rem !important;
right: 14px !important;
bottom: 76px !important;
}
.vmc-cart-fab > .cart-fab-count,
.vmc-cart-fab > .cart-fab-count.cart-count,
.vmc-cart-fab > .cart-fab-count.cart-count.cart-badge {
min-width: 20px !important;
height: 20px !important;
font-size: 0.66rem !important;
line-height: 16px !important;
top: -5px !important;
right: -5px !important;
}
}
/* =====================================================================
Final bugfix overrides — these win the cascade
===================================================================== */
.hero-split-arrow {
pointer-events: auto;
touch-action: manipulation;
}
.hero-split-arrow-prev { left: calc(50% + 12px); }
.hero-split-arrow-next { right: 12px; }
@media (max-width: 991.98px) {
:root {
--vmc-fab-gap-final: 12px;
--vmc-fab-size-final: 52px;
--vmc-fab-edge-final: 14px;
}
.hero-split-arrow {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-split-arrow-prev { left: 0.75rem; }
.hero-split-arrow-next { right: 0.75rem; }
.whatsapp-fab {
width: var(--vmc-fab-size-final) !important;
height: var(--vmc-fab-size-final) !important;
right: calc(env(safe-area-inset-right, 0px) + var(--vmc-fab-edge-final)) !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vmc-fab-edge-final)) !important;
font-size: 1.45rem !important;
z-index: 1090 !important;
touch-action: manipulation;
}
.vmc-cart-fab {
width: var(--vmc-fab-size-final) !important;
height: var(--vmc-fab-size-final) !important;
right: calc(env(safe-area-inset-right, 0px) + var(--vmc-fab-edge-final)) !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vmc-fab-edge-final) + var(--vmc-fab-size-final) + var(--vmc-fab-gap-final)) !important;
font-size: 1.35rem !important;
z-index: 1091 !important;
touch-action: manipulation;
}
}
@media (max-width: 575px) {
:root {
--vmc-fab-size-final: 50px;
--vmc-fab-edge-final: 12px;
}
.whatsapp-fab { font-size: 1.38rem !important; }
.vmc-cart-fab { font-size: 1.28rem !important; }
}
@media (hover: none) and (pointer: coarse) {
.hero-split-arrow:hover,
.hero-split-arrow:focus-visible,
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible,
.vmc-cart-fab:hover,
.vmc-cart-fab:focus-visible {
transform: none !important;
}
}
/* =====================================================================
OTP digit-box input — used on login (SMS step), register-verify, and
verify pages. Renders 6 square cells with gold focus rings, joined by
a thin divider rule between cells 3 & 4 for readability.
===================================================================== */
.otp-digits {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin: 0.25rem 0;
}
.otp-digit {
width: 3rem;
height: 3.5rem;
padding: 0;
text-align: center;
font-family: var(--vmc-font-sans);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: var(--vmc-coffee-deep, #3a221a);
background: #fff;
border: 1.5px solid var(--vmc-line, #e3d6b8);
border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(40, 22, 12, 0.05);
transition: border-color 160ms ease,
box-shadow 160ms ease,
transform 160ms ease,
background 160ms ease;
caret-color: var(--vmc-gold-deep, #8b6a1f);
-webkit-appearance: none;
appearance: none;
}
.otp-digit::-webkit-outer-spin-button,
.otp-digit::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.otp-digit:hover { border-color: var(--vmc-gold-soft, #d6b768); }
.otp-digit:focus,
.otp-digit:focus-visible {
outline: none;
border-color: var(--vmc-gold, #c9a24a);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transform: translateY(-1px);
}
.otp-digit[value]:not([value=""]) {
border-color: var(--vmc-gold, #c9a24a);
background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
}
/* OTP field state machine — driven by app.js classes on .otp-digits:
.is-complete every cell filled (completeness cue, no server check)
.is-checking live correctness request in flight (live-check screens)
.is-valid server confirmed the typed code is CORRECT → green
.is-invalid server confirmed the typed code is WRONG → red
On live-check screens (reset-password) the green/red is real correctness.
On screens without live-check, .is-complete alone shows the green "ready"
cue. We never paint plain .is-complete green while a live check is pending
or has resolved — otherwise a wrong code would still look green. */
.otp-digits {
position: relative;
width: -moz-fit-content;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ---- GREEN (correct, or "complete" on non-live screens) ---- */
.otp-digits.is-valid .otp-digit,
.otp-digits.is-complete:not([data-otp-check-url]) .otp-digit {
border-color: #3aa564;
background: linear-gradient(180deg, #f2fbf5 0%, #fff 100%);
color: #1f7a45;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(20, 70, 40, 0.08);
}
.otp-digits.is-valid .otp-digit:nth-child(3)::after,
.otp-digits.is-complete:not([data-otp-check-url]) .otp-digit:nth-child(3)::after {
background: #9bd6b1;
}
.otp-digits.is-valid .otp-digit:focus,
.otp-digits.is-valid .otp-digit:focus-visible,
.otp-digits.is-complete:not([data-otp-check-url]) .otp-digit:focus,
.otp-digits.is-complete:not([data-otp-check-url]) .otp-digit:focus-visible {
border-color: #2f9457;
box-shadow: 0 0 0 3px rgba(58, 165, 100, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.otp-digits.is-valid::after,
.otp-digits.is-complete:not([data-otp-check-url])::after {
content: "\2713"; /* ✓ */
position: absolute;
top: -0.55rem;
right: -0.55rem;
width: 1.4rem;
height: 1.4rem;
display: grid;
place-items: center;
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
color: #fff;
background: #3aa564;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(31, 122, 69, 0.4),
0 0 0 3px #fff;
animation: otpBadgePop 220ms ease;
pointer-events: none;
}
/* ---- RED (wrong code) ---- */
.otp-digits.is-invalid .otp-digit {
border-color: #d6453c;
background: linear-gradient(180deg, #fdf2f1 0%, #fff 100%);
color: #a3322b;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(90, 25, 20, 0.08);
}
.otp-digits.is-invalid .otp-digit:nth-child(3)::after {
background: #f0a39d;
}
.otp-digits.is-invalid .otp-digit:focus,
.otp-digits.is-invalid .otp-digit:focus-visible {
border-color: #c23a31;
box-shadow: 0 0 0 3px rgba(214, 69, 60, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.otp-digits.is-invalid::after {
content: "\2715"; /* ✕ */
position: absolute;
top: -0.55rem;
right: -0.55rem;
width: 1.4rem;
height: 1.4rem;
display: grid;
place-items: center;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
color: #fff;
background: #d6453c;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(163, 50, 43, 0.4),
0 0 0 3px #fff;
animation: otpBadgePop 220ms ease;
pointer-events: none;
}
/* ---- CHECKING (request in flight) — subtle dimming, no colour yet ---- */
.otp-digits.is-checking .otp-digit {
opacity: 0.85;
}
@keyframes otpBadgePop {
0% { transform: scale(0.4); opacity: 0; }
60% { transform: scale(1.12); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.otp-digits.is-valid::after,
.otp-digits.is-complete:not([data-otp-check-url])::after,
.otp-digits.is-invalid::after { animation: none; }
}
/* Separator hyphen between 3rd and 4th cell — common OTP pattern. */
.otp-digits .otp-digit:nth-child(3) { margin-right: 0.35rem; position: relative; }
.otp-digits .otp-digit:nth-child(3)::after {
content: "";
position: absolute;
right: -0.45rem;
top: 50%;
width: 0.55rem;
height: 2px;
background: var(--vmc-line, #e3d6b8);
transform: translateY(-50%);
border-radius: 2px;
pointer-events: none;
}
@media (max-width: 420px) {
.otp-digits { gap: 0.4rem; }
.otp-digit { width: 2.5rem; height: 3rem; font-size: 1.25rem; border-radius: 10px; }
.otp-digits .otp-digit:nth-child(3) { margin-right: 0.25rem; }
.otp-digits .otp-digit:nth-child(3)::after { right: -0.35rem; width: 0.4rem; }
}
/* =====================================================================
OTP-entry redesign — used on login.php (otp step), verify.php, and
reset-password.php. Envelope icon + title block on top, large OTP
cells in the middle, a 3-column action row (note · resend · use
different number) separated by a hairline, and a bold submit CTA.
===================================================================== */
.auth-otp-card { padding: 1.6rem 1.6rem 1.5rem; }
.auth-otp-head {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.4rem;
}
.auth-otp-icon {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(201, 162, 74, 0.14), rgba(201, 162, 74, 0.04));
border: 1px solid rgba(201, 162, 74, 0.35);
color: var(--vmc-burgundy-deep);
display: inline-grid;
place-items: center;
font-size: 1.55rem;
position: relative;
}
/* Tiny gold-checkmark badge in the bottom-right of the envelope chip. */
.auth-otp-icon::after {
content: "";
position: absolute;
right: -2px;
bottom: -2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--vmc-gold);
border: 2px solid #fff;
}
.auth-otp-icon::before {
content: "\F26B"; /* bi-check */
font-family: "bootstrap-icons";
position: absolute;
right: -1px;
bottom: -3px;
width: 18px;
height: 18px;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
z-index: 2;
}
.auth-otp-title h1 {
font-size: 1.55rem;
line-height: 1.15;
color: var(--vmc-burgundy-deep);
margin: 0;
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-weight: 700;
}
.auth-otp-title p {
margin: 0.35rem 0 0;
color: var(--vmc-muted);
font-size: 0.94rem;
line-height: 1.45;
}
.auth-otp-title p strong {
color: var(--vmc-burgundy-deep);
font-weight: 700;
}
/* Hairline rule between OTP cells and the action row. */
.auth-otp-divider {
border: 0;
border-top: 1px solid var(--vmc-line);
margin: 1.4rem 0 1rem;
}
/* 3-column action row. Falls back to a single column on phones. */
.auth-otp-actions {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 1rem;
}
.auth-otp-actions--two { grid-template-columns: 1fr 1fr; }
/* Single-action variant — centred Resend with no sibling. */
.auth-otp-actions--one { grid-template-columns: 1fr; justify-items: center; }
.auth-otp-actions--one .auth-otp-action { width: auto; padding-left: 0.85rem; padding-right: 0.85rem; }
.auth-otp-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.4rem 0.5rem;
border-radius: 8px;
font-family: var(--vmc-font-sans);
font-size: 0.9rem;
font-weight: 500;
color: var(--vmc-muted);
text-decoration: none;
background: transparent;
border: 0;
cursor: default;
transition: background 160ms ease, color 160ms ease;
line-height: 1.2;
white-space: nowrap;
}
.auth-otp-action i {
color: var(--vmc-gold-deep);
font-size: 1.05rem;
flex: 0 0 auto;
}
/* Interactive variants — clickable button + link. */
.auth-otp-action--btn,
.auth-otp-action--link {
cursor: pointer;
color: var(--vmc-burgundy);
}
.auth-otp-action--btn:hover,
.auth-otp-action--btn:focus-visible,
.auth-otp-action--link:hover,
.auth-otp-action--link:focus-visible {
background: rgba(201, 162, 74, 0.10);
color: var(--vmc-burgundy-deep);
outline: none;
}
.auth-otp-action--btn:disabled {
color: var(--vmc-muted);
cursor: not-allowed;
background: transparent;
}
/* Cooldown state — softer styling so the user reads "wait" not "click". */
.auth-otp-action--btn.is-cooling {
color: var(--vmc-muted);
background: rgba(0, 0, 0, 0.02);
font-variant-numeric: tabular-nums; /* tidy ticking digits */
font-weight: 600;
letter-spacing: 0.02em;
}
.auth-otp-action--btn.is-cooling i { color: var(--vmc-muted); }
/* Phones — stack the action row so labels don't overlap. */
@media (max-width: 575.98px) {
.auth-otp-actions,
.auth-otp-actions--two {
grid-template-columns: 1fr;
gap: 0.1rem;
}
.auth-otp-action { justify-content: flex-start; padding: 0.55rem 0.6rem; }
}
/* Larger primary submit CTA — the screenshot's full-width pill with
shield-check icon. Uses the existing .btn-vmc but bumps the padding
and adds a gold outline ring so it pops against the cream card. */
.btn.btn-vmc.auth-otp-submit {
padding: 0.85rem 1.4rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: 14px;
border: 1px solid rgba(201, 162, 74, 0.55);
box-shadow: 0 8px 22px -14px rgba(58, 13, 24, 0.55);
}
.btn.btn-vmc.auth-otp-submit i { font-size: 1.05rem; }
@media (max-width: 420px) {
.auth-otp-card { padding: 1.2rem; }
.auth-otp-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 1.3rem; }
.auth-otp-title h1 { font-size: 1.35rem; }
.auth-otp-title p { font-size: 0.88rem; }
.btn.btn-vmc.auth-otp-submit { padding: 0.75rem 1.1rem; font-size: 0.95rem; }
}
/* Helper row under the digits (e.g. "Didn't get it? Resend"). */
.otp-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--vmc-muted, #7a6e58);
}
.otp-meta a,
.otp-meta button.btn-link-gold {
color: var(--vmc-gold-deep, #8b6a1f);
text-decoration: none;
font-weight: 600;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.otp-meta a:hover,
.otp-meta button.btn-link-gold:hover { text-decoration: underline; }
/* =====================================================================
MOBILE NAV — icon rows (gold-bordered bubble · label · right chevron)
Below the navbar collapse breakpoint (lg), each menu item renders as
a row matching the reference design:
[ ◯ icon ] Label ›
Followed by a dedicated Logout / Sign-in row at the bottom.
===================================================================== */
@media (max-width: 991.98px) {
/* Each row link is a flex container: leading bubble, label, chevron. */
.vmc-nav-list > .nav-item > .nav-link,
.vmc-nav-list > .nav-item > a {
display: flex !important;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1.1rem !important;
position: relative;
}
/* Right-pointing chevron at the end of each main row. */
.vmc-nav-list > .nav-item > .nav-link::after,
.vmc-nav-list > .nav-item > a::after {
content: "\f285"; /* bi-chevron-right glyph */
font-family: "bootstrap-icons";
margin-left: auto;
font-size: 0.95rem;
color: rgba(201, 162, 74, 0.7);
line-height: 1;
flex: 0 0 auto;
transition: transform 180ms ease, color 180ms ease;
}
.vmc-nav-list > .nav-item > .nav-link:hover::after,
.vmc-nav-list > .nav-item > a:hover::after {
color: var(--vmc-gold-soft);
transform: translateX(3px);
}
/* Re-enable icons on mobile — they're the centrepiece of this design. */
.vmc-nav-list .nav-link i.bi,
.vmc-nav-list a i.bi,
.vmc-nav-list .vmc-user-avatar {
display: inline-grid !important;
place-items: center;
}
/* Leading icon — FLAT gold glyph. No circle, no border, no background.
A fixed 28px slot keeps every row's label perfectly column-aligned. */
.vmc-nav-list .vmc-nav-leading-icon,
.vmc-nav-list .vmc-nav-icon > i.bi,
.vmc-nav-list .vmc-nav-icon-cart > i.bi,
.vmc-nav-list .vmc-nav-icon-user .vmc-user-avatar {
width: 28px !important;
height: 28px !important;
border-radius: 0 !important;
border: 0 !important;
background: transparent !important;
color: var(--vmc-gold-soft) !important;
font-size: 1.2rem !important;
line-height: 1 !important;
flex: 0 0 28px !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Avatar initial — keeps the circular gold-bordered "coin" so the
user's identity reads at a glance, while all other rows stay flat. */
.vmc-nav-list .vmc-nav-icon-user .vmc-user-avatar {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-weight: 700;
font-size: 0.95rem !important;
border-radius: 999px !important;
border: 1.5px solid rgba(201, 162, 74, 0.7) !important;
background: rgba(201, 162, 74, 0.1) !important;
color: var(--vmc-gold-soft) !important;
}
/* Override the desktop's `me-1` margin on any icon that still has it. */
.vmc-nav-list .vmc-nav-leading-icon.me-1 { margin-right: 0 !important; }
/* Active row highlight — soft gold wash + brighter glyph. */
.vmc-nav-list > .nav-item > .nav-link.active,
.vmc-nav-list > .nav-item > a.active {
background: rgba(201, 162, 74, 0.08) !important;
}
.vmc-nav-list > .nav-item > .nav-link.active .vmc-nav-leading-icon,
.vmc-nav-list > .nav-item > a.active .vmc-nav-leading-icon,
.vmc-nav-list > .nav-item > .nav-link.active i.bi {
color: var(--vmc-gold) !important;
}
/* Cart count badge — gold pill nudged just before the chevron. */
.vmc-nav-list .vmc-nav-icon-cart .cart-badge,
.vmc-nav-list .cart-count.cart-badge {
position: static !important;
margin-left: auto !important;
margin-right: 0.6rem !important;
background: var(--vmc-gold) !important;
color: var(--vmc-burgundy-deep) !important;
border: 0 !important;
min-width: 26px !important;
height: 26px !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
padding: 0 8px !important;
border-radius: 999px !important;
line-height: 26px !important;
animation: none !important;
box-shadow: none !important;
display: inline-grid !important;
place-items: center;
}
/* The dedicated Logout row sits flush against the row above (no gap).
Same row structure as the rest — only the hover tint is different. */
.vmc-nav-mobile-signout {
margin-top: 0 !important;
}
.vmc-nav-mobile-signout > .nav-link {
color: #f6e8c8 !important;
}
.vmc-nav-mobile-signout .vmc-nav-leading-icon {
color: var(--vmc-gold-soft) !important;
}
.vmc-nav-mobile-signout > .nav-link:hover {
background: rgba(255, 200, 200, 0.06) !important;
color: #fff !important;
}
.vmc-nav-mobile-signout > .nav-link:hover .vmc-nav-leading-icon {
color: #ffb4ad !important;
}
/* The user/account row uses a dropdown wrapper that can leak extra
inline spacing on mobile (margins on the hidden ).
Force the wrapper and its hidden contents to take exactly zero
height so the next row (Logout) sits flush against it. */
.vmc-nav-list .vmc-user-menu .dropdown-menu,
.vmc-nav-list .vmc-user-menu .vmc-user-dropdown {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
border: 0 !important;
}
.vmc-nav-list .vmc-user-menu {
margin: 0 !important;
padding: 0 !important;
}
}
/* On desktop, the leading icons we added for mobile shouldn't take any
visual real estate. They're already hidden by the existing
.vmc-nav-icon-label rules being d-lg-none, but the new leading icons
need an explicit desktop hide. */
@media (min-width: 992px) {
.vmc-nav-leading-icon { display: none !important; }
}
/* =====================================================================
PRODUCTS PAGE — refined filter sidebar + rich empty state
===================================================================== */
/* --- Mobile filter toggle (visible i:first-child { color: var(--vmc-gold-deep); font-size: 1.05rem; }
.filter-toggle-chev {
margin-left: auto;
color: var(--vmc-muted);
transition: transform 200ms ease;
}
.filter-toggle[aria-expanded="true"] .filter-toggle-chev { transform: rotate(180deg); }
.filter-toggle-count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--vmc-burgundy);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
}
/* --- Filter panel itself --------------------------------------------- */
.filter-panel {
padding: 1.1rem 1.1rem 1.25rem;
border-radius: 18px !important;
border: 1px solid var(--vmc-line) !important;
background: linear-gradient(180deg, #fff 0%, var(--vmc-soft) 140%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 8px 22px -14px rgba(58, 13, 24, 0.16),
0 2px 6px -3px rgba(58, 13, 24, 0.07);
position: sticky;
top: 86px;
}
.filter-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.85rem;
padding-bottom: 0.85rem;
border-bottom: 1px dashed var(--vmc-line);
}
.filter-panel-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
/* Plain Manrope sans — the body font. Keeps the filter card visually
quieter than the page title (which uses Fraunces serif). */
font-family: var(--vmc-font-sans);
font-size: 1rem;
font-weight: 700;
color: var(--vmc-burgundy-deep);
line-height: 1;
letter-spacing: 0.01em;
}
.filter-panel-title i { color: var(--vmc-gold-deep); font-size: 0.95rem; }
/* Product count pill at the top of products.php — transparent background
with a subtle gold outline, sits beside the page title. */
.product-count-pill {
display: inline-flex;
align-items: center;
padding: 0.32em 0.75em;
border: 1px solid rgba(201, 162, 74, 0.35);
border-radius: 999px;
background: transparent;
color: var(--vmc-coffee-deep);
font-family: var(--vmc-font-sans);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.2;
white-space: nowrap;
}
/* Compact label variant for paired-column filter sections (e.g. the
Metal + Gauge row), so the icon-label stays single-line in narrow
half-width cells. */
.filter-label-sm {
font-size: 0.74rem;
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--vmc-coffee-deep);
}
.filter-label-sm i { font-size: 0.78rem; color: var(--vmc-gold-deep); margin-right: 0.2rem; }
/* Tighten vertical spacing between filter sections so the panel feels
compact after the Shape filter was removed. */
.filter-panel .filter-section + .filter-section { margin-top: 0.95rem; }
/* Keep some baseline height under the products grid so when results are
minimal (0-2 items) the filter card on the left still has room for its
custom dropdowns to fully expand without being visually clipped against
the bottom of the section. */
.product-grid {
min-height: 480px;
grid-auto-rows: 360px;
align-items: stretch;
align-content: start;
transition: opacity 160ms ease-out;
}
/* While an AJAX filter is mid-flight, the grid fades to 0.55 so the
user sees something is happening without losing the previous layout
to a hard skeleton flash. Pointer events disabled so accidental
clicks during the brief transition do nothing. */
.product-grid.is-loading {
opacity: 0.55;
pointer-events: none;
}
/* Cascading fade-in for product cards as they enter the grid. Applied
to every card via :nth-child stagger — first 8 cards get a small
delay step (50ms each); cards 9+ animate together to avoid a long
trail on long result lists. Total animation ~750ms for the busiest
case, ~360ms for a single card. */
@keyframes productCardEnter {
from {
opacity: 0;
transform: translateY(10px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.product-grid .product-card {
height: 100%;
animation: productCardEnter 360ms ease-out backwards;
}
.product-grid .product-card:nth-child(1) { animation-delay: 0ms; }
.product-grid .product-card:nth-child(2) { animation-delay: 45ms; }
.product-grid .product-card:nth-child(3) { animation-delay: 90ms; }
.product-grid .product-card:nth-child(4) { animation-delay: 135ms; }
.product-grid .product-card:nth-child(5) { animation-delay: 180ms; }
.product-grid .product-card:nth-child(6) { animation-delay: 225ms; }
.product-grid .product-card:nth-child(7) { animation-delay: 270ms; }
.product-grid .product-card:nth-child(8) { animation-delay: 315ms; }
.product-grid .product-card:nth-child(n+9){ animation-delay: 360ms; }
/* Reduced-motion: skip the slide + scale, but keep a tiny opacity fade
so the swap isn't a jarring snap. */
@media (prefers-reduced-motion: reduce) {
.product-grid .product-card {
animation: none;
opacity: 1;
}
.product-grid { transition: none; }
}
@media (max-width: 991.98px) {
.product-grid {
grid-auto-rows: 350px;
}
}
@media (max-width: 575.98px) {
.product-grid {
grid-auto-rows: 330px;
}
}
/* When a dropdown can't fit below its trigger (i.e., near the bottom of
a short results section), JS adds .pf-open-up which flips the panel
above instead of below. The animation direction stays the same. */
.pf-select.pf-open-up .pf-select-panel {
top: auto;
bottom: calc(100% + 6px);
transform-origin: bottom center;
}
/* =====================================================================
PRODUCT FILTERS — DUAL-HANDLE RANGE SLIDER (.pf-range)
Two stacked native for accessibility + form submission + MOBILE use
- Custom button + listbox panel for desktop (≥768px)
The custom UI writes its value into the native and
dispatches a "change" event so the existing AJAX filter handler
in app.js continues to fire without modification.
===================================================================== */
.pf-select {
position: relative;
width: 100%;
}
/* Viewport switching: custom UI on desktop, native select on mobile.
On mobile the native dropdown gives the right OS-level touch UX
(iOS wheel / Android list). */
@media (max-width: 767.98px) {
.pf-select-trigger,
.pf-select-panel { display: none !important; }
.pf-select-native { display: block; }
}
@media (min-width: 768px) {
.pf-select-native {
/* Hidden visually on desktop but still in the DOM so form
submission + AJAX wiring keep working. position:absolute +
clip-path keeps it out of layout without breaking focus. */
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
/* The closed-state trigger button */
.pf-select-trigger {
width: 100%;
height: 44px;
padding: 0 0.9rem;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
border: 1.5px solid rgba(201, 162, 74, 0.4);
border-radius: 10px;
background: linear-gradient(180deg, #fffdf7 0%, var(--vmc-soft) 100%);
color: var(--vmc-burgundy-deep);
font-family: var(--vmc-font-sans);
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.005em;
cursor: pointer;
text-align: left;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 1px 2px rgba(91, 18, 38, 0.04);
transition:
border-color 200ms ease,
box-shadow 220ms ease,
background 200ms ease;
}
.pf-select-trigger-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pf-select-caret {
flex: 0 0 auto;
color: var(--vmc-burgundy);
font-size: 0.8rem;
transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pf-select.is-open .pf-select-caret {
transform: rotate(180deg);
}
.pf-select-trigger:hover {
border-color: var(--vmc-gold);
background: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 4px 12px rgba(201, 162, 74, 0.15);
}
.pf-select-trigger:focus-visible,
.pf-select.is-open .pf-select-trigger {
border-color: var(--vmc-gold);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 0 0 3px rgba(201, 162, 74, 0.22),
0 6px 16px rgba(201, 162, 74, 0.18);
outline: none;
}
/* The dropdown panel (listbox) */
.pf-select-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 50;
max-height: 280px;
overflow-y: auto;
padding: 0.35rem;
background: #fff;
border: 1px solid var(--vmc-gold);
border-radius: 12px;
box-shadow:
0 18px 36px rgba(91, 18, 38, 0.16),
0 4px 10px rgba(91, 18, 38, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.6) inset;
animation: pfSelectPanelIn 180ms cubic-bezier(0.4, 0, 0.2, 1);
scrollbar-width: thin;
scrollbar-color: rgba(201, 162, 74, 0.6) transparent;
}
.pf-select-panel::-webkit-scrollbar { width: 6px; }
.pf-select-panel::-webkit-scrollbar-track { background: transparent; }
.pf-select-panel::-webkit-scrollbar-thumb {
background: rgba(201, 162, 74, 0.5);
border-radius: 999px;
}
@keyframes pfSelectPanelIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Individual option row */
.pf-select-option {
width: 100%;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.7rem;
border: 0;
background: transparent;
color: var(--vmc-burgundy-deep);
border-radius: 7px;
cursor: pointer;
text-align: left;
font-family: var(--vmc-font-sans);
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.005em;
transition: background 140ms ease, color 140ms ease, padding-left 160ms ease;
}
.pf-select-option:hover,
.pf-select-option:focus-visible {
background: var(--vmc-soft);
outline: none;
padding-left: 0.85rem;
}
.pf-select-option-text {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pf-select-option-check {
flex: 0 0 auto;
color: var(--vmc-gold-deep);
font-size: 0.95rem;
opacity: 0;
transition: opacity 140ms ease;
}
.pf-select-option.is-selected {
background: linear-gradient(135deg, var(--vmc-warm) 0%, #fff 100%);
font-weight: 700;
}
.pf-select-option.is-selected .pf-select-option-check { opacity: 1; }
.filter-panel-count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
}
.filter-panel-clear {
font-size: 0.78rem;
font-weight: 700;
color: var(--vmc-burgundy);
text-decoration: none;
padding: 0.3rem 0.6rem;
border-radius: 999px;
border: 1px solid transparent;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.filter-panel-clear:hover {
background: var(--vmc-burgundy);
color: #fff;
}
/* Active filter chips (removable) — used both in sidebar + empty state */
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.95rem;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.32rem 0.65rem 0.32rem 0.6rem;
border-radius: 999px;
background: rgba(201, 162, 74, 0.12);
border: 1px solid rgba(201, 162, 74, 0.45);
color: var(--vmc-burgundy-deep);
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
line-height: 1;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.filter-chip > i:first-child { color: var(--vmc-gold-deep); font-size: 0.78rem; }
.filter-chip-x {
margin-left: 0.15rem;
font-size: 1rem;
color: var(--vmc-muted);
line-height: 1;
transition: color 160ms ease, transform 160ms ease;
}
.filter-chip:hover {
background: var(--vmc-burgundy);
border-color: var(--vmc-burgundy-deep);
color: #fff;
transform: translateY(-1px);
}
.filter-chip:hover > i:first-child,
.filter-chip:hover .filter-chip-x { color: #fff; }
.filter-chip:hover .filter-chip-x { transform: rotate(90deg); }
/* Filter sections */
.filter-section { margin-top: 0.95rem; }
.filter-section:first-of-type { margin-top: 0; }
.filter-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.4rem;
font-size: 0.7rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--vmc-burgundy-deep) !important;
}
.filter-label > i { color: var(--vmc-gold-deep); font-size: 0.8rem; }
.filter-panel .form-control,
.filter-panel .form-select {
border-radius: 10px;
border-color: var(--vmc-line-strong);
background-color: #fff;
font-size: 0.92rem;
height: 42px;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.filter-panel .form-control:focus,
.filter-panel .form-select:focus {
border-color: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
outline: none;
}
/* Search input with leading icon */
.filter-search { position: relative; }
.filter-search-icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: var(--vmc-muted);
font-size: 0.95rem;
pointer-events: none;
}
.filter-search .form-control { padding-left: 2.4rem; }
/* On mobile the panel can't be sticky — turn it off. */
@media (max-width: 991.98px) {
.filter-panel {
position: static;
top: auto;
}
}
/* --- Rich empty state for products page ------------------------------ */
.empty-state-products {
/* When the AJAX endpoint replaces the grid's innerHTML, the empty
state ends up *inside* .product-grid (a CSS grid). Spanning the
full row keeps the card full-width whether it's a sibling of the
grid (first paint) or a child of it (live-filter swap). */
grid-column: 1 / -1;
padding: 3rem 1.5rem 2.5rem;
background: linear-gradient(180deg, #fff 0%, var(--vmc-soft) 100%);
border: 1px solid var(--vmc-line);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 8px 22px -14px rgba(58, 13, 24, 0.18);
text-align: center;
}
.empty-state-icon {
width: 76px;
height: 76px;
margin: 0 auto 1rem;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #fbe9d4 0%, #f4d9b4 100%);
color: var(--vmc-gold-deep);
font-size: 2rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 6px 14px -6px rgba(140, 112, 38, 0.35);
}
.empty-state-title {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-size: 1.5rem;
font-weight: 700;
color: var(--vmc-burgundy-deep);
margin: 0 0 0.5rem;
}
.empty-state-sub {
max-width: 38ch;
margin: 0 auto 1rem;
color: var(--vmc-muted);
line-height: 1.5;
}
.empty-state-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
margin: 0 auto 1.25rem;
max-width: 520px;
}
.empty-state-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-bottom: 1.25rem;
}
.empty-state-hint {
font-size: 0.82rem;
color: var(--vmc-muted);
margin: 0;
}
.empty-state-hint i { color: var(--vmc-gold-deep); }
@media (max-width: 575.98px) {
.empty-state-products { padding: 2rem 1rem; border-radius: 14px; }
.empty-state-icon { width: 64px; height: 64px; font-size: 1.6rem; }
.empty-state-title { font-size: 1.25rem; }
}
/* =====================================================================
NOTIFICATION BELL + DROPDOWN PANEL
Two variants:
.vmc-bell--dark — on the public nav's burgundy glass strip
.vmc-bell--light — inside the admin sidebar
The dropdown panel is the same in both contexts; only the trigger
button's colours differ.
===================================================================== */
.vmc-bell {
position: relative;
display: inline-flex;
align-items: center;
}
.vmc-bell-trigger {
appearance: none;
border: 1.5px solid rgba(201, 162, 74, 0.45) !important;
background: transparent;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 999px;
display: inline-grid;
place-items: center;
color: #e3c98a;
position: relative;
transition: background 180ms ease, color 180ms ease;
}
.vmc-bell-trigger:hover,
.vmc-bell-trigger:focus-visible {
background: rgba(201, 162, 74, 0.16);
color: #d9c6a6;
outline: none;
}
.vmc-bell-trigger > i {
font-size: 1.15rem;
line-height: 1;
}
/* Unread count badge — sits in the top-right of the bell. */
.vmc-bell-badge {
position: absolute;
top: -5px;
right: -5px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--vmc-burgundy);
color: #fff;
font-size: 0.66rem;
font-weight: 800;
/* Flex-centre the count digit. line-height tricks misalign once the
2px punch-out border is added — flex centres on the cap-height. */
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-align: center;
border: 2px solid #2a0a12;
box-sizing: border-box;
box-shadow: 0 2px 6px rgba(91, 18, 38, 0.5);
}
/* Dropdown panel — absolute, opens below the trigger, gold-ringed card.
`overflow: visible` so the speech-bubble caret (::before) can sit
above the panel's top edge. Children that need clipping handle their
own border-radius (see .vmc-bell-head). */
.vmc-bell-panel {
position: absolute;
top: calc(100% + 0.6rem);
right: 0;
z-index: 1080;
width: 440px;
max-width: calc(100vw - 1.5rem);
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 18px 38px -12px rgba(58, 13, 24, 0.32),
0 6px 14px -6px rgba(58, 13, 24, 0.16);
transform-origin: top right;
animation: bellPanelIn 180ms cubic-bezier(0.34, 1.36, 0.64, 1) both;
/* Horizontal position of the speech-bubble caret. Per-context rules
override this so the caret always sits directly under its bell. */
--caret-right: 22px;
}
/* Speech-bubble caret — a rotated white square pinned to the top edge
of the panel, with matching hairline border so it blends. The hairline
covering the bottom edge of the rotated square (where it overlaps the
panel) is painted in by ::after. */
.vmc-bell-panel::before {
content: "";
position: absolute;
top: -7px;
right: var(--caret-right);
width: 14px;
height: 14px;
background: #fff;
border-left: 1px solid var(--vmc-line);
border-top: 1px solid var(--vmc-line);
transform: rotate(45deg);
border-radius: 3px 0 0 0;
z-index: 1;
pointer-events: none;
}
.vmc-bell-panel::after {
content: "";
position: absolute;
top: 0;
right: calc(var(--caret-right) - 6px);
width: 13px;
height: 1px;
background: #fff;
z-index: 2;
pointer-events: none;
}
@keyframes bellPanelIn {
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Mirror of bellPanelIn — runs when JS adds `.is-closing` and listens
for animationend before flipping `hidden`. Short duration + iOS-style
spring easing makes the close feel snappy + natural (not sharp). */
.vmc-bell-panel.is-closing {
animation: bellPanelOut 130ms cubic-bezier(0.32, 0.72, 0, 1) both;
pointer-events: none;
}
@keyframes bellPanelOut {
from { opacity: 1; transform: scale(1) translateY(0); }
to { opacity: 0; transform: scale(0.97) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.vmc-bell-panel,
.vmc-bell-panel.is-closing { animation: none; }
}
.vmc-bell-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.85rem 1rem;
background: linear-gradient(180deg, #fff 0%, #f7eedc 100%);
border-bottom: 1px solid var(--vmc-line);
/* Rounded top corners — the panel no longer clips children, so the
head bar needs its own border-radius to match the card outline. */
border-radius: 14px 14px 0 0;
color: var(--vmc-burgundy-deep);
font-size: 0.95rem;
/* Sans throughout — the display serif read as out-of-place against
the rest of the dropdown's typography. */
font-family: var(--vmc-font-sans, 'Manrope', system-ui, sans-serif);
}
.vmc-bell-head > strong {
font-weight: 700;
letter-spacing: 0.02em;
}
/* Bell-head action buttons — hairline-bordered chips. Quieter than the
filled pills, but still read as proper buttons at rest. */
.vmc-bell-markall-form,
.vmc-bell-clear-form { margin: 0; }
.vmc-bell-markall,
.vmc-bell-clear {
appearance: none;
background: transparent;
padding: 0.38rem 0.7rem;
border-radius: 999px;
font-family: var(--vmc-font-sans, 'Manrope', system-ui, sans-serif);
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
letter-spacing: 0;
text-transform: none;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.vmc-bell-markall {
color: var(--vmc-gold-deep);
border: 1px solid rgba(201, 162, 74, 0.4);
}
.vmc-bell-markall:hover,
.vmc-bell-markall:focus-visible {
background: rgba(201, 162, 74, 0.14);
border-color: var(--vmc-gold-deep);
color: var(--vmc-burgundy-deep);
outline: none;
}
.vmc-bell-clear {
color: var(--vmc-muted);
border: 1px solid var(--vmc-line);
}
.vmc-bell-clear:hover,
.vmc-bell-clear:focus-visible {
background: rgba(184, 41, 67, 0.08);
border-color: rgba(184, 41, 67, 0.4);
color: #b82943;
outline: none;
}
.vmc-bell-markall:disabled,
.vmc-bell-clear:disabled {
opacity: 0.55;
cursor: progress;
}
/* Cluster of action buttons in the bell head (mark-all + clear). */
.vmc-bell-head-actions {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
/* Empty state — peach disc icon, friendly two-line message, matches the
"no enquiries" empty state on the rest of the site. */
.vmc-bell-empty {
padding: 2.2rem 1.25rem;
text-align: center;
color: var(--vmc-muted);
}
.vmc-bell-empty i {
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 auto 0.85rem;
border-radius: 999px;
background: linear-gradient(135deg, #fbe9d4 0%, #f4d9b4 100%);
color: var(--vmc-gold-deep);
font-size: 1.5rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 4px 10px -4px rgba(140, 112, 38, 0.3);
}
.vmc-bell-empty p {
margin: 0;
font-size: 0.92rem;
font-weight: 600;
color: var(--vmc-burgundy-deep);
}
.vmc-bell-empty p + p {
margin-top: 0.25rem;
font-size: 0.78rem;
font-weight: 400;
color: var(--vmc-muted);
}
.vmc-bell-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 22rem;
overflow-y: auto;
/* The panel itself can't clip overflow any more (the speech-bubble
caret needs to stick out above the top edge). So the list region
has to clip its own children — otherwise the last item's gold
unread-rail bleeds past the panel's rounded bottom corners. */
overflow-x: hidden;
border-radius: 0 0 13px 13px;
}
/* Per-item × delete button. Sits absolutely positioned and VERTICALLY
CENTRED on the row — anchored to the right edge — instead of pinned
to the top corner. Hidden by default on desktop, revealed on row
hover; always visible on touch (no hover available). */
.vmc-bell-item { position: relative; }
.vmc-bell-item-delete {
position: absolute;
top: 50%;
right: 10px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 0;
background: rgba(0, 0, 0, 0.04);
color: var(--vmc-muted);
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
/* Centre vertically AND scale-in. translateY(-50%) compensates for
the `top: 50%` anchor. */
transform: translateY(-50%) scale(0.8);
transition: opacity 140ms ease, transform 140ms ease, background 140ms ease, color 140ms ease;
z-index: 2;
}
.vmc-bell-item-delete i { font-size: 0.72rem; line-height: 1; }
.vmc-bell-item:hover .vmc-bell-item-delete,
.vmc-bell-item:focus-within .vmc-bell-item-delete {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.vmc-bell-item-delete:hover,
.vmc-bell-item-delete:focus {
background: rgba(184, 41, 67, 0.14);
color: #b82943;
outline: none;
}
@media (hover: none) {
/* Touch devices — keep the X visible (faded) since there's no hover.
Larger hit-target so it's easy to thumb-tap. */
.vmc-bell-item-delete {
opacity: 0.55;
transform: translateY(-50%) scale(1);
width: 30px;
height: 30px;
}
.vmc-bell-item-delete i { font-size: 0.85rem; }
}
/* The row's link reserves space on the right so the × never overlaps
the time-stamp or the body text. */
.vmc-bell-item .vmc-bell-item-link { padding-right: 44px; }
.vmc-bell-item {
border-bottom: 1px solid var(--vmc-line);
}
.vmc-bell-item:last-child { border-bottom: 0; }
.vmc-bell-item-link {
display: flex;
align-items: flex-start; /* icon disc aligns with the first text row */
gap: 0.75rem;
padding: 0.85rem 1rem 0.85rem 1.1rem;
color: var(--vmc-ink);
text-decoration: none;
transition: background 160ms ease, padding 160ms ease;
position: relative;
}
/* Subtle gold left rail on every item — strengthens on hover/unread. */
.vmc-bell-item-link::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: transparent;
transition: background 160ms ease;
}
.vmc-bell-item-link:hover {
background: var(--vmc-soft);
color: var(--vmc-burgundy-deep);
}
.vmc-bell-item-link:hover::before {
background: var(--vmc-gold-soft);
}
/* Unread — light cream wash + bright gold rail on the left edge. */
.vmc-bell-item.is-unread .vmc-bell-item-link {
background: linear-gradient(90deg, rgba(201, 162, 74, 0.10), transparent 80%);
}
.vmc-bell-item.is-unread .vmc-bell-item-link::before {
background: var(--vmc-gold);
}
.vmc-bell-item.is-unread .vmc-bell-item-title { color: var(--vmc-burgundy-deep); }
.vmc-bell-item-icon {
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-grid;
place-items: center;
background: linear-gradient(135deg, #fbe9d4 0%, #f4d9b4 100%);
color: var(--vmc-gold-deep);
font-size: 1rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
transition: transform 200ms cubic-bezier(0.34, 1.36, 0.64, 1);
}
.vmc-bell-item-link:hover .vmc-bell-item-icon {
transform: scale(1.05);
}
/* Type-specific icon tints so the kind of event is scannable. */
.vmc-bell-item-link .bi-arrow-repeat,
.vmc-bell-item-link .bi-clock-history {
/* Status change — burgundy. */
color: var(--vmc-burgundy);
}
.vmc-bell-item-link:has(.bi-arrow-repeat) .vmc-bell-item-icon,
.vmc-bell-item-link:has(.bi-clock-history) .vmc-bell-item-icon {
background: linear-gradient(135deg, #ffe4ea 0%, #f9c8d2 100%);
}
.vmc-bell-item-link:has(.bi-envelope-paper) .vmc-bell-item-icon {
/* New enquiry — green. */
background: linear-gradient(135deg, #d6f0dc 0%, #b7e2c1 100%);
}
.vmc-bell-item-link:has(.bi-envelope-paper) .bi-envelope-paper {
color: #2f7d4f;
}
.vmc-bell-item-body {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1 1 auto;
}
/* Title row — unread dot LEADS the title so the cue is read first instead
of sitting half-hidden behind the time-stamp column. */
.vmc-bell-item-titlerow {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.vmc-bell-item-title {
font-size: 0.86rem;
font-weight: 700;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 auto;
}
.vmc-bell-item-text {
font-size: 0.78rem;
color: var(--vmc-muted);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.vmc-bell-item-time {
font-size: 0.68rem;
color: var(--vmc-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 0.15rem;
opacity: 0.85;
}
/* Dot sits BEFORE the title now. Pulse animation draws the eye to it. */
.vmc-bell-item-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--vmc-gold);
box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.25);
flex: 0 0 auto;
animation: vmcBellDotPulse 2.2s ease-in-out infinite;
}
@keyframes vmcBellDotPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.25); }
50% { box-shadow: 0 0 0 5px rgba(201, 162, 74, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
.vmc-bell-item-dot { animation: none; }
}
/* =====================================================================
ADMIN APP-BAR — modernised top strip, contained in the content column.
Layout: [menu toggle ⬇mobile⬇ | section indicator | actions cluster]
Sticky to the top of the content column. No negative margins, so it
never spills into the sidebar gutter.
===================================================================== */
.admin-appbar {
position: sticky;
top: 0;
z-index: 1075;
display: flex;
align-items: center;
gap: 0.85rem;
height: 56px;
padding: 0 1rem;
margin: 0 0 1.25rem;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: saturate(140%) blur(12px);
backdrop-filter: saturate(140%) blur(12px);
border: 1px solid var(--vmc-line);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 6px 18px -12px rgba(58, 13, 24, 0.16);
}
/* ---- Mobile menu toggle — icon-only, square, no label ------------- */
.admin-appbar-menu {
display: inline-grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border-radius: 10px;
border: 1px solid var(--vmc-line-strong);
background: #fff;
color: var(--vmc-burgundy-deep);
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
flex: 0 0 auto;
}
.admin-appbar-menu:hover,
.admin-appbar-menu:focus-visible {
background: var(--vmc-soft);
border-color: var(--vmc-gold);
color: var(--vmc-burgundy);
outline: none;
}
.admin-appbar-menu > i { font-size: 1.2rem; line-height: 1; }
/* ---- Section indicator — small gold icon + uppercase section name */
.admin-appbar-section {
display: inline-flex;
align-items: center;
gap: 0.6rem;
flex: 1 1 auto;
min-width: 0;
}
.admin-appbar-icon {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, #fbe9d4 0%, #f4d9b4 100%);
color: var(--vmc-gold-deep);
font-size: 0.95rem;
flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Live clock — bold time + smaller muted date stacked. Desktop only;
Bootstrap's `d-none d-lg-flex` handles the visibility split. */
.admin-appbar-clock {
flex-direction: column;
justify-content: center;
line-height: 1.15;
min-width: 0;
}
.admin-appbar-time {
font-size: 0.95rem;
font-weight: 700;
color: var(--vmc-burgundy-deep);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.admin-appbar-date {
font-size: 0.7rem;
font-weight: 600;
color: var(--vmc-muted);
letter-spacing: 0.02em;
}
/* ---- Right cluster: bell + user chip ------------------------------ */
.admin-appbar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
}
.admin-appbar .vmc-bell-trigger {
width: 38px;
height: 38px;
padding: 0;
color: var(--vmc-burgundy-deep);
border: 1px solid #c9a2a8;
background: #fff;
border-radius: 10px;
flex: 0 0 auto;
}
.admin-appbar .vmc-bell-trigger > i { font-size: 1.1rem; }
.admin-appbar .vmc-bell-trigger:hover,
.admin-appbar .vmc-bell-trigger:focus-visible,
.admin-appbar .vmc-bell-trigger[aria-expanded="true"] {
background: var(--vmc-soft);
color: var(--vmc-burgundy);
border: 1px solid var(--vmc-gold);
outline: none;
}
.admin-appbar .vmc-bell-badge {
top: -4px;
right: -4px;
border-color: #fff;
}
/* User chip — small avatar disc + first name, link to /account.php */
.admin-appbar-user {
display: inline-flex;
align-items: center;
gap: .55rem;
height: 38px;
padding: 0 0.6rem 0 0.35rem;
border-radius: 10px;
border: 1px solid var(--vmc-line-strong);
border-color: #c9a24a80;
background: #fff;
color: var(--vmc-burgundy-deep);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
transition: background 160ms ease, border-color 160ms ease;
}
.admin-appbar-user:hover,
.admin-appbar-user:focus-visible {
background: var(--vmc-soft);
border-color: var(--vmc-gold);
color: var(--vmc-burgundy);
outline: none;
}
.admin-appbar-user-avatar {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, var(--vmc-gold-soft), var(--vmc-gold) 55%, var(--vmc-gold-deep) 100%);
color: var(--vmc-burgundy-deep);
font-weight: 800;
font-size: 0.78rem;
flex: 0 0 auto;
}
/* Hide the in-row "Notifications" label inherited from the public
nav-row variant — the bell here is icon-only. */
.admin-appbar .vmc-bell-label,
.admin-side-bell .vmc-bell-label {
display: none !important;
}
/* ---- Mobile adjustments ------------------------------------------- */
@media (max-width: 991.98px) {
.admin-appbar {
height: 52px;
padding: 0 0.75rem;
gap: 0.5rem;
}
/* Drop the user-name text to keep the cluster compact. */
.admin-appbar-user-name {
display: none;
}
.admin-appbar-user {
padding: 0;
width: 38px;
height: 38px;
justify-content: center;
border-radius: 10px;
}
.admin-appbar-user-avatar { width: 28px; height: 28px; }
/* Avatar-only chip on mobile — caret won't fit the 38px square. */
.admin-appbar-user-caret { display: none; }
.admin-appbar-icon { display: none; }
.admin-appbar .vmc-bell-panel {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 60px);
/* Tablet gutters — still feels like a card with margin */
left: 0.75rem;
right: 0.75rem;
width: auto;
max-width: none;
z-index: 1101;
}
}
/* Phone-only — admin-appbar bell ALSO needs the edge-to-edge treatment.
This rule is more specific than the generic .vmc-bell-panel mobile
rule below, so without it the admin context stayed at the 0.75rem
tablet gutters set above. */
@media (max-width: 575.98px) {
.admin-appbar .vmc-bell-panel {
left: 1px;
right: 1px;
max-height: calc(100vh - env(safe-area-inset-top, 0px) - 92px);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 40px 80px -20px rgba(58, 13, 24, 0.55),
0 20px 36px -12px rgba(58, 13, 24, 0.30),
0 6px 12px -6px rgba(58, 13, 24, 0.18),
0 0 0 1px rgba(58, 13, 24, 0.06);
}
}
/* =====================================================================
Notification bell — phone-size adjustments. Panel becomes a near
full-width sheet, items get thumb-friendly padding, head bar stays
sticky so "Mark read" / "Clear" are always reachable on long lists.
===================================================================== */
@media (max-width: 575.98px) {
.vmc-bell-panel {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 64px);
/* Near edge-to-edge — just 4px of breathing room each side so the
sheet still reads as a card, not as a full takeover screen. */
left: 4px;
right: 4px;
width: auto;
max-width: none;
max-height: calc(100vh - env(safe-area-inset-top, 0px) - 96px);
display: flex;
flex-direction: column;
border-radius: 18px;
/* Caret moves further from the right edge so it lines up under
the bell trigger that sits in the header (admin app-bar or
public mobile bell, both ~24-28px from the viewport edge). */
--caret-right: 26px;
}
.vmc-bell-head { border-radius: 17px 17px 0 0; }
/* Sheet has a larger 18px radius — list clips to match. */
.vmc-bell-list { border-radius: 0 0 17px 17px; }
/* Dramatic multi-stop shadow — a wide ambient glow plus a tight
contact shadow + a hairline outline ring. Reads as a real
floating sheet over a darkened-feeling page. */
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 40px 80px -20px rgba(58, 13, 24, 0.55),
0 20px 36px -12px rgba(58, 13, 24, 0.30),
0 6px 12px -6px rgba(58, 13, 24, 0.18),
0 0 0 1px rgba(58, 13, 24, 0.06);
}
/* Head bar pinned to the top — Mark read / Clear stay reachable
regardless of how far the user has scrolled. */
.vmc-bell-head {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
}
/* Scrollable list region with iOS-style momentum scrolling. */
.vmc-bell-list {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* don't bubble pulls to the page */
}
/* Bigger tap targets per row + slightly larger title for thumb
readability. */
.vmc-bell-item-link {
padding: 1rem 1.1rem 1rem 1.1rem;
padding-right: 50px; /* room for the larger × */
gap: 0.85rem;
}
.vmc-bell-item-icon {
flex-basis: 38px;
width: 38px;
height: 38px;
font-size: 1.1rem;
}
.vmc-bell-item-title { font-size: 0.92rem; }
.vmc-bell-item-text { font-size: 0.82rem; -webkit-line-clamp: 3; }
.vmc-bell-item-time { font-size: 0.7rem; margin-top: 0.25rem; }
/* Empty state breathes more on the bigger sheet. */
.vmc-bell-empty { padding: 2.5rem 1rem; }
}
/* =====================================================================
NAVBAR BELL — match .vmc-nav-icon-cart styling in both desktop &
mobile contexts. Scoped to .vmc-nav-bell-wrap so admin/topbar bells
are unaffected.
===================================================================== */
/* ---- Desktop (≥lg) — gold-outlined circular pill, just like cart ---- */
@media (min-width: 992px) {
.vmc-nav-bell-wrap {
display: inline-flex;
align-items: center;
}
.vmc-nav-bell-wrap .vmc-bell-trigger {
width: 42px;
height: 42px;
padding: 0;
border-radius: 999px;
border: 1.5px solid rgba(201, 162, 74, 0.45);
background: transparent;
color: #f6e8c8;
transition: background 180ms ease,
border-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease;
}
.vmc-nav-bell-wrap .vmc-bell-trigger > i {
font-size: 1.05rem;
}
.vmc-nav-bell-wrap .vmc-bell-trigger:hover,
.vmc-nav-bell-wrap .vmc-bell-trigger:focus-visible,
.vmc-nav-bell-wrap .vmc-bell-trigger[aria-expanded="true"] {
background: rgba(201, 162, 74, 0.16);
border-color: var(--vmc-gold);
color: #ecc47f;
outline: none;
}
/* Inline label is desktop-hidden via Bootstrap `d-lg-none`. */
.vmc-nav-bell-wrap .vmc-bell-badge {
top: -4px;
right: -4px;
border-color: #2a0a12;
}
}
/* ---- Mobile ( i.bi {
width: 28px !important;
height: 28px !important;
flex: 0 0 28px !important;
border-radius: 0 !important;
border: 0 !important;
background: transparent !important;
font-size: 1.2rem !important;
line-height: 1 !important;
color: var(--vmc-gold-soft) !important;
display: inline-grid;
place-items: center;
}
/* Label sits between icon and badge. */
.vmc-nav-bell-wrap .vmc-bell-label {
display: inline-block !important;
margin: 0 !important;
color: inherit !important;
font-weight: inherit !important;
}
/* Badge: absolutely positioned at the right edge, just before the
chevron. Gold pill matches cart-count badge styling. */
.vmc-nav-bell-wrap .vmc-bell-badge {
position: absolute !important;
top: 50% !important;
right: 2.4rem !important; /* leaves room for the chevron */
transform: translateY(-50%) !important;
margin: 0 !important;
background: var(--vmc-gold) !important;
color: var(--vmc-burgundy-deep) !important;
border: 0 !important;
min-width: 26px !important;
height: 26px !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
padding: 0 8px !important;
border-radius: 999px !important;
line-height: 1 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box;
}
/* Chevron — absolutely pinned to the right edge of the row. */
.vmc-nav-bell-wrap .vmc-bell-trigger::after {
content: "\f285"; /* bi-chevron-right */
font-family: "bootstrap-icons";
position: absolute;
right: 1.1rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.95rem;
color: rgba(201, 162, 74, 0.7);
line-height: 1;
transition: color 180ms ease;
}
/* Label takes ALL available slack — flex-basis 0 (not auto) so it
definitely grows beyond its content width, pushing the badge and
chevron to the far right edge. Inherited `display: inline` from
.vmc-nav-icon-label gets blockified inside the flex container,
but `flex-basis: auto` can fall back to content-width if the item
wasn't sized in the main axis — basis 0 sidesteps that. */
.vmc-nav-bell-wrap .vmc-bell-label {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.vmc-nav-bell-wrap .vmc-bell-badge {
flex: 0 0 auto !important;
}
.vmc-nav-bell-wrap .vmc-bell-trigger:hover {
background: rgba(201, 162, 74, 0.10) !important;
color: #fff !important;
}
.vmc-nav-bell-wrap .vmc-bell-trigger:hover::after {
color: var(--vmc-gold-soft);
}
/* Dropdown panel — fixed-position overlay just below the navbar so
it doesn't have to fit inside the collapsed menu sheet. */
.vmc-nav-bell-wrap .vmc-bell-panel {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 64px);
right: 0.75rem;
left: 0.75rem;
width: auto;
max-width: none;
z-index: 1101;
}
}
/* =====================================================================
STANDALONE MOBILE NAV BELL — sits next to the hamburger toggle.
Visible i {
font-size: 1.15rem;
line-height: 1;
}
.vmc-mobile-bell .vmc-bell-trigger:hover,
.vmc-mobile-bell .vmc-bell-trigger:focus-visible,
.vmc-mobile-bell .vmc-bell-trigger[aria-expanded="true"] {
background: var(--vmc-gold);
color: var(--vmc-burgundy-deep);
border-color: var(--vmc-gold-deep);
outline: none;
}
/* The "Notifications" label inside the trigger is only meant for the
in-menu row — hide it in the standalone bell variant. */
.vmc-mobile-bell .vmc-bell-label {
display: none !important;
}
/* Badge — burgundy punch-out in the top-right corner of the trigger. */
.vmc-mobile-bell .vmc-bell-badge {
position: absolute !important;
top: -4px !important;
right: -4px !important;
left: auto !important;
margin: 0 !important;
min-width: 20px !important;
height: 20px !important;
padding: 0 5px !important;
border-radius: 999px !important;
background: var(--vmc-burgundy) !important;
color: #fff !important;
font-size: 0.66rem !important;
font-weight: 800 !important;
line-height: 1 !important;
border: 2px solid #2a0a12 !important;
box-shadow: 0 2px 6px rgba(91, 18, 38, 0.5) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
transform: none !important;
}
/* Dropdown panel — fixed-position overlay just below the navbar so it
covers the page nicely without trying to squeeze into the navbar. */
.vmc-mobile-bell .vmc-bell-panel {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 64px);
right: 0.5rem;
left: 0.5rem;
width: auto;
max-width: none;
z-index: 1101;
}
/* Phone-only — drop to 4px gutters and apply the dramatic shadow stack.
Mirrors the .admin-appbar bell override below — keeps both contexts
visually identical at phone widths. */
@media (max-width: 575.98px) {
.vmc-mobile-bell .vmc-bell-panel {
left: 12px;
right: 12px;
max-height: calc(100vh - env(safe-area-inset-top, 0px) - 92px);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 40px 80px -20px rgba(58, 13, 24, 0.55),
0 20px 36px -12px rgba(58, 13, 24, 0.30),
0 6px 12px -6px rgba(58, 13, 24, 0.18),
0 0 0 1px rgba(58, 13, 24, 0.06);
}
}
/* =====================================================================
BUYER ENQUIRY DETAIL (account.php?enquiry=…) — compact line-item
cards instead of a wide table. Each item card has a top row with
SKU · Product · Qty, and a flat inline specs strip below.
===================================================================== */
.enquiry-detail-head {
margin-bottom: .8rem;
}
.enquiry-detail-no {
font-family: var(--vmc-font-display, var(--vmc-font-sans));
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--vmc-burgundy-deep);
letter-spacing: 0.01em;
}
.enquiry-detail-meta {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.84rem;
color: var(--vmc-muted);
}
.enquiry-detail-meta .badge-status {
margin-right: 0.1rem;
}
.enquiry-detail-sep {
color: var(--vmc-line-strong);
user-select: none;
}
.enquiry-lines {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.enquiry-line {
background: linear-gradient(180deg, #fff 0%, var(--vmc-soft) 100%);
border: 1px solid var(--vmc-line);
border-radius: 14px;
padding: 1rem 1.1rem;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 4px 12px -8px rgba(58, 13, 24, 0.10);
}
/* Top row — SKU · Product · Quantity, flexible width. */
.enquiry-line-head {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.enquiry-line-sku {
flex: 0 0 auto;
font-size: 0.72rem;
color: var(--vmc-burgundy);
background: rgba(91, 18, 38, 0.07);
padding: 0.22rem 0.5rem;
border-radius: 6px;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
}
.enquiry-line-product {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
line-height: 1.25;
}
/* Smaller "View" button — scoped to per-row action in the Enquiries list. */
.enq-view-btn {
padding: 0.28rem 0.7rem !important;
font-size: 0.78rem !important;
line-height: 1.1 !important;
border-width: 1px !important;
}
.enq-view-btn i.bi {
font-size: 0.85rem;
}
.enquiry-line-eyebrow {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vmc-gold-deep, #8b6a1f);
line-height: 1;
}
.enquiry-line-product strong {
font-size: 0.98rem;
color: var(--vmc-burgundy-deep);
}
.enquiry-line-faceting {
font-size: 0.78rem;
color: var(--vmc-muted);
font-style: italic;
}
.enquiry-line-qty {
flex: 0 0 auto;
text-align: right;
line-height: 1.15;
white-space: nowrap;
}
.enquiry-line-qty strong {
display: block;
font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;;
font-size: 1.4rem;
color: var(--vmc-burgundy-deep);
font-weight: 700;
line-height: 1;
}
.enquiry-line-qty small {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vmc-muted);
margin-top: 0.18rem;
}
/* Bottom strip — flat inline pills for purity + specs. */
.enquiry-line-specs {
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.5rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed var(--vmc-line);
}
.enquiry-line-purity {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.6rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.enquiry-line-purity.is-gold {
background: rgba(201, 162, 74, 0.18);
color: var(--vmc-gold-deep, #8b6a1f);
}
.enquiry-line-purity.is-silver {
background: linear-gradient(
180deg, var(--c-gold-soft), var(--c-gold));
color: #2a0a12;
}
.enquiry-line-spec {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
padding: 0.22rem 0.55rem;
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 999px;
font-size: 0.78rem;
line-height: 1.1;
color: var(--vmc-burgundy-deep);
font-variant-numeric: tabular-nums;
}
.enquiry-line-spec-lbl {
color: var(--vmc-muted);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.enquiry-line-spec-val {
font-weight: 700;
}
@media (max-width: 575.98px) {
.enquiry-line { padding: 0.85rem 0.9rem; border-radius: 12px; }
.enquiry-line-head { gap: 0.7rem; }
.enquiry-line-qty strong { font-size: 1.2rem; }
.enquiry-line-product strong { font-size: 0.92rem; }
.enquiry-detail-no { font-size: 1.2rem; }
}
/* =====================================================================
PREMIUM FONT — Playfair Display applied selectively. Use sparingly
for places where you want a luxe, editorial feel: the navbar brand
mark and the carousel slide titles. Everywhere else stays Manrope.
===================================================================== */
:root {
--vmc-font-premium: 'Playfair Display', 'Times New Roman', Georgia, serif;
}
/* Brand mark — "Vimla Mani Centre" in the navbar */
.brand-name {
font-family: var(--vmc-font-premium) !important;
font-weight: 700;
letter-spacing: 0.01em;
}
/* Hero / carousel — no default font family override here any more.
The admin's per-slide font picker (carousel_font_options()) always
emits an inline `font-family` on the title + subtitle. The
"Manrope (default)" key emits Manrope explicitly, so what the admin
picks is exactly what the browser renders. */
.hero-split-text h1 {
font-weight: 700;
letter-spacing: 0.005em;
}
.hero-split-text h1 em {
font-style: italic;
}
.hero-split-text p {
font-weight: 500;
}
/* Hide the standalone Admin pill on desktop — the profile dropdown
already has an "Admin panel" link, so showing both is redundant.
Beats the .vmc-nav-pill { display: inline-flex !important } rule
that otherwise overrides Bootstrap's .d-lg-none on this item. */
@media (min-width: 992px) {
.vmc-nav-list .vmc-nav-admin {
display: none !important;
}
}
/* =====================================================================
HERO EYEBROW + FOOTER CHIPS — admin-configurable accents that sit
above/below the carousel slide title block on the home page.
===================================================================== */
.hero-split-text .hero-eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--vmc-gold-soft, #e6c87a);
margin-bottom: 0.85rem;
opacity: 0.92;
}
.hero-footer-chips {
display: flex;
flex-wrap: wrap;
gap: 0.65rem 1.2rem;
margin-top: 1.25rem;
font-size: 0.86rem;
color: rgba(251, 233, 191, 0.85);
}
.hero-footer-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
line-height: 1.2;
}
.hero-footer-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--vmc-gold);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.22);
flex: 0 0 auto;
}
@media (max-width: 575.98px) {
.hero-split-text .hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; }
.hero-footer-chips { gap: 0.5rem 0.85rem; font-size: 0.78rem; }
}
/* =====================================================================
ADMIN CAROUSEL — live preview card on the right column, sticky to
the top of the viewport so it stays visible while the admin scrolls
through the long form on the left. Mirrors the real hero's split
layout: text on the left, image on the right.
===================================================================== */
.carousel-preview {
position: sticky;
top: 80px; /* clears the admin app-bar */
border: 1px solid var(--vmc-line);
border-radius: 14px;
background: #fff;
margin-bottom: 1.1rem;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 8px 22px -14px rgba(58, 13, 24, 0.22);
z-index: 5;
}
/* On narrow viewports there's no room for a second column anyway, so
the sticky stops being useful — release it and let it scroll. */
@media (max-width: 1199.98px) {
.carousel-preview { position: static; }
}
.carousel-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.95rem 0.95rem;
/* background: var(--vmc-soft); */
border-bottom: 1px solid var(--vmc-line);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--vmc-burgundy-deep);
}
.carousel-preview-head > span > i { color: var(--vmc-gold-deep); }
.carousel-preview-head small {
text-transform: none;
letter-spacing: 0.02em;
font-weight: 500;
font-size: 0.65rem;
}
/* Stage: burgundy gradient with text on the left and image on the
right — mirrors the real hero-split layout so the admin sees the
final shape, not just the text. */
.carousel-preview-stage {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 1rem;
align-items: center;
background:
linear-gradient(135deg, rgba(91, 18, 38, 0.94) 0%, rgba(58, 13, 24, 0.97) 100%),
radial-gradient(circle at top right, rgba(201, 162, 74, 0.18), transparent 60%);
background-blend-mode: normal;
color: #fff;
padding: 1.4rem 1.25rem;
min-height: 220px;
}
.carousel-preview-text {
min-width: 0;
}
/* Image area on the right — gold-cornered frame, 4:3 aspect, matches
how the real hero displays the slide image. */
.carousel-preview-image {
display: flex;
align-items: center;
justify-content: center;
}
.carousel-preview-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.06);
background-size: cover;
background-position: center;
border: 1px solid rgba(201, 162, 74, 0.45);
box-shadow:
inset 0 0 0 4px rgba(255, 255, 255, 0.04),
0 6px 20px -10px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.carousel-preview-image-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.carousel-preview-image-placeholder i {
font-size: 1.6rem;
color: rgba(201, 162, 74, 0.55);
}
/* Below 768px the preview falls back to a stacked layout (text above,
image below) so it doesn't squeeze the text into nothing. */
@media (max-width: 767.98px) {
.carousel-preview-stage {
grid-template-columns: 1fr;
}
.carousel-preview-image-frame { aspect-ratio: 16 / 9; }
}
.carousel-preview-eyebrow {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--vmc-gold-soft);
margin-bottom: 0.55rem;
}
.carousel-preview-title {
font-size: 1.6rem;
line-height: 1.15;
margin: 0 0 0.55rem;
color: #ffeebf;
font-family: var(--vmc-font-display);
font-weight: 700;
}
.carousel-preview-subtitle {
font-size: 0.88rem;
line-height: 1.45;
color: rgba(251, 233, 191, 0.85);
margin: 0 0 0.75rem;
max-width: 38em;
}
.carousel-preview-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.55rem;
}
.carousel-preview-cta {
display: inline-flex;
align-items: center;
padding: 0.45rem 1rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
}
.carousel-preview-cta--primary {
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
color: var(--vmc-burgundy-deep);
border: 1px solid var(--vmc-gold-deep);
}
.carousel-preview-cta--secondary {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.55);
}
.carousel-preview-cta:empty { display: none; }
.carousel-preview-footer {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.9rem;
margin-top: 0.45rem;
font-size: 0.74rem;
color: rgba(251, 233, 191, 0.85);
}
.carousel-preview-footer:empty { display: none; }
.carousel-preview-footer-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.carousel-preview-footer-chip::before {
content: "";
width: 5px;
height: 5px;
border-radius: 999px;
background: var(--vmc-gold);
flex: 0 0 auto;
}
/* =====================================================================
ADMIN CAROUSEL — UI iteration 2
Quicknav inside the form, richer image guidance, contrast/link chips,
hero-mirror preview backdrop, device + safe-area toggles, drag handle
on the slide list.
===================================================================== */
/* Image guidance — now lives inside a Bootstrap popover triggered by the
info button next to the subhead, so it doesn't eat vertical space on
every page load. Keep the .image-guidance list styling for the
popover body. */
.image-guidance {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.8rem;
color: var(--vmc-ink);
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
min-width: 240px;
max-width: 320px;
}
.image-guidance li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
line-height: 1.35;
}
.image-guidance li > i {
color: var(--vmc-gold-deep);
margin-top: 2px;
flex: 0 0 auto;
font-size: 0.95rem;
}
.image-guidance li strong {
color: var(--vmc-burgundy-deep);
font-weight: 700;
margin-right: 0.2rem;
display: inline-block;
}
/* Info button in the image subhead — opens the .image-guidance popover. */
.image-guidance-btn {
border: 0;
background: transparent;
color: var(--vmc-gold-deep);
padding: 0 0 0 0.25rem;
font-size: 1rem;
line-height: 1;
cursor: pointer;
margin-left: 0.15rem;
transition: color 140ms ease, transform 140ms ease;
}
.image-guidance-btn:hover { color: var(--vmc-burgundy-deep); transform: translateY(-1px); }
.image-guidance-btn:focus { outline: 2px solid var(--vmc-gold); outline-offset: 2px; border-radius: 999px; }
/* Popover skin — match the brand palette instead of Bootstrap's default blue. */
.image-guidance-popover.popover {
border: 1px solid var(--vmc-line);
box-shadow: var(--vmc-shadow-md);
border-radius: 12px;
}
.image-guidance-popover .popover-header {
background: var(--vmc-soft);
color: var(--vmc-burgundy-deep);
font-weight: 700;
border-bottom: 1px solid var(--vmc-line);
border-radius: 11px 11px 0 0;
}
.image-guidance-popover .popover-body { padding: 0.75rem 0.9rem; }
/* CTA link badge — internal vs external, right next to the link label. */
.link-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: 0.4rem;
padding: 1px 8px;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(120, 120, 120, 0.12);
color: #888;
vertical-align: middle;
}
.link-badge.int { background: rgba(46, 160, 67, 0.14); color: #2ea043; }
.link-badge.ext { background: rgba(40, 100, 200, 0.14); color: #2864c8; }
.link-badge i { font-size: 0.72rem; }
/* ---- Preview toolbar (head bar) ---------------------------------- */
.carousel-preview-tools {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
/* Master live-preview on/off — iOS-style switch sitting at the start of
the preview toolbar. When off, the stage collapses and only the head
bar remains visible. */
.preview-master-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--vmc-muted);
cursor: pointer;
user-select: none;
margin-right: 0.25rem;
}
.preview-master-toggle input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.preview-master-track {
position: relative;
width: 30px;
height: 16px;
border-radius: 999px;
background: rgba(120, 120, 120, 0.28);
transition: background 160ms ease;
flex: 0 0 auto;
}
.preview-master-track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
transition: transform 160ms ease;
}
.preview-master-toggle input:checked + .preview-master-track {
background: linear-gradient(180deg, var(--vmc-gold-soft), var(--vmc-gold));
}
.preview-master-toggle input:checked + .preview-master-track::after {
transform: translateX(14px);
}
.preview-master-toggle input:focus-visible + .preview-master-track {
outline: 2px solid var(--vmc-gold-deep);
outline-offset: 2px;
}
/* Off-state: collapse the stage but keep the head visible so the admin
can switch the preview back on. */
.carousel-preview.is-off .carousel-preview-viewport { display: none; }
/* ---- Hero-mirror backdrop on the preview stage ------------------- */
.carousel-preview-stage {
position: relative;
isolation: isolate; /* keep ::before orbs above body backdrop */
overflow: hidden;
}
.carousel-preview-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.carousel-preview-bg::before,
.carousel-preview-bg::after {
content: "";
position: absolute;
inset: -30%;
pointer-events: none;
}
.carousel-preview-bg::before {
background: radial-gradient(circle at 30% 30%,
rgba(201, 162, 74, 0.28) 0%,
rgba(201, 162, 74, 0.12) 25%,
transparent 55%);
transform: translate(12%, -8%);
}
.carousel-preview-bg::after {
background: radial-gradient(circle at 70% 60%,
rgba(122, 26, 50, 0.50) 0%,
rgba(122, 26, 50, 0.22) 30%,
transparent 60%);
transform: translate(-14%, 10%);
}
/* Vignette scrim — same trick the public hero uses to keep title text
readable over busy images. */
.carousel-preview-scrim {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 45%, transparent 70%),
linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.28) 100%);
}
.carousel-preview-stage > .carousel-preview-text,
.carousel-preview-stage > .carousel-preview-image {
position: relative;
z-index: 1; /* sit above the bg + scrim */
}
/* ---- Slide list: drag handle + drag states ----------------------- */
.slide-row {
grid-template-columns: 22px 110px minmax(0, 1fr) auto;
}
.slide-row-handle {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--vmc-muted);
cursor: grab;
user-select: none;
font-size: 1.1rem;
line-height: 1;
opacity: 0.55;
transition: opacity 140ms ease, color 140ms ease;
}
.slide-row-handle:hover { opacity: 1; color: var(--vmc-gold-deep); }
.slide-row-handle:active { cursor: grabbing; }
.slide-row.is-dragging {
opacity: 0.4;
border-style: dashed;
}
.slide-row.is-drop-target {
box-shadow: 0 -3px 0 0 var(--vmc-gold);
}
.slide-list.is-saving { opacity: 0.7; pointer-events: none; }
@media (max-width: 767.98px) {
.slide-row {
grid-template-columns: 22px 84px minmax(0, 1fr);
grid-template-areas:
"handle thumb body"
"actions actions actions";
}
.slide-row-handle { grid-area: handle; }
}
/* =====================================================================
LOGIN — single card with a segmented Password / Mobile OTP toggle.
Both forms live in the DOM so autofill keeps working; only the active
pane is rendered. Replaces the older two-column layout that always
showed both methods side-by-side and confused customers.
===================================================================== */
.auth-login {
background: #fff;
border: 1px solid var(--vmc-line);
border-radius: 14px;
box-shadow: var(--vmc-shadow-sm);
}
.auth-method-toggle {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
background: var(--vmc-soft);
border: 1px solid var(--vmc-line);
border-radius: 999px;
padding: 4px;
margin: 0 0 1.1rem;
}
/* Sliding white pill — JS positions it under the active segment. */
.auth-method-thumb {
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 0;
border-radius: 999px;
background: #fff;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 4px 10px -6px rgba(58, 13, 24, 0.25);
transform: translateX(0);
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), width 280ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 0;
pointer-events: none;
}
.auth-method-toggle button {
position: relative;
z-index: 1;
appearance: none;
border: 0;
background: transparent;
color: var(--vmc-muted);
font-weight: 700;
font-size: 0.88rem;
padding: 0.55rem 0.9rem;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
transition: color 200ms ease;
white-space: nowrap;
}
.auth-method-toggle button i { font-size: 0.95rem; }
.auth-method-toggle button:hover { color: var(--vmc-burgundy-deep); }
.auth-method-toggle button.active {
background: transparent; /* white pill is the sliding thumb now */
color: var(--vmc-burgundy-deep);
}
@media (prefers-reduced-motion: reduce) {
.auth-method-thumb { transition: none; }
}
.auth-method-toggle button:focus-visible {
outline: 2px solid var(--vmc-gold-deep);
outline-offset: 2px;
}
/* Panes — only the active one renders. Tiny fade so the swap doesn't
feel jarring when the admin flips back and forth. */
.auth-method-pane {
display: none;
animation: authPaneIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-method-pane.is-active { display: block; }
@keyframes authPaneIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.auth-method-pane { animation: none; }
}
/* New-user CTA — framed block at the bottom of the login card so first-
time visitors notice it instead of skipping past a small text link. */
.auth-register-cta { margin-top: 2rem; }
/* Gold-line divider with the "New to …" text centred on the rule. */
.auth-divider {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.85rem;
color: var(--vmc-muted);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(201, 162, 74, 0.55),
transparent);
}
.auth-divider > span {
flex: 0 0 auto;
color: var(--vmc-burgundy);
white-space: nowrap;
}
/* The button itself — outline-gold, with a hover lift so the eye lands. */
.auth-register-btn {
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.7rem 1rem;
border-width: 1.5px;
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.auth-register-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px -10px rgba(58, 13, 24, 0.45);
}
.auth-register-note {
margin: 0.6rem 0 0;
font-size: 0.78rem;
color: var(--vmc-muted);
text-align: center;
line-height: 1.4;
}
/* Account dashboard redesign */
.account-dashboard {
background:
radial-gradient(circle at 18% 8%, rgba(201, 162, 74, 0.1), transparent 30%),
radial-gradient(circle at 90% 18%, rgba(91, 18, 38, 0.06), transparent 28%);
}
.account-shell {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.account-shell--detail {
display: block;
max-width: 1120px;
margin: 0 auto;
}
.account-shell--detail .account-sidebar {
display: none;
}
.account-sidebar,
.account-panel,
.account-action-card {
border: 1px solid rgba(91, 18, 38, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 18px 42px rgba(58, 13, 24, 0.06);
}
.account-sidebar {
position: sticky;
top: 112px;
min-height: 740px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.account-rail {
display: grid;
gap: 1rem;
}
.account-rail .nav-link {
position: relative;
width: 100%;
min-height: 112px;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 1rem;
align-items: center;
padding: 1rem 1.05rem;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--vmc-coffee-deep);
text-align: left;
}
.account-rail .nav-link.active {
background: linear-gradient(135deg, rgba(255, 247, 229, 0.96), rgba(255, 250, 241, 0.72));
box-shadow: inset 3px 0 0 var(--vmc-gold);
}
.account-rail-icon,
.account-section-icon,
.account-help-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 999px;
background: #fbf1df;
color: var(--vmc-burgundy);
font-size: 1.25rem;
}
.account-rail strong {
display: block;
margin-bottom: 0.35rem;
color: #251c18;
font-size: 0.98rem;
font-weight: 800;
}
.account-rail strong em {
display: inline-grid;
min-width: 22px;
height: 22px;
margin-left: 0.35rem;
place-items: center;
border-radius: 999px;
background: #f3dfb5;
color: var(--vmc-burgundy);
font-style: normal;
font-size: 0.72rem;
}
.account-rail small,
.account-section-head p,
.account-action-card p,
.account-help-card p {
color: #6f6770;
font-size: 0.82rem;
line-height: 1.55;
}
.account-help-card {
margin-top: auto;
padding: 1.2rem;
border: 1px solid rgba(201, 162, 74, 0.22);
border-radius: 10px;
background: rgba(255, 255, 255, 0.68);
}
.account-help-card strong {
display: block;
margin-top: 0.8rem;
color: #251c18;
}
.account-panel-wrap {
min-width: 0;
}
.account-panel {
padding: clamp(1.4rem, 3vw, 2rem);
}
.account-section-head,
.account-enquiries-head,
.account-action-card {
display: flex;
align-items: center;
gap: 1rem;
}
.account-section-head {
margin-bottom: 1.6rem;
}
.account-section-head h2,
.account-action-card h3 {
margin: 0;
color: var(--vmc-burgundy-deep);
font-family: "Playfair Display", serif;
font-size: clamp(1.45rem, 2vw, 1.9rem);
font-weight: 700;
}
.account-section-head p,
.account-action-card p {
margin: 0.2rem 0 0;
}
.account-profile-form {
padding-top: 0.25rem;
}
.account-profile-form .form-label {
color: #241b18;
font-weight: 800;
}
.account-profile-form .form-label span {
color: #9f1635;
}
.account-input {
position: relative;
}
.account-input > i {
position: absolute;
left: 1rem;
top: 50%;
color: #7d7477;
transform: translateY(-50%);
z-index: 2;
}
.account-input .form-control {
min-height: 52px;
padding-left: 2.8rem;
border-color: rgba(91, 18, 38, 0.16);
border-radius: 8px;
background: #fff;
}
.account-input .form-control:disabled {
background: #f6f6f7;
}
.account-form-footer {
display: flex;
align-items: center;
gap: 1.25rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(91, 18, 38, 0.1);
}
.account-form-footer > span {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: #6f6770;
font-size: 0.84rem;
}
.account-form-footer > span i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 999px;
background: #fbf1df;
color: var(--vmc-gold-deep);
}
.account-action-card {
margin-top: 1.35rem;
padding: 1.4rem 1.6rem;
}
.account-action-card > div {
flex: 1 1 auto;
min-width: 0;
}
.account-action-card .btn {
flex: 0 0 auto;
}
.account-enquiries-head {
justify-content: space-between;
margin-bottom: 1.2rem;
}
.account-enquiries-head .account-section-head {
margin-bottom: 0;
}
.account-enquiry-stats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.6rem;
}
.account-enquiry-stat {
position: relative;
min-height: 86px;
padding: 1rem;
border: 1px solid rgba(91, 18, 38, 0.1);
border-radius: 8px;
background: rgba(255, 255, 255, 0.72);
}
.account-enquiry-stat span {
display: block;
color: #4b4244;
font-size: 0.76rem;
font-weight: 800;
}
.account-enquiry-stat strong {
display: block;
margin-top: 0.2rem;
color: var(--vmc-burgundy);
font-size: 1.6rem;
line-height: 1;
}
.account-enquiry-stat i {
position: absolute;
right: 1rem;
top: 1.1rem;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
background: #fbf1df;
color: var(--vmc-gold-deep);
}
.account-enquiry-toolbar {
display: grid;
grid-template-columns: minmax(220px, 1.3fr) minmax(150px, 0.8fr) minmax(170px, 0.8fr) auto auto;
gap: 0.85rem;
align-items: center;
margin-bottom: 1.4rem;
}
.account-search,
.account-select,
.account-date {
position: relative;
min-height: 44px;
margin: 0;
}
.account-search input,
.account-select select,
.account-date input {
width: 100%;
height: 44px;
padding: 0 1rem;
border: 1px solid rgba(91, 18, 38, 0.14);
border-radius: 8px;
background: #fff;
color: #31272a;
font-size: 0.84rem;
}
.account-search input {
padding-left: 2.6rem;
}
.account-search i,
.account-date i {
position: absolute;
top: 50%;
color: #7d7477;
transform: translateY(-50%);
}
.account-search i { left: 0.95rem; }
.account-date i { right: 0.95rem; }
.account-select span,
.account-date span {
position: absolute;
left: 0.85rem;
top: -0.52rem;
padding: 0 0.3rem;
background: #fff;
color: #6f6770;
font-size: 0.64rem;
font-weight: 800;
}
.account-clear-filter {
color: var(--vmc-burgundy);
font-size: 0.78rem;
font-weight: 800;
text-decoration: none;
}
.account-enquiries-table {
overflow: hidden;
border: 1px solid rgba(91, 18, 38, 0.1);
border-radius: 8px;
}
.account-enquiries-table thead th {
padding: 0.9rem 1rem;
background: #fbf8f3;
color: #5d5358;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.account-enquiries-table tbody td {
padding: 0.95rem 1rem;
color: #332a2d;
font-size: 0.86rem;
vertical-align: middle;
}
.account-enquiries-table code {
display: block;
color: var(--vmc-burgundy);
font-weight: 900;
}
/* Clickable enquiry ID — opens the detail view, same destination as the
row's "View" button. Underline-on-hover signals it's a link. */
.enq-id-link {
display: inline-block;
text-decoration: none;
border-radius: 6px;
transition: color .15s ease;
}
.enq-id-link code {
transition: color .15s ease;
}
.enq-id-link:hover code,
.enq-id-link:focus-visible code {
color: var(--vmc-burgundy-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
.account-enquiries-table td > span:not(.badge-status) {
color: #6f6770;
font-size: 0.78rem;
}
.account-enquiries-table .badge-status {
font-size: 0.68rem;
}
@media (max-width: 1199.98px) {
.account-shell {
grid-template-columns: 260px minmax(0, 1fr);
gap: 1.2rem;
}
.account-enquiry-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.account-enquiry-toolbar {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767.98px) {
.account-shell {
grid-template-columns: 1fr;
}
.account-sidebar {
position: static;
min-height: 0;
}
.account-rail {
grid-template-columns: 1fr;
}
.account-rail .nav-link {
min-height: 86px;
}
.account-enquiry-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.account-action-card,
.account-form-footer,
.account-enquiries-head {
align-items: stretch;
flex-direction: column;
}
.account-action-card .btn,
.account-form-footer .btn,
.account-enquiries-head .btn {
width: 100%;
}
.account-enquiry-toolbar {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
.account-enquiry-stats {
grid-template-columns: 1fr;
}
}
/* Premium buyer enquiry detail */
.enquiry-detail-premium {
padding: clamp(1.25rem, 2.4vw, 2rem);
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
color: #2f2628;
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Legacy duplicate blocks were removed from account.php; nothing to hide. */
.enq-detail-topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
/* Top-bar buttons — unified rounded-rectangle style with a light
hairline border and white fill. Back button uses neutral dark text
(kept distinct from the burgundy-bold navbar brand mark); the action
buttons use burgundy text + icon. */
.enq-back-pill {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.65rem 1.15rem;
border: 1px solid rgba(60, 30, 30, 0.16);
border-radius: 12px;
color: #2f2628;
background: #fff;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0;
text-decoration: none;
box-shadow: 0 1px 2px rgba(60, 30, 30, 0.04);
transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.enq-back-pill:hover,
.enq-back-pill:focus-visible {
border-color: rgba(91, 18, 38, 0.4);
background: #fff;
color: var(--vmc-burgundy-deep);
box-shadow: 0 4px 12px rgba(60, 30, 30, 0.1);
}
.enq-back-pill i { font-size: 1.05rem; line-height: 1; }
.enq-detail-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Override Bootstrap's .btn-outline-vmc so the action buttons share the
exact look of the back pill, just with burgundy text. */
.enq-detail-actions .btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.65rem 1.15rem;
border: 1px solid rgba(60, 30, 30, 0.16);
border-radius: 12px;
color: var(--vmc-burgundy);
background: #fff;
box-shadow: 0 1px 2px rgba(60, 30, 30, 0.04);
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0;
transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.enq-detail-actions .btn:hover,
.enq-detail-actions .btn:focus-visible {
border-color: rgba(91, 18, 38, 0.4);
background: #fff;
color: var(--vmc-burgundy-deep);
box-shadow: 0 4px 12px rgba(60, 30, 30, 0.1);
}
.enq-detail-actions .btn i { font-size: 1.05rem; line-height: 1; }
.enq-detail-hero {
margin-bottom: 1.35rem;
}
.enq-detail-hero h2 {
margin: 0 0 0.65rem;
color: var(--vmc-burgundy-deep);
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: clamp(2rem, 3.4vw, 2.65rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: 0;
}
.enq-detail-hero p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin: 0;
color: #6f6770;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.4;
}
.enq-detail-hero .badge-status,
.enq-detail-summary .badge-status {
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.enq-detail-hero p > span + span {
position: relative;
}
.enq-detail-hero p > span + span::before {
content: "";
width: 4px;
height: 4px;
display: inline-block;
margin-right: 0.75rem;
border-radius: 999px;
background: rgba(91, 18, 38, 0.28);
vertical-align: middle;
}
.enq-detail-items {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid rgba(91, 18, 38, 0.12);
border-radius: 12px 12px 0 0;
overflow: hidden;
background: #fff;
}
.enq-detail-item {
display: grid;
/* Qty column sizes to its content (was fixed 110px → the big number
"10.000" overflowed the card). minmax keeps a sensible min width. */
grid-template-columns: 240px minmax(0, 1fr) minmax(96px, auto);
gap: 1.75rem;
align-items: center;
padding: 1.5rem;
}
.enq-detail-item + .enq-detail-item {
border-top: 1px solid rgba(91, 18, 38, 0.1);
}
.enq-detail-item-image {
align-self: stretch;
overflow: hidden;
border-radius: 10px;
/* Min-height keeps the image readable when the spec/qty side is
short; align-self: stretch then lets it grow to the row's full
height when the right column is taller. No fixed aspect-ratio
(it was leaving empty bands above/below the image). */
min-height: 220px;
background: #f7efe5;
}
.enq-detail-item-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.enq-detail-item-chip {
display: inline-flex;
margin-bottom: 0.55rem;
padding: 0.25rem 0.55rem;
border-radius: 999px;
background: rgba(201, 162, 74, 0.18);
color: var(--vmc-gold-deep);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.enq-detail-item-main h3 {
margin: 0;
color: var(--vmc-burgundy-deep);
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: clamp(1.35rem, 2.15vw, 1.75rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: 0;
}
.enq-detail-item-main p {
margin: 0.25rem 0 1.15rem;
color: #8a7c76;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 0.95rem;
line-height: 1.35;
font-style: italic;
}
.enq-detail-specs {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
padding-top: 1.1rem;
border-top: 1px dashed rgba(91, 18, 38, 0.14);
}
/* Minimal stacked spec cell — top row: gold icon tile + uppercase label
(label sits horizontally next to the icon). Value row sits below in
bold. Matches the screenshot's quiet, evenly-spaced look. */
.enq-detail-spec {
flex: 0 1 auto;
min-width: 110px;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
grid-template-areas:
"icon label"
"val val";
column-gap: 0.5rem;
row-gap: 0.3rem;
padding: 0.65rem 0.9rem;
border: 1px solid rgba(91, 18, 38, 0.1);
border-radius: 10px;
background: #fff;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.enq-detail-spec > i {
grid-area: icon;
align-self: center;
justify-self: start;
color: var(--vmc-gold-deep);
font-size: 1rem;
line-height: 1;
width: 22px;
height: 22px;
display: inline-grid;
place-items: center;
}
.enq-detail-spec em {
grid-area: label;
align-self: center;
color: #8a7f83;
font-style: normal;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.enq-detail-spec b {
grid-area: val;
color: #2f2628;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0;
}
.enq-detail-spec--gold {
border-color: rgba(201, 162, 74, 0.32);
background:
linear-gradient(180deg, rgba(201, 162, 74, 0.10), rgba(201, 162, 74, 0.04));
}
.enq-detail-spec--gold > i { color: var(--vmc-gold-deep); }
.enq-detail-spec--gold b { color: var(--vmc-burgundy-deep); }
/* Quantity column — vertically centred against the item card, with a
thin gold-tinted divider on the left so the big number reads as a
distinct stat. Number is centred above the unit label. */
.enq-detail-qty {
position: relative;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem 0 0.5rem 1rem;
text-align: center;
text-transform: uppercase;
}
.enq-detail-qty::before {
content: '';
position: absolute;
left: 0;
top: 12%;
bottom: 12%;
width: 1px;
background: linear-gradient(180deg,
transparent,
rgba(91, 18, 38, 0.18) 18%,
rgba(91, 18, 38, 0.18) 82%,
transparent);
}
.enq-detail-qty strong {
display: block;
color: var(--vmc-burgundy-deep);
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
/* Scales down so long values (e.g. "10.000") never overflow. */
font-size: clamp(1.5rem, 1.9vw, 2.1rem);
font-weight: 800;
line-height: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
white-space: nowrap;
margin-bottom: 0.3rem;
}
.enq-detail-qty span {
display: block;
color: #8a7f83;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
}
.enq-detail-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid rgba(91, 18, 38, 0.12);
border-top: 0;
border-radius: 0 0 12px 12px;
background: #fffaf4;
}
.enq-detail-summary > div {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 0.85rem;
align-items: center;
padding: 1.15rem 1.25rem;
}
.enq-detail-summary > div + div {
border-left: 1px solid rgba(91, 18, 38, 0.08);
}
.enq-detail-summary .account-section-icon {
grid-row: 1 / span 3;
}
.enq-detail-summary p {
margin: 0 0 0.2rem;
color: #6f6770;
font-size: 0.7rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
.enq-detail-summary strong {
color: #2f2628;
font-size: 0.88rem;
font-weight: 800;
line-height: 1.28;
}
.enq-detail-summary small {
color: #6f6770;
font-size: 0.8rem;
font-weight: 500;
line-height: 1.4;
}
.enq-detail-timeline {
margin-top: 1.35rem;
padding: 1.35rem 1.5rem;
border: 1px solid rgba(91, 18, 38, 0.1);
border-radius: 10px;
background: #fff;
}
.enq-detail-timeline-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.enq-detail-timeline h3 {
margin: 0;
color: var(--vmc-burgundy-deep);
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0;
}
.enq-detail-timeline ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Timeline rows — left rail with a soft-blue circle icon, then stacked
activity title + date/time. No person attribution: this is the user's
own enquiry, the "who" is irrelevant. */
.enq-detail-timeline li {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 0.95rem;
align-items: center;
padding: 0.65rem 0;
}
.enq-detail-timeline li + li {
border-top: 1px solid rgba(91, 18, 38, 0.06);
}
/* Vertical connector line through the icon column. */
.enq-detail-timeline ol {
position: relative;
}
.enq-detail-timeline ol::before {
content: '';
position: absolute;
left: 21px;
top: 0.65rem;
bottom: 0.65rem;
width: 2px;
background: linear-gradient(180deg, rgba(76, 141, 246, 0.35), rgba(76, 141, 246, 0.08));
pointer-events: none;
}
.enq-timeline-icon {
position: relative;
z-index: 1;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 999px;
/* Solid white base under the translucent tint so the vertical
connector line cannot show through the icon. The outer white ring
(box-shadow) masks the line right up to the circle's edge. */
background:
linear-gradient(rgba(76, 141, 246, 0.12), rgba(76, 141, 246, 0.12)),
#fff;
color: #2f6fde;
font-size: 1.05rem;
box-shadow: 0 0 0 4px #fff;
}
.enq-detail-timeline li:first-child .enq-timeline-icon {
background: #2f6fde;
color: #fff;
/* Keep the white masking ring so the connector line stops at the
circle, then layer the soft blue glow on top. */
box-shadow:
0 0 0 4px #fff,
0 6px 16px rgba(47, 111, 222, 0.28);
}
.enq-detail-timeline li > div { min-width: 0; }
.enq-detail-timeline time,
.enq-detail-timeline p {
margin: 0;
display: block;
}
.enq-detail-timeline p {
color: var(--vmc-burgundy-deep);
font-size: 0.92rem;
font-weight: 800;
letter-spacing: 0;
}
.enq-detail-timeline time {
color: #7a7074;
font-size: 0.8rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
margin-top: 0.2rem;
}
/* Legacy dot — keep the rule so old markup still works visually. */
.enq-timeline-dot { display: none; }
@media print {
.account-sidebar,
.vmc-header,
.vmc-footer,
.enq-detail-actions,
.enq-back-pill,
.vmc-mobile-fab {
display: none !important;
}
.account-shell {
display: block;
}
.account-panel {
box-shadow: none !important;
}
}
@media (max-width: 1199.98px) {
.enq-detail-item {
grid-template-columns: 220px minmax(0, 1fr) 80px;
gap: 1.2rem;
}
.enq-detail-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.enq-detail-summary > div:nth-child(3) {
grid-column: 1 / -1;
border-left: 0;
border-top: 1px solid rgba(91, 18, 38, 0.08);
}
}
@media (max-width: 767.98px) {
.enq-detail-topbar,
.enq-detail-timeline-head {
align-items: stretch;
flex-direction: column;
}
.enq-detail-actions .btn {
flex: 1 1 auto;
}
/* Mobile item card: single column so the main content (and the specs
grid inside it) gets the FULL card width. The qty badge is overlaid
on the image's top-right corner instead of reserving a column that
would squeeze the specs into a narrow strip. */
.enq-detail-item {
position: relative;
grid-template-columns: 1fr;
grid-template-areas:
"image"
"main";
gap: 1rem;
padding: 1rem;
align-items: start;
}
.enq-detail-item-image { grid-area: image; min-height: 180px; }
.enq-detail-item-main { grid-area: main; min-width: 0; }
/* Qty badge — gold-tinted pill overlaid on the image corner. */
.enq-detail-qty {
position: absolute;
top: 1.6rem;
right: 1.6rem;
z-index: 2;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 0.45rem 0.7rem;
border: 1px solid rgba(201, 162, 74, 0.4);
border-radius: 12px;
background: rgba(255, 250, 244, 0.92);
box-shadow: 0 6px 16px rgba(60, 30, 20, 0.28);
backdrop-filter: blur(2px);
text-align: center;
}
.enq-detail-qty::before { display: none; }
.enq-detail-qty strong { font-size: 1.5rem; margin-bottom: 0.1rem; }
.enq-detail-qty span { font-size: 0.6rem; letter-spacing: 0.14em; }
/* Specs — 2-column grid. Now that the item is single-column, each
card gets ~half the FULL card width, which is wide enough for the
icon-left / label+value-right layout with no wrapping or clipping. */
.enq-detail-specs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: 0.55rem;
align-items: stretch;
}
.enq-detail-spec {
width: 100%;
height: 100%;
min-width: 0;
grid-template-columns: 24px minmax(0, 1fr);
grid-template-areas:
"icon label"
"icon val";
align-items: center;
align-content: center;
column-gap: 0.5rem;
row-gap: 0.15rem;
padding: 0.7rem 0.85rem;
}
.enq-detail-spec > i {
grid-area: icon;
align-self: center;
justify-self: center;
font-size: 1.15rem;
}
.enq-detail-spec em {
align-self: end;
white-space: nowrap;
line-height: 1.15;
}
.enq-detail-spec b {
align-self: start;
font-size: 1.05rem;
}
.enq-detail-summary {
grid-template-columns: 1fr;
}
.enq-detail-summary > div + div,
.enq-detail-summary > div:nth-child(3) {
border-top: 1px solid rgba(91, 18, 38, 0.08);
border-left: 0;
}
.enq-detail-timeline li {
grid-template-columns: 40px 1fr;
gap: 0.75rem;
}
.enq-detail-timeline ol::before { left: 19px; }
.enq-timeline-icon { width: 40px; height: 40px; font-size: 1rem; }
}
/* Three-feature perks strip below the Create-account button. Each row
is icon-left, label-right; vertical gold dividers separate the three
columns. */
.auth-register-perks {
list-style: none;
margin: 0.9rem 0 0.2rem;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.auth-register-perks li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.4rem 0.55rem;
/* Vertical separator between perks — paint it on each 's right
edge and strip it off the last one. Gradient so it fades top + bottom
and sits visually centred. */
border-right: 1px solid transparent;
border-image: linear-gradient(180deg,
transparent,
rgba(201, 162, 74, 0.55) 25%,
rgba(201, 162, 74, 0.55) 75%,
transparent) 1;
}
.auth-register-perks li:last-child {
border-right: 0;
}
.auth-register-perk-icon {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(201, 162, 74, 0.14), rgba(201, 162, 74, 0.05));
border: 1px solid rgba(201, 162, 74, 0.35);
color: var(--vmc-burgundy);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex: 0 0 auto;
transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.auth-register-perks li:hover .auth-register-perk-icon {
transform: translateY(-2px);
color: var(--vmc-burgundy-deep);
box-shadow: 0 6px 14px -10px rgba(58, 13, 24, 0.4);
}
.auth-register-perk-label {
font-size: 0.72rem;
line-height: 1.2;
color: var(--vmc-muted);
font-weight: 600;
text-align: left;
}
/* Notice block on /register.php — replaces the password field with a
reassuring "OTP-based signup" explanation so first-time visitors
understand why we're not asking for a password. */
.auth-otp-notice {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.75rem 0.9rem;
background: linear-gradient(180deg, rgba(201, 162, 74, 0.10), rgba(201, 162, 74, 0.03));
border: 1px solid rgba(201, 162, 74, 0.35);
border-radius: 10px;
color: var(--vmc-burgundy-deep);
font-size: 0.85rem;
}
.auth-otp-notice > i {
color: var(--vmc-gold-deep);
font-size: 1.15rem;
margin-top: 1px;
flex: 0 0 auto;
}
.auth-otp-notice strong {
display: block;
font-weight: 700;
margin-bottom: 0.1rem;
}
.auth-otp-notice span {
color: var(--vmc-muted);
font-size: 0.8rem;
line-height: 1.4;
}
/* =====================================================================
Mobile input — fixed +91 prefix chip in front of a 10-digit input.
Used across register, login (OTP request), forgot-password, account,
and the admin user editor so the stored format is always canonical.
===================================================================== */
.mobile-input-group {
flex-wrap: nowrap;
}
.mobile-input-group .mobile-cc {
font-weight: 700;
background: var(--vmc-soft);
color: var(--vmc-burgundy-deep);
border-color: var(--vmc-line);
letter-spacing: 0.02em;
}
.mobile-input-group .form-control {
/* Slightly tighter than default so the 10-digit field doesn't look
cavernous next to the small +91 chip. */
font-variant-numeric: tabular-nums;
letter-spacing: 0.05em;
}
/* Bootstrap's .is-invalid styling only paints the .form-control, not the
input-group wrapper. Mirror it onto the wrapper so the +91 chip turns
red too when validation fails. */
.mobile-input-group.is-invalid .mobile-cc {
border-color: #b82943;
background: rgba(184, 41, 67, 0.08);
color: #b82943;
}
.mobile-input-group.is-invalid .form-control {
border-color: #b82943;
}
/* ===================================================================
Admins tab — "Promote a registered user" live search + Demote button
Role management lives entirely on admin/admins.php now; the search box
queries admin/users-search.php as you type.
=================================================================== */
.admin-user-search { position: relative; }
.admin-user-search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--vmc-muted, #9a8f7d);
pointer-events: none;
font-size: 0.95rem;
}
.admin-user-search-input { padding-left: 2.2rem; }
.admin-user-search-results {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
z-index: 30;
background: #fff;
border: 1px solid var(--vmc-line, #e3d6b8);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(40, 22, 12, 0.14);
max-height: 320px;
overflow-y: auto;
padding: 0.35rem;
}
.admin-user-search-result {
display: block;
width: 100%;
text-align: left;
border: 0;
background: transparent;
border-radius: 9px;
padding: 0.5rem 0.6rem;
cursor: pointer;
transition: background 120ms ease;
}
.admin-user-search-result:hover,
.admin-user-search-result:focus-visible {
background: rgba(201, 162, 74, 0.14);
outline: none;
}
.admin-user-search-result .aus-name {
display: block;
font-weight: 600;
color: var(--vmc-coffee-deep, #3a221a);
}
.admin-user-search-result .aus-meta {
display: block;
font-size: 0.8rem;
color: var(--vmc-muted, #9a8f7d);
}
.admin-user-search-empty {
padding: 0.6rem 0.6rem;
font-size: 0.85rem;
color: var(--vmc-muted, #9a8f7d);
}
.admin-promote-chosen {
background: rgba(201, 162, 74, 0.1);
border: 1px dashed var(--vmc-gold-soft, #d6b768);
border-radius: 10px;
padding: 0.55rem 0.7rem;
font-size: 0.9rem;
color: var(--vmc-coffee-deep, #3a221a);
}
/* Demote button on each admin row — amber, sits between Edit and Delete. */
.admin-row-btn--demote {
color: #9a6b12;
border-color: rgba(154, 107, 18, 0.35);
}
.admin-row-btn--demote:hover {
background: rgba(201, 162, 74, 0.16);
color: #7c5410;
border-color: rgba(154, 107, 18, 0.55);
}
/* ===================================================================
Admins list — card layout (identity + ⋯ actions menu + mail switch)
Replaces the old action-heavy .admin-row. Each admin is a clean card:
avatar + name/role + contact on top, an Enquiry-mail switch below, and
Edit/Demote/Remove tucked into a ⋯ dropdown.
=================================================================== */
.admins-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.admin-card {
border: 1px solid var(--vmc-line-strong);
border-radius: 14px;
background: linear-gradient(180deg, #fff 0%, #fffdf8 100%);
padding: 0.85rem 0.95rem;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.admin-card:hover {
border-color: var(--vmc-gold-soft, #d6b768);
box-shadow: 0 6px 18px -10px rgba(140, 112, 38, 0.4);
}
.admin-card.is-editing {
border-color: var(--vmc-gold-deep, #8b6a1f);
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}
.admin-card.is-self {
background: linear-gradient(180deg, #fff 0%, #f7f1e3 100%);
}
.admin-card-head {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.admin-card-avatar {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.05rem;
color: var(--vmc-burgundy-deep, #5b1226);
background: linear-gradient(135deg, var(--vmc-gold-soft, #d6b768), var(--vmc-gold, #c9a24a));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.admin-card-id { flex: 1 1 auto; min-width: 0; }
.admin-card-name-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
}
.admin-card-name {
font-size: 1rem;
color: var(--vmc-coffee-deep, #3a221a);
}
.admin-card-contact {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.9rem;
margin-top: 0.3rem;
}
.admin-card-link {
display: inline-flex;
align-items: center;
gap: 0.32rem;
max-width: 100%;
font-size: 0.82rem;
color: var(--vmc-muted, #9a8f7d);
text-decoration: none;
}
.admin-card-link span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-card-link i { color: var(--vmc-gold-deep, #8b6a1f); }
.admin-card-link:hover { color: var(--vmc-burgundy, #7a1f33); }
/* ⋯ actions menu */
.admin-card-menu { flex: 0 0 auto; }
.admin-card-menu-btn {
border: 1px solid transparent;
background: transparent;
color: var(--vmc-muted, #9a8f7d);
width: 34px;
height: 34px;
border-radius: 9px;
display: inline-grid;
place-items: center;
cursor: pointer;
font-size: 1.1rem;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.admin-card-menu-btn:hover,
.admin-card-menu-btn[aria-expanded="true"] {
background: rgba(201, 162, 74, 0.14);
color: var(--vmc-coffee-deep, #3a221a);
border-color: var(--vmc-line-strong);
}
.admin-card-menu-list {
--bs-dropdown-min-width: 12.5rem;
border-radius: 12px;
border-color: var(--vmc-line, #e3d6b8);
box-shadow: 0 12px 32px rgba(40, 22, 12, 0.16);
padding: 0.35rem;
}
.admin-card-menu-list .dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 8px;
padding: 0.5rem 0.6rem;
font-size: 0.9rem;
}
.admin-card-menu-list .dropdown-item i {
font-size: 1rem;
color: var(--vmc-gold-deep, #8b6a1f);
}
.admin-card-menu-list form { margin: 0; }
.admin-card-menu-list .dropdown-item:hover { background: rgba(201, 162, 74, 0.14); }
.admin-card-menu-danger { color: #b3331f; }
.admin-card-menu-danger i { color: #c0392b !important; }
.admin-card-menu-danger:hover { background: #fde2e0 !important; color: #9a2a18; }
.admin-card-menu-note {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.85rem;
color: var(--vmc-muted, #9a8f7d);
}
.admin-card-menu-note i { color: var(--vmc-muted, #9a8f7d); }
/* Enquiry-mail row: label + compact labelled switch */
.admin-card-mail {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px dashed var(--vmc-line, #e3d6b8);
}
.admin-card-mail-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.84rem;
font-weight: 600;
color: var(--vmc-muted, #9a8f7d);
}
.admin-card-mail-label i { color: var(--vmc-gold-deep, #8b6a1f); }
.admin-card-mail-form { margin: 0; }
.admin-mail-switch {
display: inline-flex;
align-items: center;
gap: 0.45rem;
border: 1px solid var(--vmc-line-strong);
background: #f3eee2;
color: var(--vmc-muted, #9a8f7d);
border-radius: 999px;
padding: 0.2rem 0.65rem 0.2rem 0.28rem;
cursor: pointer;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.admin-mail-switch-track {
position: relative;
flex: 0 0 auto;
width: 30px;
height: 18px;
border-radius: 999px;
background: var(--vmc-muted, #9a8f7d);
transition: background 180ms ease;
}
.admin-mail-switch-knob {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.admin-mail-switch.is-on {
background: linear-gradient(180deg, #fffaf0, #f6e3b8);
border-color: var(--vmc-gold-deep, #8b6a1f);
color: var(--vmc-burgundy-deep, #5b1226);
}
.admin-mail-switch.is-on .admin-mail-switch-track {
background: linear-gradient(180deg, var(--vmc-gold, #c9a24a), var(--vmc-gold-deep, #8b6a1f));
}
.admin-mail-switch.is-on .admin-mail-switch-knob { transform: translateX(12px); }
.admin-mail-switch:hover { border-color: var(--vmc-gold, #c9a24a); }
.admin-mail-switch:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.22);
}
/* ===================================================================
Account page upgrades — profile hero, enquiry cards, mobile tabs
=================================================================== */
/* ---- Profile hero header (simple + clean: flat white, light border) ---- */
.account-hero {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
margin-bottom: 1.4rem;
border: 1px solid var(--vmc-line, #e3d6b8);
border-radius: 14px;
background: #fff;
}
.account-hero-avatar {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--vmc-font-display, "Playfair Display", serif);
font-weight: 700;
font-size: 1.35rem;
color: #fff;
background: linear-gradient(135deg, var(--vmc-gold, #c9a24a), var(--vmc-gold-deep, #8b6a1f));
}
.account-hero-id { flex: 1 1 auto; min-width: 0; }
.account-hero-name {
margin: 0 0 0.18rem;
font-family: var(--vmc-font-display, "Playfair Display", serif);
font-size: 1.4rem;
color: var(--vmc-coffee-deep, #3a221a);
line-height: 1.15;
}
.account-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
margin: 0;
font-size: 0.85rem;
color: var(--vmc-muted, #9a8f7d);
}
.account-hero-meta span { display: inline-flex; align-items: center; }
.account-hero-meta span + span::before {
content: "·";
margin: 0 0.55rem;
color: var(--vmc-line-strong, #d8c9a6);
}
.account-hero-verified { color: #2e9b57 !important; margin-left: 0.3rem; }
.account-hero-stats {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.account-hero-stat {
text-align: center;
padding: 0 1.05rem;
}
.account-hero-stat + .account-hero-stat { border-left: 1px solid var(--vmc-line, #e3d6b8); }
.account-hero-stat strong {
display: block;
font-family: var(--vmc-font-display, "Playfair Display", serif);
font-size: 1.3rem;
color: var(--vmc-burgundy, #7a1f33);
line-height: 1;
}
.account-hero-stat span {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--vmc-muted, #9a8f7d);
}
/* ---- Enquiry list as cards ---- */
.account-enquiry-cards {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 1rem;
}
.account-enquiry-card {
display: grid;
grid-template-columns: 84px minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
padding: 0.8rem;
border: 1px solid var(--vmc-line, #e3d6b8);
border-radius: 14px;
background: #fff;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.account-enquiry-card:hover {
border-color: var(--vmc-gold-soft, #d6b768);
box-shadow: 0 10px 26px -14px rgba(140, 112, 38, 0.45);
}
.account-enquiry-card-thumb {
position: relative;
display: block;
width: 84px;
height: 84px;
border-radius: 11px;
overflow: hidden;
background: #f7f1e3;
border: 1px solid var(--vmc-line, #e3d6b8);
}
.account-enquiry-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-enquiry-card-more {
position: absolute;
right: 4px;
bottom: 4px;
background: rgba(47, 38, 40, 0.82);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
padding: 0.1rem 0.4rem;
border-radius: 999px;
}
.account-enquiry-card-body { min-width: 0; }
.account-enquiry-card-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.2rem;
}
.account-enquiry-card-no {
font-family: var(--vmc-font-mono, ui-monospace, monospace);
font-weight: 700;
font-size: 0.95rem;
color: var(--vmc-coffee-deep, #3a221a);
text-decoration: none;
}
.account-enquiry-card-no:hover { color: var(--vmc-burgundy, #7a1f33); text-decoration: underline; }
.account-enquiry-card-items {
margin: 0 0 0.3rem;
font-size: 0.86rem;
color: var(--vmc-coffee-deep, #3a221a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-enquiry-card-meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
font-size: 0.8rem;
color: var(--vmc-muted, #9a8f7d);
}
.account-enquiry-card-meta span { display: inline-flex; align-items: center; gap: 0.32rem; }
.account-enquiry-card-meta i { color: var(--vmc-gold-deep, #8b6a1f); }
.account-enquiry-card-actions {
display: flex;
align-items: center;
gap: 0.4rem;
}
.account-enquiry-card-actions form { margin: 0; }
/* Quiet, compact card action buttons — nominal size, modern */
.account-enq-action {
display: inline-flex;
align-items: center;
gap: 0.32rem;
padding: 0.32rem 0.62rem;
border: 1px solid var(--vmc-line-strong, #d8c9a6);
border-radius: 8px;
background: #fff;
color: var(--vmc-coffee-deep, #3a221a);
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.account-enq-action i { font-size: 0.9rem; color: var(--vmc-gold-deep, #8b6a1f); }
.account-enq-action:hover {
border-color: var(--vmc-gold, #c9a24a);
background: rgba(201, 162, 74, 0.08);
}
.account-enq-action--reorder { color: var(--vmc-burgundy, #7a1f33); }
.account-enq-action--reorder i { color: var(--vmc-burgundy, #7a1f33); }
.account-enq-action--reorder:hover { border-color: var(--vmc-burgundy, #7a1f33); background: rgba(122, 31, 51, 0.06); }
.account-enquiry-cards-empty {
text-align: center;
color: var(--vmc-muted, #9a8f7d);
padding: 1.5rem;
font-size: 0.9rem;
}
.account-enquiry-cards-empty i { color: var(--vmc-gold-deep, #8b6a1f); }
.account-empty-state { margin-top: 0.5rem; }
/* ---- Enquiry pagination ---- */
.account-enquiry-pager {
display: flex;
justify-content: center;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
margin-top: 1.1rem;
}
.account-pager-btn {
min-width: 34px;
height: 34px;
padding: 0 0.55rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--vmc-line-strong, #d8c9a6);
border-radius: 8px;
background: #fff;
color: var(--vmc-coffee-deep, #3a221a);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.account-pager-btn:hover:not(:disabled):not(.is-active) {
border-color: var(--vmc-gold, #c9a24a);
background: rgba(201, 162, 74, 0.08);
}
.account-pager-btn.is-active {
background: linear-gradient(180deg, var(--vmc-gold, #c9a24a), var(--vmc-gold-deep, #8b6a1f));
border-color: var(--vmc-gold-deep, #8b6a1f);
color: #fff;
cursor: default;
}
.account-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ---- Mobile tab UX: 3 compact tabs that FIT the width (no scroll) ---- */
@media (max-width: 767.98px) {
.account-sidebar {
padding: 0.4rem;
}
.account-rail {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
overflow: visible;
}
.account-rail .nav-link {
min-height: 0;
grid-template-columns: 1fr;
gap: 0.25rem;
padding: 0.55rem 0.3rem;
text-align: center;
border: 1px solid var(--vmc-line, #e3d6b8);
}
.account-rail .nav-link.active {
box-shadow: inset 0 -3px 0 var(--vmc-gold);
border-color: var(--vmc-gold-soft, #d6b768);
}
.account-rail-icon { width: 32px; height: 32px; font-size: 0.95rem; margin: 0 auto; }
.account-rail strong {
display: block;
margin-bottom: 0;
font-size: 0.76rem;
white-space: nowrap;
}
/* Shrink the enquiry count badge so "Enquiries 8" fits the narrow tab. */
.account-rail strong em {
min-width: 17px;
height: 17px;
margin-left: 0.25rem;
font-size: 0.6rem;
}
/* The descriptive sub-line is noise on the compact mobile tabs. */
.account-rail small { display: none; }
.account-help-card { display: none; }
/* Profile hero stacks */
.account-hero { flex-wrap: wrap; gap: 0.85rem; }
.account-hero-stats { width: 100%; }
.account-hero-stat { flex: 1 1 0; }
/* Enquiry card reflows: thumb + body on top, actions full-width below */
.account-enquiry-card {
grid-template-columns: 64px minmax(0, 1fr);
grid-template-areas: "thumb body" "actions actions";
gap: 0.75rem;
}
.account-enquiry-card-thumb { grid-area: thumb; width: 64px; height: 64px; }
.account-enquiry-card-body { grid-area: body; }
.account-enquiry-card-actions {
grid-area: actions;
}
.account-enquiry-card-actions form { flex: 1 1 0; }
.account-enquiry-card-actions .account-enq-action { flex: 1 1 0; width: 100%; justify-content: center; }
/* Sticky save bar on the profile form so Save is always reachable.
No negative margins (avoids horizontal overflow across panel paddings). */
.account-profile-form .account-form-footer {
position: sticky;
bottom: 0;
z-index: 5;
padding: 0.85rem 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.98) 45%);
border-top: 1px solid var(--vmc-line, #e3d6b8);
backdrop-filter: blur(4px);
}
}
/* ===================================================================
Enquiry detail (enq2) — full redesign: 2-col dashboard, sticky
Summary + Timeline aside, compact non-overflowing qty badge.
Replaces the old .enq-detail-* layout (still used: .enq-back-pill).
=================================================================== */
.enq2-page { padding: clamp(1.1rem, 2.2vw, 1.9rem); }
.enq2-topbar {
display: flex; justify-content: space-between; align-items: center;
gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.enq2-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.enq2-action {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.5rem 0.85rem; border: 1px solid var(--vmc-line-strong, #d8c9a6);
border-radius: 10px; background: #fff; color: var(--vmc-coffee-deep, #3a221a);
font-size: 0.85rem; font-weight: 600; cursor: pointer;
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.enq2-action i { color: var(--vmc-gold-deep, #8b6a1f); }
.enq2-action:hover { border-color: var(--vmc-gold, #c9a24a); background: rgba(201,162,74,.08); }
/* Gold CTA matching the site's .btn-gold-shine — gradient, dark text,
raised sheen. A bright band sweeps left→right on hover. */
.enq2-action--primary {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(180deg, #e8cf86, #c9a24a);
border-color: #8b6320;
color: #3a1410;
font-weight: 700;
/* text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55); */
/* box-shadow:
inset 0 1px 0 rgba(255, 250, 220, 0.85),
inset 0 -1px 0 rgba(120, 75, 20, 0.45),
0 4px 12px rgba(168, 118, 30, 0.3); */
}
.enq2-action--primary i { color: #3a1410; }
/* Shine band — parked off-screen left, slides across on hover. z-index:-1
inside the isolated button keeps it above the gold fill but under the
icon/label (which are in-flow inline, so they paint on top). */
.enq2-action--primary::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 65%;
height: 100%;
z-index: -1;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
transform: translateX(-160%);
transition: transform 0.6s ease;
pointer-events: none;
}
.enq2-action--primary:hover {
color: #3a1410;
border-color: #8b6320;
transform: translateY(-1px);
background: linear-gradient(180deg, #edd590, #cda647);
/* box-shadow:
inset 0 1px 0 rgba(255, 250, 220, 0.95),
inset 0 -1px 0 rgba(120, 75, 20, 0.45),
0 8px 18px rgba(168, 118, 30, 0.45); */
}
.enq2-action--primary:hover::before { transform: translateX(160%); }
@media (prefers-reduced-motion: reduce) {
.enq2-action--primary::before { transition: none; }
}
/* Footer — utility export actions (Download PDF / Print) sit at the bottom,
after the content, so the header stays clean (Back + Reorder only). */
.enq2-foot {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-top: 1.5rem; padding-top: 1.1rem;
border-top: 1px solid var(--vmc-line, #e3d6b8);
}
.enq2-foot-label {
font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--vmc-muted, #9a8f7d);
}
.enq2-foot-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.enq2-head { display: block; }
.enq2-head-no-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.enq2-head-eyebrow {
display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--vmc-gold-deep, #8b6a1f);
}
.enq2-head-no {
margin: 0.1rem 0 0; font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--vmc-burgundy-deep, #5b1226);
line-height: 1.05;
}
.enq2-head-status { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
.enq2-meta {
display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem;
margin: 0.3rem 0 1.4rem; font-size: 0.85rem; color: var(--vmc-muted, #9a8f7d);
}
.enq2-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.enq2-meta i { color: var(--vmc-gold-deep, #8b6a1f); }
.enq2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.enq2-main { min-width: 0; }
.enq2-section-title {
display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem;
font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--vmc-coffee-deep, #3a221a);
}
.enq2-section-title span {
display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 0.4rem;
border-radius: 999px; background: rgba(201,162,74,.18); color: var(--vmc-gold-deep, #8b6a1f); font-size: 0.74rem;
}
.enq2-items { display: flex; flex-direction: column; gap: 0.85rem; }
.enq2-item {
display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem;
padding: 0.85rem; border: 1px solid var(--vmc-line, #e3d6b8); border-radius: 14px; background: #fff;
transition: border-color .16s ease, box-shadow .16s ease;
}
.enq2-item:hover { border-color: var(--vmc-gold-soft, #d6b768); box-shadow: 0 10px 24px -16px rgba(140,112,38,.5); }
.enq2-item-media {
position: relative; width: 120px; height: 120px; border-radius: 11px; overflow: hidden;
background: #f7efe5; border: 1px solid var(--vmc-line, #e3d6b8);
}
.enq2-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enq2-item-index {
position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; display: grid; place-items: center;
border-radius: 999px; background: rgba(47,38,40,.82); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0 0.3rem;
}
.enq2-item-info { min-width: 0; display: flex; flex-direction: column; }
.enq2-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.enq2-item-name {
margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 2rem;
font-weight: 700; color: var(--vmc-burgundy-deep, #5b1226); line-height: 1.15;
}
.enq2-item-sub { margin: 0.15rem 0 0; font-size: 0.82rem; font-style: italic; color: #8a7c76; }
.enq2-qty {
flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 0.3rem 0.7rem; border-radius: 10px; background: rgba(201,162,74,.1);
border: 1px solid rgba(201,162,74,.28); white-space: nowrap;
}
.enq2-qty strong {
font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; font-weight: 800;
color: var(--vmc-burgundy-deep, #5b1226); line-height: 1; font-variant-numeric: tabular-nums;
}
.enq2-qty em {
font-style: normal; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase; color: #8a7f83; margin-top: 0.18rem;
}
.enq2-chips {
display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; padding-top: 0.7rem;
border-top: 1px dashed rgba(91,18,38,.14);
}
.enq2-chip {
display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.6rem;
border: 1px solid var(--vmc-line, #e3d6b8); border-radius: 8px; background: #fff;
line-height: 1; font-variant-numeric: tabular-nums;
}
.enq2-chip i { color: var(--vmc-gold-deep, #8b6a1f); font-size: 0.9rem; }
.enq2-chip em {
font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
text-transform: uppercase; color: #8a7f83;
}
.enq2-chip b { font-size: 0.85rem; font-weight: 700; color: #2f2628; }
.enq2-chip--gold {
border-color: rgba(201,162,74,.34);
background: linear-gradient(180deg, rgba(201,162,74,.1), rgba(201,162,74,.04));
}
.enq2-chip--gold b { color: var(--vmc-burgundy-deep, #5b1226); }
.enq2-aside { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 96px; }
.enq2-card { border: 1px solid var(--vmc-line, #e3d6b8); border-radius: 14px; background: #fff; padding: 1.1rem 1.15rem; }
.enq2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.85rem; }
.enq2-card-title {
display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem;
font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--vmc-coffee-deep, #3a221a);
}
.enq2-card-head .enq2-card-title { margin-bottom: 0; }
.enq2-card-title i { color: var(--vmc-gold-deep, #8b6a1f); }
.enq2-history-btn {
border: 0; background: transparent; color: var(--vmc-burgundy, #7a1f33);
font-size: 0.78rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
}
.enq2-history-btn:hover { text-decoration: underline; }
.enq2-summary { margin: 0; display: flex; flex-direction: column; }
.enq2-summary > div {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
padding: 0.55rem 0; border-bottom: 1px solid rgba(91,18,38,.07);
}
.enq2-summary > div:last-child { border-bottom: 0; padding-bottom: 0; }
.enq2-summary dt { margin: 0; font-size: 0.78rem; color: var(--vmc-muted, #9a8f7d); font-weight: 600; }
.enq2-summary dd { margin: 0; font-size: 0.86rem; font-weight: 600; color: #2f2628; text-align: right; }
.enq2-summary-notes { flex-direction: column; align-items: stretch; }
.enq2-summary-notes dd { text-align: left; margin-top: 0.3rem; font-weight: 500; line-height: 1.5; color: #3a221a; }
.enq2-summary-notes dd.is-empty { color: var(--vmc-muted, #9a8f7d); font-style: italic; }
.enq2-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.enq2-timeline::before {
content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px;
background: linear-gradient(180deg, rgba(201,162,74,.5), rgba(201,162,74,.12));
}
.enq2-timeline li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0.7rem; padding: 0.3rem 0 0.6rem; }
.enq2-timeline li:last-child { padding-bottom: 0; }
.enq2-tl-dot {
position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center;
border-radius: 50%; background: #fff; border: 2px solid rgba(201,162,74,.45);
color: var(--vmc-gold-deep, #8b6a1f); font-size: 0.8rem; box-shadow: 0 0 0 3px #fff;
}
.enq2-timeline li.is-origin .enq2-tl-dot { background: var(--vmc-burgundy, #7a1f33); border-color: var(--vmc-burgundy, #7a1f33); color: #fff; }
.enq2-tl-body p { margin: 0; font-size: 0.85rem; font-weight: 600; color: #2f2628; }
.enq2-tl-body time { font-size: 0.74rem; color: var(--vmc-muted, #9a8f7d); }
@media (max-width: 991.98px) {
.enq2-grid { grid-template-columns: 1fr; }
.enq2-aside { position: static; }
}
@media (max-width: 575.98px) {
/* Reflow: image + name/qty on the top row; chips span the FULL card
width below as a 2-col grid (no more wasted right-hand space).
display:contents hoists the info children into the item grid so the
chip row can span both columns. */
.enq2-item {
grid-template-columns: 72px minmax(0, 1fr);
grid-template-areas:
"media head"
"chips chips";
column-gap: 0.8rem;
row-gap: 0.65rem;
padding: 0.75rem;
align-items: start;
}
.enq2-item-media { grid-area: media; width: 72px; height: 72px; }
.enq2-item-info { display: contents; }
.enq2-item-top { grid-area: head; }
.enq2-item-name { font-size: 1.5rem; }
.enq2-item-top { flex-wrap: wrap; }
.enq2-qty { padding: 0.25rem 0.55rem; }
.enq2-qty strong { font-size: 1.05rem; }
.enq2-chips {
grid-area: chips;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
margin-top: 0;
padding-top: 0.65rem;
}
.enq2-chip { width: 100%; }
/* Topbar: Back (left) + Reorder (right) on one row. */
.enq2-topbar { gap: 0.6rem; align-items: center; }
.enq-back-pill { padding: 0.5rem 0.85rem; }
.enq2-action { padding: 0.5rem 0.8rem; }
/* Footer export buttons go full-width side by side. */
.enq2-foot { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.enq2-foot-actions { width: 100%; }
.enq2-foot-actions .enq2-action { flex: 1 1 0; justify-content: center; }
}
@media print {
.enq2-topbar, .enq2-actions, .enq-back-pill, .enq2-foot { display: none !important; }
.enq2-grid { grid-template-columns: 1fr; }
.enq2-item, .enq2-card { break-inside: avoid; }
}
/* Specificity bumps — global `.account-panel h2` (1.1rem) was overriding the
card titles; the .enq2-page prefix wins it back. Also swaps the enquiry
number + qty number to the sans face (Playfair read odd on codes/figures). */
.enq2-page .enq2-card-title {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--vmc-coffee-deep, #3a221a);
margin: 0 0 0.85rem;
}
.enq2-page .enq2-card-head .enq2-card-title { margin: 0; }
.enq2-page .enq2-head-no {
font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: -1px;
}
.enq2-page .enq2-qty strong { font-family: var(--vmc-font-sans); font-weight: 800; }
/* ===================================================================
Mini-cart drawer — slide-in panel (cart icon / add-to-cart)
=================================================================== */
body.minicart-lock { overflow: hidden; }
.minicart-backdrop {
position: fixed;
inset: 0;
z-index: 1080;
background: rgba(40, 16, 22, 0.42);
opacity: 0;
transition: opacity 0.26s ease;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
}
.minicart-backdrop.is-open { opacity: 1; }
.minicart {
position: fixed;
top: 0;
right: 0;
z-index: 1090;
width: min(380px, 92vw);
height: 100%;
display: flex;
flex-direction: column;
background: var(--vmc-soft, #fdf8ef);
border-left: 1px solid var(--vmc-line, #e3d6b8);
box-shadow: -18px 0 48px rgba(58, 13, 24, 0.22);
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.minicart.is-open { transform: translateX(0); }
.minicart-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.15rem;
border-bottom: 1px solid var(--vmc-line, #e3d6b8);
background: #fff;
}
.minicart-head h2 {
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--vmc-font-sans);
font-size: 1rem;
font-weight: 800;
color: var(--vmc-burgundy-deep, #5b1226);
}
.minicart-head h2 i { color: var(--vmc-gold-deep, #8b6a1f); }
.minicart-count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 0.4rem;
border-radius: 999px;
background: rgba(201, 162, 74, 0.2);
color: var(--vmc-gold-deep, #8b6a1f);
font-size: 0.74rem;
font-weight: 800;
}
.minicart-close {
border: 1px solid var(--vmc-line-strong, #d8c9a6);
background: #fff;
width: 34px;
height: 34px;
border-radius: 9px;
display: inline-grid;
place-items: center;
cursor: pointer;
color: var(--vmc-coffee-deep, #3a221a);
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.minicart-close:hover { background: rgba(201, 162, 74, 0.12); border-color: var(--vmc-gold, #c9a24a); }
.minicart-body { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem 0.9rem; }
.minicart-line {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.4rem;
border-bottom: 1px solid rgba(91, 18, 38, 0.07);
}
.minicart-thumb {
width: 52px;
height: 52px;
border-radius: 9px;
overflow: hidden;
background: #f7efe5;
border: 1px solid var(--vmc-line, #e3d6b8);
display: block;
}
.minicart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.minicart-line-body { min-width: 0; }
.minicart-name {
margin: 0;
font-size: 0.86rem;
font-weight: 700;
color: var(--vmc-coffee-deep, #3a221a);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.minicart-spec {
margin: 0.1rem 0 0;
font-size: 0.74rem;
color: var(--vmc-muted, #9a8f7d);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.minicart-qty {
font-size: 0.8rem;
font-weight: 800;
color: var(--vmc-burgundy, #7a1f33);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.minicart-empty {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
text-align: center;
color: var(--vmc-muted, #9a8f7d);
padding: 2rem 1.2rem;
}
.minicart-empty i { font-size: 2rem; color: var(--vmc-gold, #c9a24a); }
.minicart-empty p { margin: 0; }
.minicart-foot {
border-top: 1px solid var(--vmc-line, #e3d6b8);
background: #fff;
padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.minicart-totals {
text-align: center;
font-size: 0.82rem;
color: var(--vmc-muted, #9a8f7d);
margin-bottom: 0.1rem;
}
.minicart-totals strong { color: var(--vmc-coffee-deep, #3a221a); }
.minicart-cta { width: 100%; }
.minicart-loading { display: grid; place-items: center; padding: 2.5rem 0; }
.minicart-spinner {
width: 26px; height: 26px;
border: 3px solid rgba(201, 162, 74, 0.32);
border-top-color: var(--vmc-gold-deep, #8b6a1f);
border-radius: 50%;
animation: cartSpin 0.6s linear infinite;
}
.minicart-error { padding: 1.5rem; text-align: center; color: var(--vmc-muted, #9a8f7d); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
.minicart { transition: none; }
.minicart-backdrop { transition: none; }
.minicart-spinner { animation: none; }
}
/* Product breadcrumb */
.product-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.1rem;
font-size: 0.82rem;
color: var(--vmc-muted, #9a8f7d);
}
.product-breadcrumb a { color: var(--vmc-muted, #9a8f7d); text-decoration: none; }
.product-breadcrumb a:hover { color: var(--vmc-burgundy, #7a1f33); }
.product-breadcrumb i { font-size: 0.7rem; color: var(--vmc-line-strong, #d8c9a6); }
.product-breadcrumb span { color: var(--vmc-coffee-deep, #3a221a); font-weight: 600; }
/* Final mobile nav cart-badge placement.
The cart badge and generated chevron both appear in the same flex row;
let the badge push to the right, then keep the chevron immediately after it. */
@media (max-width: 991.98px) {
.vmc-nav-list .vmc-nav-icon-cart {
display: flex !important;
align-items: center !important;
gap: 0.65rem !important;
}
.vmc-nav-list .vmc-nav-icon-cart .cart-count.cart-badge,
.vmc-nav-list .vmc-nav-icon-cart .cart-badge,
.vmc-nav-list .vmc-nav-icon-cart .cart-count.cart-badge.cart-pulse {
position: static !important;
inset: auto !important;
margin-left: auto !important;
margin-right: 0.65rem !important;
translate: none !important;
transform: none !important;
min-width: 24px !important;
height: 24px !important;
padding: 0 7px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--vmc-gold) !important;
color: var(--vmc-burgundy-deep) !important;
box-shadow: none !important;
animation: none !important;
display: inline-grid !important;
place-items: center !important;
line-height: 1 !important;
font-size: 0.74rem !important;
font-weight: 800 !important;
flex: 0 0 auto !important;
}
.vmc-nav-list .vmc-nav-icon-cart::after {
margin-left: 0 !important;
flex: 0 0 auto !important;
}
}
/* Final iOS notch coverage.
Paint the safe-area from the sticky header itself, then keep the nav's
internal padding normal so later nav rules cannot remove the notch plate. */
@media (max-width: 991.98px) {
html {
background-color: #2a0a12 !important;
}
body:not(.is-admin-context) .vmc-header {
background: #2a0a12 !important;
padding-top: env(safe-area-inset-top, 0px) !important;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
body:not(.is-admin-context) .vmc-header .vmc-nav {
padding-top: 0.65rem !important;
}
body:not(.is-admin-context)::before {
background: #2a0a12 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.vmc-nav .navbar-collapse { transition: none !important; }
.vmc-nav .navbar-collapse.is-open .vmc-nav-list > .nav-item { animation: none !important; }
}
/* Final mobile collapse anchor.
The menu sheet must be positioned from the navbar's bottom edge, not the
inner .container, otherwise nav padding/safe-area space makes it appear to
unfold from around the toggler row. */
@media (max-width: 991.98px) {
body:not(.is-admin-context) .vmc-nav {
position: relative !important;
}
body:not(.is-admin-context) .vmc-nav > .container {
position: static !important;
}
body:not(.is-admin-context) .vmc-nav .navbar-collapse {
top: 100% !important;
left: env(safe-area-inset-left, 0px) !important;
right: env(safe-area-inset-right, 0px) !important;
width: auto !important;
margin: 0 !important;
}
}
/* Products list — client-side pagination (8/page) over the filtered set.
Rows off the current page hide; pager mirrors the account/audit pagers. */
.product-table tbody tr.is-paged-out { display: none !important; }
.product-pager {
display: flex;
justify-content: center;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
margin: 1rem 0 0;
}
.product-pager-btn {
min-width: 34px;
height: 34px;
padding: 0 0.55rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--vmc-line-strong, #d8c9a6);
border-radius: 8px;
background: #fff;
color: var(--vmc-coffee-deep, #3a221a);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.product-pager-btn:hover:not(:disabled):not(.is-active) {
border-color: var(--vmc-gold, #c9a24a);
background: rgba(201, 162, 74, 0.08);
}
.product-pager-btn.is-active {
background: linear-gradient(180deg, var(--vmc-gold, #c9a24a), var(--vmc-gold-deep, #8b6a1f));
border-color: var(--vmc-gold-deep, #8b6a1f);
color: #fff;
cursor: default;
}
.product-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Audit table — scroll horizontally inside .table-responsive on narrow admin
widths instead of squishing/overflowing the card. */
.audit-table { min-width: 880px; }
/* Size chart fills the viewport exactly across resolutions (no fixed/calc
height → no per-resolution gap or overflow). The admin shell uses
align-items:start, so the content cell is content-tall; here we stretch it
to the shell height and flex row → col → card. Scoped to the sizes page. */
@media (min-width: 992px) {
.admin-shell:has(.sizes-card) { align-items: stretch; }
.admin-content:has(.sizes-card) { display: flex; flex-direction: column; min-height: 0; }
.admin-content:has(.sizes-card) > .row { flex: 1 1 auto; min-height: 0; }
.admin-content:has(.sizes-card) > .row > .col-lg-7 { display: flex; flex-direction: column; min-height: 0; }
.sizes-card { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; }
}
/* Generic admin list-fill: any page whose table panel carries
.admin-fill-panel stretches that panel to the viewport's remaining height
(table scrolls inside), keeping head/filter/pager siblings visible. No
fixed/calc heights → resolution-robust. Used by enquiries / users /
audit-log. Desktop only. */
@media (min-width: 992px) {
.admin-shell:has(.admin-fill-panel) { align-items: stretch; }
.admin-content:has(.admin-fill-panel) { display: flex; flex-direction: column; min-height: 0; }
.admin-content:has(.admin-fill-panel) > .admin-fill-panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.admin-fill-panel > .table-responsive {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
}
/* Admin appbar user chip → dropdown */
.admin-appbar-user-wrap { position: relative; }
.admin-appbar-user-caret {
font-size: 0.7rem;
margin-left: 0.15rem;
transition: transform 160ms ease;
opacity: 0.7;
}
.admin-appbar-user[aria-expanded="true"] .admin-appbar-user-caret { transform: rotate(180deg); }
/* NB: class renamed to .admin-account-menu — .admin-appbar-menu is already
the mobile sidebar-toggle BUTTON (38px), which was squashing this dropdown. */
.admin-account-menu {
--bs-dropdown-min-width: 13rem;
background: #fff !important;
border: 1px solid var(--vmc-line, #e3d6b8);
border-radius: 12px;
box-shadow: 0 14px 34px rgba(40, 22, 12, 0.18);
padding: 0.35rem;
margin-top: 0.4rem;
z-index: 1080;
}
.admin-account-menu-head {
padding: 0.4rem 0.7rem 0.5rem;
line-height: 1.25;
}
.admin-account-menu-head strong {
display: block;
font-size: 0.92rem;
color: var(--vmc-coffee-deep, #3a221a);
}
.admin-account-menu-head span {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--vmc-gold-deep, #8b6a1f);
font-weight: 700;
}
.admin-account-menu .dropdown-item {
display: flex;
align-items: center;
gap: 0.55rem;
border-radius: 8px;
padding: 0.5rem 0.7rem;
font-size: 0.9rem;
}
.admin-account-menu .dropdown-item i { font-size: 1rem; color: var(--vmc-gold-deep, #8b6a1f); }
.admin-account-menu .dropdown-item:hover { background: rgba(201, 162, 74, 0.14); }
.admin-account-menu-signout { color: #b3331f; }
.admin-account-menu-signout i { color: #c0392b !important; }
.admin-account-menu-signout:hover { background: #fde2e0 !important; color: #9a2a18; }
/* ===== Mini-cart drawer — polish + hide FABs while open ===== */
/* WhatsApp / cart FABs sit on top of the drawer footer — fade them out while
the drawer is open so they don't cover "Place enquiry". */
body.minicart-lock .vmc-mobile-fab {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
/* Header — warm gold-tinted bar with a hairline gold underline. */
.minicart-head {
background: linear-gradient(180deg, #fff 0%, #fdf6e9 100%);
border-bottom: 1px solid rgba(201, 162, 74, 0.35);
}
/* Lines — rounded hover, no hard divider (use spacing). */
.minicart-line {
border-bottom: 0;
border-radius: 12px;
transition: background 140ms ease;
}
.minicart-line:hover { background: rgba(201, 162, 74, 0.08); }
.minicart-thumb {
width: 56px;
height: 56px;
border-radius: 12px;
box-shadow: 0 2px 8px -4px rgba(58, 13, 24, 0.4);
}
.minicart-qty {
background: rgba(201, 162, 74, 0.12);
border: 1px solid rgba(201, 162, 74, 0.28);
border-radius: 999px;
padding: 0.2rem 0.6rem;
}
/* Footer — lift it with a soft top shadow + clearer totals. */
.minicart-foot {
box-shadow: 0 -10px 24px -18px rgba(58, 13, 24, 0.5);
padding-top: 1rem;
}
.minicart-totals {
background: var(--vmc-soft, #fdf8ef);
border: 1px solid var(--vmc-line, #e3d6b8);
border-radius: 10px;
padding: 0.55rem 0.75rem;
font-size: 0.84rem;
margin-bottom: 0.65rem;
}
.minicart-totals strong { color: var(--vmc-burgundy, #7a1f33); }
.minicart-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }