/* ============================================================
ZAFIROS MEN — Premium Modern Design System
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ── CSS Variables ── */
:root {
--bg: #fafafa;
--card-bg: #ffffff;
--fg: #0f172a;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
--gray-950: #020617;
--accent-gold: #d97706;
--accent-gold-light: #fffbeb;
--green-50: #f0fdf4;
--green-100: #dcfce7;
--green-600: #16a34a;
--green-700: #15803d;
--red-50: #fef2f2;
--red-100: #fee2e2;
--red-500: #ef4444;
--red-600: #dc2626;
--red-700: #b91c1c;
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--yellow-50: #fefce8;
--yellow-100: #fef9c3;
--yellow-700: #a16207;
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.04);
--shadow-glow: 0 0 25px -5px rgba(15, 23, 42, 0.08);
--radius-sm: 0.375rem;
--radius: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;
--transition-fast: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
--transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
--transition-smooth: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}
/* ── ACCESSIBILITY & LOW-SPEC HARDWARE ACCELERATION ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── SMOOTH PAGE TRANSITIONS ── */
@view-transition {
navigation: auto;
}
/* ── Reset & Base ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
html {
height: 100%;
width: 100%;
max-width: 100%;
overflow-x: clip;
overflow-x: hidden;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--fg);
min-height: 100%;
width: 100%;
max-width: 100%;
overflow-x: clip;
overflow-x: hidden;
position: relative;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, video, canvas, svg, iframe, embed, object {
max-width: 100%;
}
/* El wrapper interno recibe la animacion de entrada de pagina */
body::before {
content: none;
}
@keyframes pageEntrance {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Fade-out al salir de pagina — solo opacidad, sin transform */
body.page-exiting {
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
a { text-decoration: none; color: inherit; }
/* ── Utilities ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
width: 1.25rem; height: 1.25rem;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
display: inline-block;
vertical-align: middle;
}
/* ── NAVBAR ── */
.navbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(226, 232, 240, 0.75);
box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03);
transition: var(--transition);
}
.navbar-inner {
max-width: 80rem;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 4.25rem;
}
.navbar-brand-group {
display: flex;
align-items: center;
gap: 1rem;
}
.navbar-logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--gray-900);
transition: var(--transition-fast);
flex-shrink: 0;
}
.navbar-logo:hover { opacity: 0.9; transform: translateY(-1px); }
.navbar-logo img {
width: 2.5rem; height: 2.5rem;
object-fit: contain;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
}
.navbar-logo span {
font-weight: 800;
font-size: 1.2rem;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--gray-950) 0%, var(--gray-700) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-actions {
display: flex;
align-items: center;
gap: 1.25rem;
}
.navbar-desktop-nav {
display: flex;
align-items: center;
gap: 1rem;
}
.navbar-actions-mobile {
display: none;
align-items: center;
gap: 0.625rem;
}
.navbar-link {
font-size: 0.925rem;
font-weight: 600;
color: var(--gray-600);
transition: var(--transition-fast);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
gap: 0.375rem;
white-space: nowrap;
}
.navbar-link:hover { color: var(--gray-900); background: var(--gray-100); }
.navbar-link.active { color: var(--gray-900); background: var(--gray-100); }
.nav-divider { width: 1px; height: 1.25rem; background: var(--gray-200); }
.cart-btn {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
color: #ffffff;
background: var(--gray-900);
padding: 0.5rem 1.125rem;
border-radius: var(--radius-full);
transition: var(--transition);
border: none;
font-weight: 600;
font-size: 0.875rem;
box-shadow: var(--shadow-sm);
white-space: nowrap;
flex-shrink: 0;
}
.cart-btn:hover {
background: var(--gray-800);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.cart-btn-mobile {
padding: 0.45rem 0.85rem;
}
.cart-badge {
background: var(--accent-gold);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
padding: 0.15rem 0.5rem;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-xs);
min-width: 1.25rem;
height: 1.25rem;
}
.cart-badge.hidden { display: none; }
.navbar-hamburger {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-xl);
border: 1px solid var(--gray-200);
background: #ffffff;
color: var(--gray-800);
cursor: pointer;
transition: var(--transition-fast);
box-shadow: var(--shadow-xs);
flex-shrink: 0;
}
.navbar-hamburger:hover, .navbar-hamburger:active {
background: var(--gray-100);
color: var(--gray-950);
border-color: var(--gray-300);
}
/* ── MOBILE DRAWER NAVIGATION ── */
.mobile-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9998;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.mobile-drawer-overlay.active {
opacity: 1;
pointer-events: auto;
}
.mobile-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 84%;
max-width: 20rem;
background: #ffffff;
z-index: 9999;
box-shadow: -10px 0 35px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-drawer.open {
transform: translateX(0);
}
.mobile-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.25rem 1rem;
border-bottom: 1px solid var(--gray-100);
}
.mobile-brand-title {
font-weight: 800;
font-size: 1.15rem;
letter-spacing: -0.03em;
color: var(--gray-900);
}
.mobile-drawer-close {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
background: var(--gray-50);
color: var(--gray-600);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
}
.mobile-drawer-close:hover {
background: var(--gray-100);
color: var(--gray-900);
}
.mobile-drawer-switcher {
padding: 0.875rem 1.25rem;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-100);
}
.mobile-drawer-switcher .store-switch-btn {
width: 100%;
justify-content: center;
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.mobile-drawer-nav {
flex: 1;
padding: 1rem 0.875rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.mobile-drawer-link {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-xl);
font-size: 0.925rem;
font-weight: 600;
color: var(--gray-700);
transition: var(--transition-fast);
text-decoration: none;
}
.mobile-drawer-link svg {
color: var(--gray-400);
flex-shrink: 0;
transition: var(--transition-fast);
}
.mobile-drawer-link:hover, .mobile-drawer-link:active {
background: var(--gray-100);
color: var(--gray-900);
}
.mobile-drawer-link:hover svg, .mobile-drawer-link:active svg {
color: var(--gray-900);
}
.mobile-drawer-link.active {
background: var(--gray-900);
color: #ffffff;
}
.mobile-drawer-link.active svg {
color: #ffffff;
}
.mobile-drawer-kids .mobile-drawer-link.active {
background: var(--kids-blue);
color: #ffffff;
}
.mobile-drawer-kids .mobile-drawer-link.active svg {
color: #ffffff;
}
.mobile-drawer-divider {
height: 1px;
background: var(--gray-200);
margin: 0.5rem 0.75rem;
}
.mobile-drawer-footer {
padding: 1rem 1.25rem 1.5rem;
border-top: 1px solid var(--gray-100);
}
/* ── MAIN CONTAINER & HERO ── */
.main-container {
max-width: 80rem;
margin: 0 auto;
padding: 3rem 1.5rem;
flex: 1;
width: 100%;
}
.page-header {
text-align: center;
margin-bottom: 3.5rem;
position: relative;
}
.page-header h1 {
font-size: clamp(2rem, 5vw, 3.25rem);
font-weight: 800;
letter-spacing: -0.04em;
color: var(--gray-900);
margin-bottom: 1rem;
line-height: 1.15;
}
.page-header p {
max-width: 38rem;
margin: 0 auto;
color: var(--gray-500);
font-size: 1.125rem;
line-height: 1.6;
font-weight: 400;
}
/* ── CATEGORY FILTERS ── */
.filters {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
justify-content: center;
margin-bottom: 3rem;
}
.filter-btn {
padding: 0.625rem 1.375rem;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 600;
border: 1px solid var(--gray-200);
background: #ffffff;
color: var(--gray-600);
transition: var(--transition-smooth);
box-shadow: var(--shadow-xs);
}
.filter-btn:hover {
background: var(--gray-50);
border-color: var(--gray-300);
color: var(--gray-900);
transform: translateY(-1px);
}
.filter-btn.active {
background: var(--gray-900);
color: #ffffff;
border-color: var(--gray-900);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
}
/* ── PRODUCT GRID ── */
.product-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
.product-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: var(--radius-2xl);
overflow: hidden;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: var(--shadow-xs);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease;
text-decoration: none;
color: inherit;
position: relative;
content-visibility: auto;
contain-intrinsic-size: 0 420px;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.product-card:hover {
box-shadow: var(--shadow-xl);
transform: translate3d(0, -4px, 0);
border-color: var(--gray-300);
}
.product-card-img {
position: relative;
aspect-ratio: 4/5;
background: var(--gray-100);
overflow: hidden;
transform: translateZ(0);
}
.product-card-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-img .no-image {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-400);
font-size: 0.875rem;
background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}
.product-card-overlay {
position: absolute; inset: 0;
background: rgba(15, 23, 42, 0.2);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.product-card:hover .product-card-overlay { opacity: 1; }
.product-card-overlay span {
background: #ffffff;
color: var(--gray-900);
padding: 0.625rem 1.25rem;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 700;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 0.5rem;
transform: translateY(0.75rem);
transition: transform 0.3s ease;
}
.product-card:hover .product-card-overlay span { transform: translateY(0); }
.product-card-body {
padding: 1.375rem;
display: flex;
flex-direction: column;
flex: 1;
}
.product-card-body h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--gray-900);
letter-spacing: -0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card-body p {
font-size: 0.85rem;
color: var(--gray-500);
margin-top: 0.375rem;
margin-bottom: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.45;
}
.product-card-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.product-price {
font-size: 1.35rem;
font-weight: 800;
color: var(--gray-900);
letter-spacing: -0.03em;
}
.color-dots { display: flex; gap: 0.35rem; align-items: center; }
.color-dot {
width: 0.9rem; height: 0.9rem;
border-radius: 50%;
border: 1.5px solid #ffffff;
box-shadow: 0 0 0 1px var(--gray-300);
}
.color-dots-more { font-size: 0.75rem; font-weight: 600; color: var(--gray-400); margin-left: 0.25rem; }
/* Empty State */
.empty-state {
text-align: center;
padding: 5rem 2rem;
color: var(--gray-500);
border: 2px dashed var(--gray-200);
border-radius: var(--radius-2xl);
font-size: 1.125rem;
background: var(--card-bg);
}
/* ── BUTTONS ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-xl);
font-size: 0.875rem;
font-weight: 600;
border: none;
transition: var(--transition);
cursor: pointer;
white-space: nowrap;
}
.btn-dark {
background: var(--gray-900);
color: #ffffff;
box-shadow: var(--shadow-sm);
}
.btn-dark:hover {
background: var(--gray-800);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-dark:active { transform: scale(0.98); }
.btn-outline {
background: #ffffff;
color: var(--gray-700);
border: 1px solid var(--gray-300);
box-shadow: var(--shadow-xs);
}
.btn-outline:hover {
background: var(--gray-50);
border-color: var(--gray-400);
color: var(--gray-900);
}
.btn-red { background: var(--red-600); color: #ffffff; box-shadow: var(--shadow-sm); }
.btn-red:hover { background: var(--red-700); transform: translateY(-1px); }
.btn-green { background: var(--green-600); color: #ffffff; box-shadow: var(--shadow-sm); }
.btn-green:hover { background: var(--green-700); transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
.btn-icon {
background: none;
border: none;
padding: 0.5rem;
color: var(--gray-400);
border-radius: var(--radius-lg);
transition: var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon:hover { color: var(--red-600); background: var(--red-50); }
/* ── FORMS ── */
.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label { font-size: 0.875rem; font-weight: 600; color: var(--gray-700); }
.form-input, .form-textarea, .form-select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--gray-300);
border-radius: var(--radius-xl);
font-size: 0.9rem;
color: var(--gray-900);
background: #ffffff;
transition: var(--transition-fast);
outline: none;
box-shadow: var(--shadow-xs);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
border-color: var(--gray-900);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.form-input:disabled { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; }
.form-textarea { resize: none; }
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.75rem;
}
/* ── CARD ── */
.card {
background: #ffffff;
border-radius: var(--radius-2xl);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
padding: 2.25rem;
}
/* ── MODAL ── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
padding: 1rem;
animation: fadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
transform: translateZ(0);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: #ffffff;
border-radius: var(--radius-2xl);
padding: 2rem;
width: 100%;
max-width: 48rem;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
border: 1px solid var(--gray-200);
animation: slideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
@keyframes slideUp {
from { transform: translate3d(0, 10px, 0); opacity: 0; }
to { transform: translate3d(0, 0, 0); opacity: 1; }
}
.modal-sm { max-width: 28rem; }
.modal-lg { max-width: 52rem; }
.modal-grid-2, .form-row-2, .grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
width: 100%;
box-sizing: border-box;
}
.modal-grid-2-compact, .form-row-2-compact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
width: 100%;
box-sizing: border-box;
}
.modal-grid-full, .col-2 {
grid-column: 1 / -1;
}
.modal-form-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
align-items: center;
box-sizing: border-box;
width: 100%;
}
.modal-structured {
padding: 0 !important;
display: flex;
flex-direction: column;
overflow: hidden !important;
}
.modal-structured .modal-header {
padding: 1.25rem 1.75rem;
margin-bottom: 0;
border-bottom: 1px solid var(--gray-200);
flex-shrink: 0;
}
.modal-structured .modal-body {
padding: 1.5rem 1.75rem;
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.modal-structured .modal-footer {
padding: 1rem 1.75rem;
border-top: 1px solid var(--gray-200);
background: #ffffff;
display: flex;
justify-content: flex-end;
gap: 0.75rem;
flex-shrink: 0;
border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.modal-header h2 { font-size: 1.35rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; }
.modal-close {
background: none; border: none;
color: var(--gray-400); padding: 0.375rem;
border-radius: var(--radius-lg);
transition: var(--transition-fast);
display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--gray-900); background: var(--gray-100); }
/* ── TABLE ── */
.table-wrap, .table-responsive {
width: 100%;
max-width: 100%;
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
display: block;
box-sizing: border-box;
}
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; color: var(--gray-700); }
.table-wrap table, .table-responsive table { min-width: 600px; width: 100%; }
thead { background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
thead th {
padding: 0.85rem 1.15rem;
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gray-500);
white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--gray-100); transition: background 0.15s ease; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
td { padding: 0.85rem 1.15rem; vertical-align: middle; }
.admin-table-thumb-wrap {
width: 3rem;
height: 3rem;
min-width: 3rem;
min-height: 3rem;
border-radius: var(--radius-lg);
overflow: hidden;
background: #f1f5f9;
flex-shrink: 0;
border: 1px solid var(--gray-200);
}
.admin-table-thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── BADGES ── */
.badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.3rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-yellow { background: var(--yellow-100); color: var(--yellow-700); }
.badge-green { background: var(--green-100); color: var(--green-700); }
.badge-red { background: var(--red-100); color: var(--red-600); }
.badge-blue { background: var(--blue-100); color: var(--blue-700); }
.badge-gray { background: var(--gray-100); color: var(--gray-700); }
/* ── KPI CARDS & GRID UTILITIES ── */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
margin-bottom: 2.5rem;
}
.kpi-card {
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
padding: 1.75rem;
box-shadow: var(--shadow-xs);
transition: var(--transition-smooth);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-card-dark {
background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-950) 100%);
border-color: var(--gray-800);
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
}
.kpi-card-danger {
background: linear-gradient(135deg, var(--red-600) 0%, var(--red-700) 100%);
border-color: var(--red-700);
box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.25);
}
.kpi-icon {
width: 2.75rem; height: 2.75rem;
border-radius: var(--radius-xl);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem;
}
.kpi-icon-green { background: var(--green-50); color: var(--green-600); }
.kpi-icon-red { background: var(--red-50); color: var(--red-500); }
.kpi-icon-white { background: rgba(255,255,255,0.15); color: #ffffff; }
.kpi-label { font-size: 0.875rem; font-weight: 600; color: var(--gray-500); }
.kpi-card-dark .kpi-label, .kpi-card-danger .kpi-label { color: rgba(255,255,255,0.75); }
.kpi-value { font-size: 2rem; font-weight: 800; color: var(--gray-900); margin-top: 0.25rem; letter-spacing: -0.03em; }
.kpi-card-dark .kpi-value, .kpi-card-danger .kpi-value { color: #ffffff; }
.kpi-value-green { color: var(--green-600); }
.kpi-value-red { color: var(--red-500); }
/* ── ADMIN LAYOUT ── */
.admin-layout {
min-height: 100vh;
background: var(--bg);
display: flex;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
box-sizing: border-box;
}
.admin-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
width: 17.5rem;
max-width: 85vw;
background: #ffffff;
border-right: 1px solid var(--gray-200);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}
.admin-sidebar.open { transform: translateX(0); }
.sidebar-header {
height: 4.5rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.25rem;
border-bottom: 1px solid var(--gray-100);
gap: 0.875rem;
}
.sidebar-header img { height: 2.25rem; object-fit: contain; border-radius: var(--radius-sm); }
.sidebar-header span { font-weight: 800; font-size: 1.125rem; color: var(--gray-900); letter-spacing: -0.03em; }
.sidebar-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--radius-full);
background: var(--gray-100);
border: 1px solid var(--gray-200);
color: var(--gray-600);
cursor: pointer;
transition: var(--transition-fast);
padding: 0;
}
.sidebar-close-btn:hover {
background: var(--gray-200);
color: var(--gray-900);
}
@media (min-width: 961px) {
.sidebar-close-btn { display: none !important; }
}
.sidebar-nav { flex: 1; padding: 1.25rem 1rem 0.5rem; display: flex; flex-direction: column; gap: 0.375rem; overflow-y: auto; }
.sidebar-link {
display: flex;
align-items: center;
gap: 0.875rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-xl);
font-size: 0.9rem;
font-weight: 600;
color: var(--gray-600);
transition: var(--transition-fast);
}
.sidebar-link:hover { background: var(--gray-100); color: var(--gray-900); }
.sidebar-link.active { background: var(--gray-900); color: #ffffff; box-shadow: var(--shadow-sm); }
/* Rounded Floating Sidebar Footer */
.sidebar-footer {
padding: 0.75rem 1rem 1.25rem;
margin-top: auto;
}
.sidebar-footer-card {
background: #f8fafc;
border: 1px solid var(--gray-200);
border-radius: var(--radius-xl);
padding: 0.45rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.sidebar-footer-btn {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.85rem;
border-radius: var(--radius-lg);
font-size: 0.85rem;
font-weight: 700;
color: var(--gray-700);
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
width: 100%;
}
.sidebar-footer-btn:hover {
background: #ffffff;
color: var(--gray-900);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.sidebar-footer-btn.sidebar-logout {
color: var(--red-600);
}
.sidebar-footer-btn.sidebar-logout:hover {
background: #fee2e2;
color: var(--red-700);
}
.admin-main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
min-width: 0;
width: 100%;
max-width: 100vw;
box-sizing: border-box;
}
.admin-topbar {
display: flex;
flex-direction: column;
padding: 0.55rem 1rem;
background: #ffffff;
border-bottom: 1px solid var(--gray-200);
position: sticky; top: 0; z-index: 10;
width: 100%;
box-sizing: border-box;
gap: 0.4rem;
}
.admin-topbar-main {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
}
.admin-topbar-brand {
display: flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
flex: 1;
}
.admin-menu-toggle, #menu-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
padding: 0 !important;
background: #f1f5f9 !important;
border: 1.5px solid #cbd5e1 !important;
border-radius: var(--radius-lg) !important;
color: var(--gray-900) !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.admin-menu-toggle:hover, #menu-btn:hover {
background: #e2e8f0 !important;
color: #0284c7 !important;
border-color: #0284c7 !important;
box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
}
.admin-menu-toggle:active, #menu-btn:active {
transform: scale(0.94) !important;
}
.admin-menu-toggle svg, #menu-btn svg {
width: 22px !important;
height: 22px !important;
stroke: currentColor !important;
stroke-width: 2.5 !important;
flex-shrink: 0 !important;
display: block !important;
}
.admin-topbar-logo {
height: 1.75rem;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
.admin-topbar-title {
font-weight: 800;
font-size: clamp(0.85rem, 3.2vw, 1.1rem);
color: var(--gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.02em;
min-width: 0;
}
.admin-topbar-actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.admin-topbar-actions .btn {
padding: 0.35rem 0.6rem;
font-size: 0.78125rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
min-height: 36px;
}
.admin-topbar-bcv-row {
width: 100%;
display: flex;
justify-content: center;
}
.admin-content {
padding: 1.75rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.sidebar-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 990;
display: none;
}
.sidebar-overlay.visible { display: block; }
/* ── PRODUCT DETAIL ── */
.product-detail-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
max-width: 80rem;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.product-gallery { display: flex; flex-direction: column; gap: 1.25rem; }
.gallery-main {
aspect-ratio: 4/5;
background: var(--gray-100);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.gallery-thumb {
width: 5.25rem; height: 5.25rem;
border-radius: var(--radius-xl);
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
transition: var(--transition-fast);
background: var(--gray-100);
}
.gallery-thumb:hover { border-color: var(--gray-400); }
.gallery-thumb.active { border-color: var(--gray-900); box-shadow: var(--shadow-sm); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { display: flex; flex-direction: column; gap: 1.75rem; }
.product-detail-price { font-size: 2.25rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.03em; }
.product-detail-desc { color: var(--gray-600); line-height: 1.75; font-size: 1rem; }
.variant-selector { display: flex; flex-direction: column; gap: 0.875rem; }
.variant-label { font-size: 0.9rem; font-weight: 600; color: var(--gray-700); }
.color-options { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.color-option {
width: 2.25rem; height: 2.25rem;
border-radius: 50%;
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px var(--gray-300);
cursor: pointer;
transition: var(--transition-fast);
}
.color-option:hover { transform: scale(1.1); }
.color-option.active { box-shadow: 0 0 0 2px var(--gray-900); }
.size-options { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.size-option {
padding: 0.625rem 1.25rem;
border: 1px solid var(--gray-300);
border-radius: var(--radius-xl);
font-size: 0.875rem;
font-weight: 600;
background: #ffffff;
cursor: pointer;
transition: var(--transition-fast);
color: var(--gray-700);
}
.size-option:hover { border-color: var(--gray-900); color: var(--gray-900); }
.size-option.active { background: var(--gray-900); color: #ffffff; border-color: var(--gray-900); box-shadow: var(--shadow-sm); }
.size-option.out-of-stock { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
/* ── CART PAGE ── */
.cart-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
}
.cart-item {
display: flex;
gap: 1.25rem;
padding: 1.25rem;
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xs);
transition: var(--transition);
}
.cart-item:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
.cart-item-img {
width: 6.5rem; height: 6.5rem;
background: var(--gray-100);
border-radius: var(--radius-xl);
overflow: hidden;
flex-shrink: 0;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cart-item-title { font-weight: 700; font-size: 1.05rem; color: var(--gray-900); letter-spacing: -0.01em; }
.cart-item-qty { font-size: 0.875rem; color: var(--gray-500); margin: 0.375rem 0 0.75rem; }
.cart-item-footer { display: flex; justify-content: space-between; align-items: center; }
.cart-item-price { font-weight: 800; font-size: 1.15rem; color: var(--gray-900); }
.cart-summary {
background: #ffffff;
padding: 2rem;
border-radius: var(--radius-2xl);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
height: fit-content;
position: sticky; top: 5.5rem;
}
.cart-summary h3 { font-size: 1.25rem; font-weight: 800; color: var(--gray-900); margin-bottom: 1.75rem; letter-spacing: -0.02em; }
.cart-summary-row { display: flex; justify-content: space-between; color: var(--gray-600); margin-bottom: 1rem; font-weight: 500; }
.cart-summary-divider { height: 1px; background: var(--gray-200); margin: 1.25rem 0; }
.cart-summary-total { display: flex; justify-content: space-between; font-size: 1.35rem; font-weight: 800; color: var(--gray-900); margin-bottom: 1.75rem; }
.cart-note { font-size: 0.8rem; color: var(--gray-500); text-align: center; margin-top: 1.25rem; line-height: 1.5; }
/* ── LOGIN ── */
.login-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
padding: 3rem 1.5rem;
}
.login-card {
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
padding: 3rem 2.5rem;
width: 100%;
max-width: 28rem;
}
.login-card h2 { font-size: 2rem; font-weight: 800; text-align: center; letter-spacing: -0.04em; color: var(--gray-900); }
.login-card .subtitle { text-align: center; font-size: 0.9rem; color: var(--gray-500); margin-top: 0.5rem; margin-bottom: 2.25rem; }
.login-form-group { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.75rem; }
.login-input {
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid var(--gray-300);
font-size: 0.9rem;
color: var(--gray-900);
transition: var(--transition-fast);
outline: none;
}
.login-input:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: none; }
.login-input:last-child { border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.login-input:focus { border-color: var(--gray-900); z-index: 1; position: relative; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08); }
.login-error { font-size: 0.875rem; font-weight: 500; color: var(--red-600); text-align: center; background: var(--red-50); padding: 0.75rem; border-radius: var(--radius-xl); margin-bottom: 1.25rem; border: 1px solid var(--red-100); }
.login-toggle { text-align: center; margin-top: 1.25rem; }
.login-toggle button { font-size: 0.875rem; font-weight: 600; color: var(--gray-600); background: none; border: none; cursor: pointer; }
.login-toggle button:hover { color: var(--gray-900); text-decoration: underline; }
.login-back { text-align: center; margin-top: 1.25rem; }
.login-back a { font-size: 0.875rem; font-weight: 500; color: var(--gray-400); }
.login-back a:hover { color: var(--gray-700); }
/* ── RELATED PRODUCTS ── */
.related-section {
max-width: 80rem;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
border-top: 1px solid var(--gray-200);
}
.related-section h2 {
font-size: 1.65rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 2.25rem;
letter-spacing: -0.03em;
}
/* ── ADMIN PRODUCTS & VARIANTS ── */
.img-thumb {
width: 3.25rem; height: 3.25rem;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--gray-200);
background: var(--gray-100);
flex-shrink: 0;
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.variant-block {
padding: 1.5rem;
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
background: var(--gray-50);
box-shadow: var(--shadow-xs);
margin-bottom: 1.75rem;
}
.img-gallery-grid { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.img-thumb-edit {
position: relative;
width: 5.5rem; height: 5.5rem;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--gray-200);
}
.img-thumb-edit img { width: 100%; height: 100%; object-fit: cover; }
.img-thumb-edit .remove-img {
position: absolute; inset: 0;
background: rgba(15, 23, 42, 0.6);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
border: none; cursor: pointer;
color: #ffffff;
}
.img-thumb-edit:hover .remove-img { opacity: 1; }
.img-thumb-new {
width: 5.5rem; height: 5.5rem;
border-radius: var(--radius-xl);
border: 2px dashed var(--blue-600);
background: var(--blue-50);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-size: 0.65rem; color: var(--blue-600);
text-align: center; padding: 0.25rem;
position: relative;
}
.img-thumb-new .remove-img {
position: absolute; inset: 0;
background: rgba(15, 23, 42, 0.6);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
border: none; cursor: pointer;
color: #ffffff; border-radius: inherit;
}
.img-thumb-new:hover .remove-img { opacity: 1; }
.btn-upload {
width: 5.5rem; height: 5.5rem;
border-radius: var(--radius-xl);
border: 2px dashed var(--gray-300);
background: #ffffff;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: var(--gray-500);
font-size: 0.75rem; font-weight: 600;
gap: 0.375rem;
transition: var(--transition-fast);
cursor: pointer;
}
.btn-upload:hover { border-color: var(--gray-900); color: var(--gray-900); background: var(--gray-50); }
.size-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem; }
.size-row input[type="text"] { flex: 1; }
.size-row input[type="number"] { width: 5.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.col-2 { grid-column: 1 / -1; }
/* ── STATUS SELECT & DROPDOWN (100% UNCLIPPED & RESPONSIVE) ── */
.status-badge-select {
display: inline-flex;
align-items: center;
border: none;
outline: none;
font-family: inherit;
font-size: 0.725rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.425rem 1.85rem 0.425rem 0.85rem;
border-radius: var(--radius-full);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-position: right 0.65rem center;
background-size: 0.7rem;
transition: var(--transition-fast);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.status-badge-select:hover {
filter: brightness(0.95);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}
.status-badge-select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.15);
}
.status-badge-select.badge-yellow {
background-color: var(--yellow-100);
color: var(--yellow-700);
background-image: url('data:image/svg+xml;utf8,');
}
.status-badge-select.badge-green {
background-color: var(--green-100);
color: var(--green-700);
background-image: url('data:image/svg+xml;utf8,');
}
.status-badge-select.badge-red {
background-color: var(--red-100);
color: var(--red-600);
background-image: url('data:image/svg+xml;utf8,');
}
.status-badge-select.badge-blue {
background-color: var(--blue-100);
color: var(--blue-700);
background-image: url('data:image/svg+xml;utf8,');
}
.status-badge-select.badge-gray {
background-color: var(--gray-100);
color: var(--gray-700);
background-image: url('data:image/svg+xml;utf8,');
}
.status-badge-select option {
background: #ffffff;
color: #0f172a;
font-size: 0.875rem;
font-weight: 600;
padding: 0.6rem 0.8rem;
}
.status-dropdown { position: relative; display: inline-block; }
.status-dropdown-menu {
position: absolute;
top: 100%; left: 0;
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
padding: 0.625rem;
z-index: 50;
display: none;
flex-direction: column;
gap: 0.375rem;
min-width: 10.5rem;
animation: fadeIn 0.15s ease-out;
}
.status-dropdown-menu.open { display: flex; }
.status-dropdown-menu button {
text-align: left;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-xl);
font-size: 0.725rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none;
cursor: pointer;
transition: opacity 0.15s;
}
.status-dropdown-menu button:hover { opacity: 0.85; }
.status-cancel { font-size: 0.75rem; font-weight: 600; color: var(--gray-400); text-align: center; padding-top: 0.375rem; background: none; border: none; cursor: pointer; }
.status-cancel:hover { color: var(--gray-700); }
/* ── TOAST ── */
.toast {
position: fixed;
bottom: 2rem; right: 2rem;
background: var(--gray-900);
color: #ffffff;
padding: 0.875rem 1.5rem;
border-radius: var(--radius-xl);
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
z-index: 10000;
opacity: 0;
transform: translate3d(0, 12px, 0);
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
pointer-events: none;
backface-visibility: hidden;
}
.toast.show { opacity: 1; transform: translate3d(0, 0, 0); }
.toast.success { background: #15803d; color: #ffffff; }
.toast.error { background: #b91c1c; color: #ffffff; }
.toast.warning { background: #b45309; color: #ffffff; }
@media (max-width: 640px) {
.toast {
bottom: 1.25rem;
right: 1rem;
left: 1rem;
max-width: calc(100% - 2rem);
margin: 0 auto;
text-align: center;
padding: 0.75rem 1.25rem;
font-size: 0.85rem;
}
}
/* ── LOADING STATE & ULTRA-LIGHT SPINNER ── */
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.875rem;
padding: 3.5rem 1.5rem;
color: var(--gray-600);
font-size: 0.9375rem;
font-weight: 600;
text-align: center;
width: 100%;
box-sizing: border-box;
animation: zmPulseFade 1.8s ease-in-out infinite alternate;
}
/* Fix for table cells: Keep native table-cell model so colspan works properly */
td.loading-state,
table .loading-state,
tbody .loading-state {
display: table-cell !important;
text-align: center !important;
vertical-align: middle !important;
padding: 3.5rem 1.5rem !important;
width: 100% !important;
}
.loading-state::before {
content: '';
display: block;
width: 2.25rem;
height: 2.25rem;
margin: 0 auto 0.75rem auto;
border: 3px solid rgba(2, 132, 199, 0.15);
border-top-color: #0284c7;
border-right-color: rgba(2, 132, 199, 0.5);
border-radius: 50%;
animation: zmSpin 0.75s linear infinite;
transform: translateZ(0);
box-sizing: border-box;
}
div.loading-state::before {
margin: 0 0 0.25rem 0;
}
/* Contextual theme spinners */
body[data-store="kids"] .loading-state::before,
.preloader-kids .loading-state::before {
border-color: rgba(56, 189, 248, 0.2);
border-top-color: #0284c7;
border-right-color: #38bdf8;
}
body[data-store="men"] .loading-state::before,
.men-theme .loading-state::before {
border-color: rgba(217, 119, 6, 0.2);
border-top-color: #d97706;
border-right-color: #fbbf24;
}
@keyframes zmSpin {
to { transform: rotate(360deg); }
}
@keyframes zmPulseFade {
0% { opacity: 0.72; }
100% { opacity: 1; }
}
.zm-spinner {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: zmSpin 0.7s linear infinite;
vertical-align: middle;
transform: translateZ(0);
}
/* ── FOOTER ── */
.footer {
background: #ffffff;
border-top: 1px solid var(--gray-200);
padding: 3rem 1.5rem;
margin-top: auto;
}
.footer-inner {
max-width: 80rem;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
justify-content: space-between;
text-align: center;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 800;
font-size: 1.125rem;
color: var(--gray-900);
}
.footer-logo img { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); }
.footer-text { font-size: 0.875rem; color: var(--gray-500); }
/* ── PROFILE ── */
.profile-form { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-actions {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1.75rem;
border-top: 1px solid var(--gray-100);
margin-top: 0.5rem;
}
/* ============================================================
ZAFIROS MEN — Home Page, Hero, Photo Placeholders & Modals
============================================================ */
/* ── Buttons Extra ── */
.btn-gold {
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
transition: var(--transition-fast);
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5);
background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
}
.btn-green {
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}
.btn-green:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(22, 163, 74, 0.45);
}
.btn-outline-light {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff !important;
backdrop-filter: blur(8px);
}
.btn-outline-light:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.5);
}
.btn-lg {
padding: 0.875rem 1.75rem;
font-size: 1.05rem;
font-weight: 700;
border-radius: var(--radius-xl);
}
/* ── HERO SECTION ── */
.hero-section {
position: relative;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #020617 100%);
color: #ffffff;
padding: 5rem 1.5rem 6rem;
text-align: center;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: -20%; left: 50%;
transform: translateX(-50%);
width: 60rem; height: 30rem;
background: radial-gradient(circle, rgba(217, 119, 6, 0.18) 0%, rgba(15, 23, 42, 0) 70%);
pointer-events: none;
}
.hero-content {
position: relative;
max-width: 52rem;
margin: 0 auto;
z-index: 2;
}
.hero-badge {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fef3c7;
background: rgba(217, 119, 6, 0.2);
border: 1px solid rgba(217, 119, 6, 0.4);
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
margin-bottom: 1.5rem;
}
.hero-title {
font-size: 3.25rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.04em;
margin: 0 auto 1.25rem;
max-width: 48rem;
text-wrap: balance;
background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: 1.15rem;
color: var(--gray-300);
line-height: 1.7;
max-width: 42rem;
margin: 0 auto 2.5rem;
font-weight: 400;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ── ABOUT SECTION & PHOTO CARDS ── */
.about-section {
padding: 5rem 0;
background: #ffffff;
}
.sub-heading {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-gold);
display: block;
margin-bottom: 0.5rem;
}
.section-heading {
font-size: 2.25rem;
font-weight: 800;
color: var(--gray-900);
letter-spacing: -0.03em;
margin-bottom: 0.75rem;
}
.section-desc {
font-size: 1.05rem;
color: var(--gray-500);
max-width: 36rem;
margin: 0 auto;
line-height: 1.6;
}
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3.5rem;
}
.photo-card {
background: var(--bg);
border-radius: var(--radius-2xl);
overflow: hidden;
border: 1px solid var(--gray-200);
transition: var(--transition-smooth);
}
.photo-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.photo-frame {
position: relative;
height: 16rem;
background: var(--gray-900);
overflow: hidden;
}
.photo-img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.photo-card:hover .photo-img { transform: scale(1.05); }
.photo-overlay {
position: absolute;
bottom: 1rem; left: 1rem;
}
.photo-tag {
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(8px);
color: #ffffff;
padding: 0.35rem 0.85rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
}
.placeholder-frame {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-frame.secondary {
background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}
.placeholder-graphic {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: #94a3b8;
font-weight: 600;
font-size: 0.9rem;
}
.photo-caption {
padding: 1.75rem;
}
.photo-caption h3 {
font-size: 1.15rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 0.5rem;
}
.photo-caption p {
font-size: 0.9rem;
color: var(--gray-500);
line-height: 1.6;
}
/* ── FEATURED SECTION ── */
.featured-section {
padding: 5rem 0;
background: var(--bg);
}
.featured-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2.5rem;
flex-wrap: wrap;
gap: 1rem;
}
/* ── VALUES SECTION ── */
.values-section {
padding: 4.5rem 0;
background: #ffffff;
border-top: 1px solid var(--gray-200);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
}
.value-card {
padding: 1.5rem;
background: var(--bg);
border-radius: var(--radius-xl);
border: 1px solid var(--gray-200);
}
.value-icon {
width: 3.5rem; height: 3.5rem;
background: var(--gray-900);
color: #ffffff;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}
.value-card h3 {
font-size: 1.05rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 0.5rem;
}
.value-card p {
font-size: 0.875rem;
color: var(--gray-500);
line-height: 1.5;
}
/* ── CTA BANNER ── */
.cta-banner {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #ffffff;
padding: 5rem 1.5rem;
text-align: center;
}
.cta-inner {
max-width: 40rem;
margin: 0 auto;
}
.cta-inner h2 {
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 0.75rem;
}
.cta-inner p {
font-size: 1.1rem;
color: var(--gray-300);
}
/* ── MODALS ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(6px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: fadeIn 0.2s ease-out;
}
.modal-card {
background: #ffffff;
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 32rem;
padding: 1.75rem;
animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(1.25rem); }
to { opacity: 1; transform: translateY(0); }
}
/* ── HOVER ZOOM & LIGHTBOX MODAL ── */
.gallery-main {
position: relative;
aspect-ratio: 4/5;
background: var(--gray-100);
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
cursor: zoom-in;
user-select: none;
}
.gallery-main img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.15s ease-out;
pointer-events: none;
}
.gallery-zoom-badge {
position: absolute;
bottom: 1rem; right: 1rem;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(8px);
color: #ffffff;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.35rem;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.2s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.gallery-main:hover .gallery-zoom-badge { opacity: 1; }
.lightbox-modal {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(2, 6, 23, 0.94);
backdrop-filter: blur(16px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 2rem 1.5rem;
animation: fadeIn 0.2s ease-out;
}
.lightbox-content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
width: 100%;
max-width: 72rem;
}
#lightbox-img {
max-width: min(90vw, 100%);
max-height: 72vh;
object-fit: contain;
border-radius: var(--radius-xl);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
animation: slideUp 0.2s ease-out;
}
.lightbox-counter {
margin-top: 1rem;
font-size: 0.875rem;
font-weight: 700;
color: #94a3b8;
letter-spacing: 0.05em;
background: rgba(255, 255, 255, 0.1);
padding: 0.25rem 0.85rem;
border-radius: var(--radius-full);
}
.lightbox-close-btn {
position: absolute;
top: 1.5rem; right: 1.5rem;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
width: 3rem; height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
backdrop-filter: blur(8px);
z-index: 10;
}
.lightbox-close-btn:hover {
background: rgba(239, 68, 68, 0.85);
border-color: var(--red-500);
transform: scale(1.1);
}
.lightbox-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #ffffff;
width: 3.5rem; height: 3.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
backdrop-filter: blur(8px);
z-index: 10;
}
.lightbox-nav-btn:hover {
background: rgba(255, 255, 255, 0.35);
border-color: #ffffff;
transform: translateY(-50%) scale(1.1);
}
.lightbox-prev { left: 2rem; }
.lightbox-next { right: 2rem; }
.lightbox-thumbs {
display: flex;
gap: 0.75rem;
overflow-x: auto;
max-width: 100%;
padding: 0.5rem;
}
.lightbox-thumb {
width: 4.25rem; height: 4.25rem;
border-radius: var(--radius-lg);
overflow: hidden;
border: 2px solid transparent;
opacity: 0.6;
transition: var(--transition-fast);
cursor: pointer;
background: #000;
flex-shrink: 0;
}
.lightbox-thumb:hover { opacity: 0.9; }
.lightbox-thumb.active {
border-color: #ffffff;
opacity: 1;
transform: scale(1.06);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* ============================================================
ZAFIROS MEN — Master Responsive Design System
(Mobile, Tablet & Desktop Adaptations)
============================================================ */
/* ── Category Filters Scroll ── */
.filters {
display: flex;
gap: 0.625rem;
overflow-x: auto;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filter-btn { flex-shrink: 0; white-space: nowrap; }
/* ── Tablet & Medium Screens (max-width: 1024px) ── */
/* ── Mobile Devices & Small Tablets (max-width: 768px) ── */
/* ── Small Mobile Screens (max-width: 480px) ── */
/* ── Video Slide ── */
.slide-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
}
/* ── WhatsApp scrolled state ── */
.whatsapp-float.scrolled {
box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55), 0 3px 10px rgba(0,0,0,0.22);
transform: translateY(-2px);
}
/* ============================================================
HERO SLIDESHOW
============================================================ */
.hero-slideshow {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slideshow .slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transform: scale(1.05);
transition: opacity 1s ease, transform 6s ease;
z-index: 0;
}
.hero-slideshow .slide.active {
opacity: 1;
transform: scale(1);
z-index: 1;
}
.slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(10, 10, 20, 0.72) 0%,
rgba(15, 23, 42, 0.55) 50%,
rgba(10, 10, 20, 0.72) 100%
);
z-index: 2;
}
.hero-slideshow .hero-content {
position: relative;
z-index: 3;
text-align: center;
max-width: 800px;
padding: 0 1.5rem;
}
/* Slide indicators (dots) */
.slide-indicators {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.625rem;
z-index: 4;
}
.slide-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: 2px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: background 0.3s, transform 0.3s;
padding: 0;
}
.slide-dot.active {
background: var(--accent-gold);
border-color: var(--accent-gold);
transform: scale(1.3);
}
.slide-dot:hover {
background: rgba(255, 255, 255, 0.7);
}
/* Prev/Next arrows */
.slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
border: 1.5px solid rgba(255, 255, 255, 0.3);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s, border-color 0.25s, transform 0.25s;
backdrop-filter: blur(8px);
}
.slide-arrow:hover {
background: rgba(217, 119, 6, 0.6);
border-color: var(--accent-gold);
transform: translateY(-50%) scale(1.08);
}
.slide-prev { left: 1.5rem; }
.slide-next { right: 1.5rem; }
/* ============================================================
WHATSAPP FLOATING BUTTON
============================================================ */
.whatsapp-float {
position: fixed;
bottom: 1.75rem;
right: 1.75rem;
z-index: 9999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0,0,0,0.2);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
animation: wa-pulse 2.5s infinite;
}
.whatsapp-float:hover {
transform: scale(1.1) translateY(-3px);
box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0,0,0,0.25);
animation: none;
}
@keyframes wa-pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-tooltip {
position: absolute;
right: 70px;
background: #1a1a2e;
color: #fff;
font-size: 0.78rem;
font-weight: 600;
padding: 0.35rem 0.75rem;
border-radius: 0.5rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateX(6px);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.whatsapp-tooltip::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
border-width: 5px 0 5px 6px;
border-style: solid;
border-color: transparent transparent transparent #1a1a2e;
}
.whatsapp-float:hover .whatsapp-tooltip {
opacity: 1;
transform: translateX(0);
}
/* ============================================================
COLECCIONES - FLOW URBANO & OLD MONEY
============================================================ */
.collections-section {
padding: 5rem 0;
background: #ffffff;
}
.collections-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 3.5rem;
}
.collection-card {
display: block;
border-radius: var(--radius-2xl);
overflow: hidden;
text-decoration: none;
transition: var(--transition-smooth);
box-shadow: var(--shadow-md);
}
.collection-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
}
.collection-img-wrap {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
}
.collection-img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.collection-card:hover .collection-img { transform: scale(1.06); }
.collection-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(5, 5, 15, 0.88) 0%,
rgba(15, 23, 42, 0.3) 50%,
rgba(15, 23, 42, 0) 100%
);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2.5rem 2rem;
transition: var(--transition);
}
.collection-overlay-light {
background: linear-gradient(
to top,
rgba(245, 240, 230, 0.95) 0%,
rgba(245, 240, 230, 0.4) 55%,
rgba(245, 240, 230, 0) 100%
);
}
.collection-content { display: flex; flex-direction: column; gap: 0.5rem; }
.collection-tag {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #a3e635;
}
.collection-overlay-light .collection-tag { color: var(--accent-gold); }
.collection-content h3 {
font-size: 2rem;
font-weight: 800;
color: #ffffff;
letter-spacing: -0.03em;
line-height: 1.2;
}
.collection-content p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
max-width: 22rem;
}
.collection-cta {
font-size: 0.85rem;
font-weight: 700;
color: #ffffff;
margin-top: 0.5rem;
display: inline-block;
transition: var(--transition-fast);
}
.collection-card:hover .collection-cta {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ── LOOKBOOK STRIP ── */
.lookbook-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.875rem;
margin-top: 2rem;
}
.lookbook-item {
position: relative;
aspect-ratio: 3/4;
border-radius: var(--radius-xl);
overflow: hidden;
cursor: pointer;
}
.lookbook-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.lookbook-item:hover img { transform: scale(1.08); }
.lookbook-item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0.15);
transition: background 0.3s;
}
.lookbook-item:hover::after { background: rgba(0,0,0,0.05); }
/* ── STYLE BADGE on product cards ── */
.style-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
backdrop-filter: blur(8px);
max-width: calc(100% - 4.5rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.style-badge-urban {
background: rgba(10, 10, 30, 0.85);
color: #a3e635;
border: 1px solid rgba(163, 230, 53, 0.4);
}
.style-badge-oldmoney {
background: rgba(245, 240, 220, 0.92);
color: #92400e;
border: 1px solid rgba(217, 119, 6, 0.4);
}
/* ── Demo product fallback ── */
.demo-badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(217, 119, 6, 0.9);
color: #ffffff;
font-size: 0.62rem;
font-weight: 800;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
z-index: 2;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}
/* ============================================================
PORTAL DE BIENVENIDA ANIMADO (HUB DE ENTRADA ZAFIROS)
============================================================ */
.portal-root {
min-height: 100vh;
width: 100%;
position: relative;
background: #090d16;
overflow-x: hidden;
display: flex;
flex-direction: column;
color: #ffffff;
}
.portal-topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 40;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2.5rem;
pointer-events: none;
}
.portal-topbar > * {
pointer-events: auto;
}
.portal-top-brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.portal-top-brand img {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5rem;
}
.portal-top-brand span {
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.portal-hub-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.35rem 0.9rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #e2e8f0;
}
.portal-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
animation: pulseDot 2s infinite ease-in-out;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* Split Main Container */
.portal-split-container {
display: flex;
flex: 1;
min-height: 100vh;
position: relative;
}
/* Individual Portal Side */
.portal-side {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 6rem 3.5rem 4rem;
text-decoration: none;
color: #ffffff;
overflow: hidden;
transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s ease;
cursor: pointer;
}
/* Background Layers */
.portal-bg-layer {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
z-index: 1;
}
.portal-overlay {
position: absolute;
inset: 0;
z-index: 2;
transition: background 0.5s ease;
}
/* Side Specific Palettes & Overlays */
.portal-side-men .portal-bg-layer {
background-image: url('../public/slide1.png');
}
.portal-side-men .portal-overlay {
background: linear-gradient(135deg, rgba(8, 12, 22, 0.92) 0%, rgba(15, 23, 42, 0.88) 60%, rgba(30, 41, 59, 0.82) 100%);
}
.portal-side-men:hover .portal-overlay {
background: linear-gradient(135deg, rgba(8, 12, 22, 0.82) 0%, rgba(15, 23, 42, 0.72) 60%, rgba(217, 119, 6, 0.25) 100%);
}
.portal-side-kids .portal-bg-layer {
background-image: url('../public/kids_hero_1.jpg');
}
.portal-side-kids .portal-overlay {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 58, 138, 0.85) 50%, rgba(14, 116, 144, 0.8) 100%);
}
.portal-side-kids:hover .portal-overlay {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(37, 99, 235, 0.7) 50%, rgba(245, 158, 11, 0.3) 100%);
}
/* Hover Zoom & Expansion Effect */
.portal-split-container:hover .portal-side:not(:hover) {
flex: 0.85;
opacity: 0.75;
}
.portal-side:hover {
flex: 1.15;
opacity: 1;
}
.portal-side:hover .portal-bg-layer {
transform: scale(1.08);
}
/* Side Card Content */
.portal-content-box {
position: relative;
z-index: 10;
max-width: 32rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: rgba(15, 23, 42, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 3rem 2.5rem;
border-radius: 2rem;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.portal-side:hover .portal-content-box {
transform: translate3d(0, -6px, 0);
box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 255, 255, 0.08);
}
.portal-side-men:hover .portal-content-box {
border-color: rgba(217, 119, 6, 0.5);
box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(217, 119, 6, 0.25);
}
.portal-side-kids:hover .portal-content-box {
border-color: rgba(56, 189, 248, 0.5);
box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.3);
}
/* Store Logos */
.portal-logo-wrapper {
width: 6.5rem;
height: 6.5rem;
margin-bottom: 1.75rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.08);
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.4s ease, background 0.4s ease;
}
.portal-side:hover .portal-logo-wrapper {
transform: scale(1.1) rotate(-2deg);
background: rgba(255, 255, 255, 0.15);
}
.portal-side-kids:hover .portal-logo-wrapper {
transform: scale(1.1) rotate(2deg);
}
.portal-logo-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
/* Badges & Titles */
.portal-badge {
font-size: 0.725rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.4rem 1rem;
border-radius: 9999px;
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.portal-badge-men {
background: rgba(217, 119, 6, 0.18);
color: #fbbf24;
border: 1px solid rgba(217, 119, 6, 0.4);
}
.portal-badge-kids {
background: rgba(56, 189, 248, 0.18);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.4);
}
.portal-title {
font-size: 2.25rem;
font-weight: 900;
letter-spacing: -0.03em;
margin-bottom: 0.75rem;
line-height: 1.15;
}
.portal-side-men .portal-title {
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 60%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.portal-side-kids .portal-title {
background: linear-gradient(135deg, #ffffff 0%, #93c5fd 50%, #fcd34d 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.portal-desc {
font-size: 0.975rem;
line-height: 1.6;
color: #cbd5e1;
margin-bottom: 1.75rem;
}
/* Feature tags */
.portal-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2rem;
}
.portal-tag {
font-size: 0.75rem;
font-weight: 600;
padding: 0.35rem 0.8rem;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
transition: all 0.25s ease;
}
.portal-side:hover .portal-tag {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
/* Action Buttons */
.portal-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 1.75rem;
border-radius: 1rem;
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.01em;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
border: none;
}
.portal-btn-men {
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
color: #ffffff;
box-shadow: 0 10px 20px -5px rgba(217, 119, 6, 0.5);
}
.portal-btn-men:hover {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
transform: translateY(-2px);
box-shadow: 0 15px 30px -5px rgba(217, 119, 6, 0.6);
}
.portal-btn-kids {
background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
color: #ffffff;
box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.5);
}
.portal-btn-kids:hover {
background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
transform: translateY(-2px);
box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.6);
}
/* Center Crown / Divider */
.portal-center-divider {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 30;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
pointer-events: none;
}
.portal-center-circle {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: #0f172a;
border: 2px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #fbbf24;
animation: floatCenter 4s ease-in-out infinite;
}
@keyframes floatCenter {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.portal-center-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #94a3b8;
background: rgba(15, 23, 42, 0.85);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap;
}
/* Mobile Portal Responsiveness */
/* ============================================================
STORE SWITCHER PILL (NAVBAR COMPONENT)
============================================================ */
.store-switch-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: -0.01em;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
cursor: pointer;
}
.store-switch-kids {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.store-switch-kids:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: #ffffff;
border-color: transparent;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.store-switch-men {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
color: #0f172a;
border: 1px solid #cbd5e1;
}
.store-switch-men:hover {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #ffffff;
border-color: transparent;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}
/* ============================================================
ZAFIROS KIDS — THEME, CARDS & CATALOG
============================================================ */
:root {
--kids-blue: #2563eb;
--kids-blue-light: #eff6ff;
--kids-cyan: #0284c7;
--kids-amber: #f59e0b;
--kids-coral: #f43f5e;
--kids-mint: #10b981;
}
/* Kids Hero Section */
.hero-slideshow-kids {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
background: #0f172a;
color: #ffffff;
overflow: hidden;
}
.hero-slideshow-kids .slide-overlay {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 58, 138, 0.7) 60%, rgba(14, 116, 144, 0.6) 100%);
}
.hero-badge-kids {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(56, 189, 248, 0.2);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.4);
font-size: 0.775rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4rem 1.1rem;
border-radius: 9999px;
margin-bottom: 1.25rem;
backdrop-filter: blur(8px);
}
.btn-kids-hero {
background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
color: #ffffff;
font-weight: 700;
padding: 0.875rem 1.75rem;
border-radius: var(--radius-xl);
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
transition: var(--transition-smooth);
}
.btn-kids-hero:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.6);
background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 100%);
}
/* Kids Promo Card (Cross Promotion) */
.kids-promo-strip {
padding: 5rem 0;
background: linear-gradient(180deg, var(--bg) 0%, #f1f5f9 100%);
}
.kids-promo-card {
background: linear-gradient(135deg, #091328 0%, #1e3a8a 60%, #0284c7 100%);
border-radius: var(--radius-2xl);
overflow: hidden;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
align-items: stretch;
box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.35);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #ffffff;
position: relative;
}
.kids-promo-card-men {
background: linear-gradient(135deg, #090d16 0%, #172033 55%, #78350f 100%);
border-color: rgba(251, 191, 36, 0.25);
box-shadow: 0 20px 45px -12px rgba(180, 83, 9, 0.3);
}
.kids-promo-card-kids {
background: linear-gradient(135deg, #070d1e 0%, #0c2340 55%, #0369a1 100%);
border-color: rgba(56, 189, 248, 0.25);
box-shadow: 0 20px 45px -12px rgba(2, 132, 199, 0.35);
}
.kids-promo-content {
padding: 3.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
}
.kids-promo-content h2 {
font-size: 2.25rem;
font-weight: 900;
letter-spacing: -0.03em;
margin: 0.75rem 0 1rem;
line-height: 1.2;
}
.kids-promo-content p {
color: #cbd5e1;
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 2rem;
max-width: 32rem;
}
.kids-promo-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.kids-promo-img {
position: relative;
overflow: hidden;
min-height: 22rem;
}
.kids-promo-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
}
.kids-promo-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(9,13,24,0.7) 0%, rgba(9,13,24,0.1) 40%, transparent 100%);
pointer-events: none;
}
.btn-kids-hero {
background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
color: #ffffff !important;
font-weight: 700 !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}
.btn-kids-hero:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
}
.btn-white {
background: #ffffff !important;
color: #0f172a !important;
font-weight: 700 !important;
border: 1px solid #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.btn-white:hover {
background: #f8fafc !important;
color: #0284c7 !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
}
.btn-kids-switch {
background: rgba(37, 99, 235, 0.15);
color: #93c5fd;
border: 1px solid rgba(147, 197, 253, 0.4);
backdrop-filter: blur(8px);
}
.btn-kids-switch:hover {
background: rgba(37, 99, 235, 0.3);
color: #ffffff;
border-color: rgba(147, 197, 253, 0.8);
}
/* Kids Category Cards */
.collection-kids-street .collection-overlay {
background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%);
}
.collection-kids-preppy .collection-overlay {
background: linear-gradient(to top, rgba(24, 49, 83, 0.95) 0%, rgba(24, 49, 83, 0.4) 60%, transparent 100%);
}
.collection-kids-play .collection-overlay {
background: linear-gradient(to top, rgba(14, 116, 144, 0.95) 0%, rgba(14, 116, 144, 0.4) 60%, transparent 100%);
}
/* Age Filter Pills */
.age-filters {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
margin-top: 0.75rem;
}
.age-pill {
padding: 0.4rem 0.85rem;
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 700;
border: 1px solid var(--gray-200);
background: #ffffff;
color: var(--gray-600);
cursor: pointer;
transition: var(--transition-fast);
}
.age-pill:hover {
border-color: var(--kids-blue);
color: var(--kids-blue);
background: var(--kids-blue-light);
}
.age-pill.active {
background: var(--kids-blue);
color: #ffffff;
border-color: var(--kids-blue);
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
/* Style Badge Kids */
.style-badge-kids {
background: rgba(37, 99, 235, 0.85);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.style-badge-kids-play {
background: rgba(13, 148, 136, 0.85);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.style-badge-kids-preppy {
background: rgba(245, 158, 11, 0.9);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Size Guide Modal & Table */
.size-guide-table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
font-size: 0.875rem;
}
.size-guide-table th, .size-guide-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--gray-200);
text-align: left;
}
.size-guide-table th {
background: var(--gray-50);
font-weight: 700;
color: var(--gray-700);
}
.size-guide-table tr:hover td {
background: var(--gray-50);
}
/* ── Product Detail Layout (Universal & Kids) ── */
.product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
align-items: start;
}
.product-main-img-wrap {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
background: #ffffff;
border: 1px solid var(--gray-200);
aspect-ratio: 1/1;
cursor: zoom-in;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
}
.product-main-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.product-main-img-wrap:hover img {
transform: scale(1.04);
}
.zoom-badge {
position: absolute;
bottom: 1rem;
right: 1rem;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(8px);
color: #ffffff;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.35rem;
pointer-events: none;
}
.color-swatch-btn {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 2px solid #ffffff;
box-shadow: 0 0 0 1px var(--gray-300);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.color-swatch-btn:hover {
transform: scale(1.15);
}
.color-swatch-btn.active {
transform: scale(1.15);
box-shadow: 0 0 0 2.5px var(--kids-blue);
}
.size-select-btn {
min-width: 3rem;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-lg);
border: 1.5px solid var(--gray-200);
background: #ffffff;
color: var(--gray-700);
font-weight: 700;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
}
.size-select-btn:hover:not(.disabled) {
border-color: var(--kids-blue);
color: var(--kids-blue);
}
.size-select-btn.active {
background: var(--kids-blue);
color: #ffffff;
border-color: var(--kids-blue);
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
.size-select-btn.disabled {
opacity: 0.4;
cursor: not-allowed;
text-decoration: line-through;
}
/* Kids Navbar Accent */
.navbar-kids {
border-bottom: 1px solid rgba(191, 219, 254, 0.7);
box-shadow: 0 4px 20px -2px rgba(37, 99, 235, 0.05);
}
.navbar-kids .navbar-logo span {
background: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ============================================================
ANIMACIONES DE CARGA (PRELOADER & SKELETON SHIMMER)
============================================================ */
/* ── Page Navigation Transition & Top Progress Bar ── */
body.page-exiting {
opacity: 0.72;
transform: scale(0.997);
transition: opacity 0.12s ease-out, transform 0.12s ease-out;
pointer-events: none;
}
#zm-nav-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #0284c7, #38bdf8, #fbbf24);
z-index: 100000;
transition: width 0.2s ease-out, opacity 0.25s ease;
pointer-events: none;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}
#zm-nav-progress.animating {
animation: zmNavProgress 0.8s ease-out forwards;
}
@keyframes zmNavProgress {
0% { width: 0%; opacity: 1; }
60% { width: 75%; opacity: 1; }
100% { width: 92%; opacity: 1; }
}
/* ── Fullscreen Preloader Overlay ── */
.zm-preloader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #090d16;
color: #ffffff;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
overflow: hidden;
user-select: none;
}
.zm-preloader.fade-out {
opacity: 0;
visibility: hidden;
transform: scale(1.02);
pointer-events: none;
}
/* ERP Admin Preloader Light Theme */
.zm-preloader.preloader-admin {
background: rgba(248, 250, 252, 0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #0f172a;
}
/* Preloader Content Box */
.preloader-box {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.5rem;
z-index: 10;
}
/* Rotating Glow Ring */
.preloader-ring-wrapper {
position: relative;
width: 5.5rem;
height: 5.5rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.preloader-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2.5px solid transparent;
animation: preloaderSpin 0.9s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}
.preloader-men .preloader-ring {
border-top-color: #fbbf24;
border-right-color: rgba(217, 119, 6, 0.7);
box-shadow: 0 0 24px rgba(217, 119, 6, 0.45);
}
.preloader-kids .preloader-ring {
border-top-color: #38bdf8;
border-right-color: rgba(37, 99, 235, 0.7);
box-shadow: 0 0 24px rgba(56, 189, 248, 0.45);
}
.preloader-portal .preloader-ring {
border-top-color: #38bdf8;
border-right-color: #fbbf24;
box-shadow: 0 0 28px rgba(56, 189, 248, 0.5);
}
.preloader-admin .preloader-ring {
border-top-color: #0284c7;
border-right-color: #38bdf8;
box-shadow: 0 0 20px rgba(2, 132, 199, 0.35);
}
.preloader-ring-outer {
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.2);
animation: preloaderSpin 8s linear infinite reverse;
}
.preloader-admin .preloader-ring-outer {
border-color: rgba(2, 132, 199, 0.22);
}
.preloader-logo {
width: 3.5rem;
height: 3.5rem;
object-fit: contain;
border-radius: 0.75rem;
animation: preloaderAura 2s ease-in-out infinite;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}
.preloader-admin .preloader-logo {
filter: drop-shadow(0 4px 12px rgba(2, 132, 199, 0.25));
}
@keyframes preloaderSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes preloaderAura {
0%, 100% { transform: scale(0.96); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)); }
50% { transform: scale(1.04); filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.5)); }
}
/* Preloader Titles */
.preloader-title {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.preloader-men .preloader-title {
background: linear-gradient(135deg, #ffffff 0%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.preloader-kids .preloader-title {
background: linear-gradient(135deg, #ffffff 0%, #38bdf8 50%, #fde047 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.preloader-portal .preloader-title {
background: linear-gradient(135deg, #ffffff 0%, #38bdf8 50%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.preloader-admin .preloader-title {
background: linear-gradient(135deg, #0f172a 0%, #0284c7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.preloader-subtitle {
font-size: 0.8125rem;
color: #94a3b8;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 1.5rem;
}
.preloader-admin .preloader-subtitle {
color: #64748b;
}
/* Smooth Progress Bar */
.preloader-progress {
width: 13rem;
height: 3px;
background: rgba(255, 255, 255, 0.12);
border-radius: 9999px;
overflow: hidden;
position: relative;
}
.preloader-admin .preloader-progress {
background: rgba(2, 132, 199, 0.12);
}
.preloader-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 9999px;
animation: preloaderFill 0.4s ease-out forwards;
}
.preloader-men .preloader-progress-bar {
background: linear-gradient(90deg, #d97706, #fbbf24);
}
.preloader-kids .preloader-progress-bar {
background: linear-gradient(90deg, #2563eb, #38bdf8);
}
.preloader-portal .preloader-progress-bar {
background: linear-gradient(90deg, #38bdf8, #fbbf24);
}
.preloader-admin .preloader-progress-bar {
background: linear-gradient(90deg, #0284c7, #38bdf8);
}
@keyframes preloaderFill {
0% { width: 0%; }
100% { width: 100%; }
}
/* ── SKELETON SHIMMER LOADERS ── */
@keyframes skeletonShimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skeleton-shimmer {
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
background-size: 200% 100%;
animation: skeletonShimmer 1.4s ease infinite;
}
.skeleton-card {
background: #ffffff;
border-radius: var(--radius-xl);
border: 1px solid var(--gray-200);
overflow: hidden;
display: flex;
flex-direction: column;
}
.skeleton-card-img {
aspect-ratio: 1/1;
width: 100%;
}
.skeleton-card-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.skeleton-line {
height: 0.875rem;
border-radius: var(--radius-sm);
}
/* ============================================================
RESPONSIVE DESIGN SYSTEM (MOBILE, PC, SMART TV 4K)
============================================================ */
/* ── 1. SMART TV & ULTRA-WIDE SCREENS (≥ 1920px & ≥ 2560px) ── */
/* ── 2. TABLETS & SMALL LAPTOPS (641px – 1024px) ── */
/* ── 3. EXTRA SMALL MOBILE ADJUSTMENTS (< 400px) ── */
/* ============================================================
SCROLL REVEAL ANIMATIONS (CARGA SUAVE AL HACER SCROLL)
============================================================ */
.scroll-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* Directional and Scale Variants */
.reveal-scale {
opacity: 0;
transform: scale(0.94) translateY(18px);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-scale.revealed {
opacity: 1;
transform: scale(1) translateY(0);
}
.reveal-slide-left {
opacity: 0;
transform: translateX(-35px);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-slide-left.revealed {
opacity: 1;
transform: translateX(0);
}
.reveal-slide-right {
opacity: 0;
transform: translateX(35px);
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-slide-right.revealed {
opacity: 1;
transform: translateX(0);
}
/* Stagger Delays */
.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }
.delay-6 { transition-delay: 0.48s !important; }
/* Micro Card Hover Bounce */
.product-card, .collection-card, .photo-card, .value-card {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
/* ============================================================
ERP MULTI-STORE & ADVANCED ANALYTICS STYLES
============================================================ */
/* Admin Scope Buttons */
.admin-scope-btn {
background: transparent;
color: #94a3b8;
border: none;
padding: 0.35rem 0.5rem;
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.admin-scope-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
.admin-scope-btn.active {
background: #2563eb;
color: #ffffff;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}
/* Store Filter Tabs in Header Content — Modern Organic Pill */
.store-filter-tabs {
display: inline-flex;
align-items: center;
background: #f1f5f9;
padding: 0.25rem;
border-radius: 9999px;
width: fit-content;
border: 1px solid var(--gray-200);
gap: 0.25rem;
}
.store-tab-btn {
padding: 0.45rem 1.15rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 700;
border: none;
background: transparent;
color: var(--gray-600);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.store-tab-btn:hover:not(.active) {
color: var(--gray-900);
background: rgba(255, 255, 255, 0.7);
}
.store-tab-btn.active {
background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
color: #ffffff;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.store-tab-btn.active#tab-men {
background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}
.store-tab-btn.active#tab-kids {
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}
/* Badges for ERP */
.badge-men {
background: #0f172a;
color: #ffffff;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-kids {
background: #0284c7;
color: #ffffff;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-superadmin {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #ffffff;
padding: 0.2rem 0.65rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 0.25rem;
box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}
.badge-admin {
background: #0f172a;
color: #ffffff;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-client {
background: #f1f5f9;
color: #475569;
border: 1px solid #cbd5e1;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-trending {
background: linear-gradient(135deg, #ea580c, #f59e0b);
color: #ffffff;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 0.25rem;
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
}
.badge-stock-low {
background: #fee2e2;
color: #b91c1c;
padding: 0.2rem 0.5rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 700;
}
.badge-stock-ok {
background: #dcfce7;
color: #15803d;
padding: 0.2rem 0.5rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 700;
}
/* Admin Sidebar Scope Switcher — Ultra-Modern Organic Rounded Pill */
.sidebar-scope-box {
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--gray-200);
background: #f8fafc;
}
.sidebar-scope-label {
font-size: 0.6875rem;
text-transform: uppercase;
color: #64748b;
font-weight: 800;
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar-scope-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.25rem;
background: #e2e8f0;
padding: 0.25rem;
border-radius: 9999px;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.admin-scope-btn {
background: transparent;
border: none;
color: #475569;
font-size: 0.75rem;
font-weight: 700;
padding: 0.45rem 0.35rem;
border-radius: 9999px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
position: relative;
user-select: none;
}
.admin-scope-btn:hover:not([class*="active-"]) {
color: #0f172a;
background: rgba(255, 255, 255, 0.5);
}
.admin-scope-btn.active-universe {
background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 50%, #1d4ed8 100%);
color: #ffffff;
font-weight: 800;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transform: translateY(-1px);
}
.admin-scope-btn.active-men {
background: linear-gradient(135deg, #334155 0%, #1e293b 50%, #0f172a 100%);
color: #ffffff;
font-weight: 800;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.admin-scope-btn.active-kids {
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
color: #ffffff;
font-weight: 800;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
transform: translateY(-1px);
}
/* Analytics Cards & Progress Bars */
.analytics-metric-card {
background: #ffffff;
border-radius: var(--radius-2xl);
padding: 1.5rem;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.analytics-metric-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0284c7, #38bdf8);
}
.metric-card-men::after {
background: linear-gradient(90deg, #d97706, #fbbf24);
}
.metric-card-kids::after {
background: linear-gradient(90deg, #0284c7, #38bdf8);
}
.metric-card-total::after {
background: linear-gradient(90deg, #2563eb, #9333ea);
}
.trend-progress-track {
width: 100%;
height: 0.5rem;
background: var(--gray-100);
border-radius: 9999px;
overflow: hidden;
margin-top: 0.35rem;
}
.trend-progress-fill {
height: 100%;
border-radius: 9999px;
background: linear-gradient(90deg, #2563eb, #38bdf8);
transition: width 0.6s ease;
}
/* ── Responsive Table Wrapper ── */
.table-responsive {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
border-radius: var(--radius-xl);
}
.table-responsive::-webkit-scrollbar {
height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 999px;
}
/* ============================================================
MASTER RESPONSIVE DESIGN SYSTEM (GUARANTEED PRIORITY CASCADE)
============================================================ */
/* ── 1. ULTRA-WIDE & 4K SCREENS (≥ 1921px) ── */
@media (min-width: 1921px) {
.main-container { max-width: 96rem; }
.navbar-inner { max-width: 96rem; }
.product-grid { grid-template-columns: repeat(5, 1fr); }
.hero-title { font-size: 4rem; }
.section-heading { font-size: 2.75rem; }
.collections-grid { max-width: 96rem; margin: 0 auto; }
}
@media (min-width: 2560px) {
.main-container { max-width: 112rem; }
.navbar-inner { max-width: 112rem; }
.product-grid { grid-template-columns: repeat(6, 1fr); }
}
/* ── 2. DESKTOP SCREENS (≥ 961px) ── */
@media (min-width: 961px) {
.navbar-desktop-nav { display: flex !important; }
.navbar-actions-mobile { display: none !important; }
.admin-sidebar {
position: relative !important;
transform: translateX(0) !important;
flex-shrink: 0;
border-bottom-right-radius: 1.25rem;
}
.admin-topbar { display: none !important; }
.product-grid { grid-template-columns: repeat(4, 1fr); }
.product-detail-grid { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
.cart-grid { grid-template-columns: 2fr 1fr; }
.collections-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── 3. TABLETS & SMALL LAPTOPS (max-width: 1024px) ── */
@media (max-width: 1024px) {
.main-container { padding-left: 1.25rem; padding-right: 1.25rem; }
.product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.product-detail-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.cart-grid { grid-template-columns: 1fr; }
.cart-summary { position: static; }
.about-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.collections-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── 4. TABLETS PORTRAIT & NAVBAR MOBILE MODE (max-width: 960px) ── */
@media (max-width: 960px) {
/* Switch Navbar completely to mobile drawer mode */
.navbar-inner { padding: 0 1rem; height: 4rem; }
.navbar-desktop-nav { display: none !important; }
.navbar-actions-mobile { display: flex !important; }
/* Portal Split Screen Responsiveness */
.portal-split-container {
flex-direction: column;
min-height: auto;
}
.portal-side {
min-height: 50vh;
padding: 5rem 1.5rem 3.5rem;
width: 100%;
}
.portal-center-divider { display: none; }
.portal-topbar { padding: 1rem 1.5rem; }
.portal-content-box { padding: 2rem 1.5rem; max-width: 28rem; }
.portal-title { font-size: 1.85rem; }
/* Product layout */
.product-layout { grid-template-columns: 1fr; gap: 2rem; }
}
/* ── 5. MOBILE STANDARD (max-width: 768px — All Android & iPhones) ── */
@media (max-width: 768px) {
/* Global viewport safety */
html, body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overflow-x: clip !important;
position: relative !important;
box-sizing: border-box !important;
}
/* Layout & Spacing */
.main-container {
padding: 2rem 1rem !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Admin Layout Mobile Safety */
.admin-layout {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
}
.admin-main {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.admin-topbar {
padding: 0.5rem 0.85rem !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
gap: 0.4rem !important;
}
.admin-topbar span {
font-size: 1rem !important;
}
.admin-content {
padding: 1.25rem 1rem !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Admin Grid Utilities on Mobile */
.grid-2, .grid-3, .grid-4, .kpi-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
/* Admin Filter Tabs on Mobile */
.store-filter-tabs {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
justify-content: space-between !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.25rem !important;
box-sizing: border-box !important;
border-radius: var(--radius-full) !important;
}
.store-tab-btn {
flex: 1 1 0 !important;
padding: 0.45rem 0.5rem !important;
font-size: 0.775rem !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
gap: 0.2rem !important;
}
/* Table Wrapping & Mobile Data Table Optimizations */
.table-wrap, .table-responsive {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
display: block !important;
margin-bottom: 1rem !important;
box-sizing: border-box !important;
border-radius: var(--radius-xl) !important;
}
.table-wrap table, .table-responsive table {
min-width: 520px !important;
font-size: 0.78125rem !important;
}
.table-wrap thead th, .table-responsive thead th {
padding: 0.5rem 0.6rem !important;
font-size: 0.65625rem !important;
letter-spacing: 0.03em !important;
white-space: nowrap !important;
}
.table-wrap tbody td, .table-responsive tbody td {
padding: 0.55rem 0.6rem !important;
font-size: 0.78125rem !important;
vertical-align: middle !important;
}
.table-wrap td img, .table-responsive td img {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
border-radius: 8px !important;
object-fit: cover !important;
}
.table-wrap td .badge, .table-responsive td .badge,
.table-wrap td .badge-men, .table-responsive td .badge-men,
.table-wrap td .badge-kids, .table-responsive td .badge-kids,
.table-wrap td .badge-stock-ok, .table-responsive td .badge-stock-ok,
.table-wrap td .badge-stock-low, .table-responsive td .badge-stock-low {
padding: 0.12rem 0.4rem !important;
font-size: 0.65625rem !important;
white-space: nowrap !important;
}
.table-wrap td .btn, .table-responsive td .btn,
.table-wrap td button, .table-responsive td button {
padding: 0.25rem 0.45rem !important;
font-size: 0.71875rem !important;
min-height: 28px !important;
}
.admin-content {
padding: 0.85rem 0.75rem !important;
}
/* Navbar Mobile Mode */
.navbar-inner {
padding: 0 0.875rem !important;
height: 3.75rem !important;
}
.navbar-desktop-nav { display: none !important; }
.navbar-actions-mobile { display: flex !important; }
.navbar-logo img { width: 2.15rem; height: 2.15rem; }
.navbar-logo span { font-size: 1.05rem; }
/* Hero Section & Slideshow */
.hero-section { padding: 3rem 1rem 4rem !important; }
.hero-slideshow, .hero-slideshow-kids {
min-height: 80vh !important;
height: auto !important;
touch-action: pan-y;
padding: 2rem 0 3rem !important;
}
.hero-content {
padding: 3rem 1rem 3.5rem !important;
max-width: 100% !important;
}
.hero-badge, .hero-badge-kids {
font-size: 0.725rem;
padding: 0.35rem 0.85rem;
margin-bottom: 1rem;
max-width: 95%;
white-space: normal;
}
.hero-title {
font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important;
line-height: 1.18 !important;
margin-bottom: 0.875rem !important;
max-width: 100% !important;
}
.hero-subtitle {
font-size: 0.925rem !important;
line-height: 1.5 !important;
margin-bottom: 1.75rem !important;
padding: 0 0.25rem !important;
max-width: 100% !important;
}
.hero-actions {
flex-direction: column !important;
width: 100% !important;
max-width: 22rem !important;
margin: 0 auto !important;
gap: 0.75rem !important;
}
.hero-actions .btn {
width: 100% !important;
justify-content: center !important;
padding: 0.75rem 1.25rem !important;
font-size: 0.925rem !important;
}
/* Slide arrows on mobile */
.slide-arrow {
width: 38px !important;
height: 38px !important;
top: auto !important;
bottom: 1.25rem !important;
transform: none !important;
background: rgba(15, 23, 42, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.slide-prev { left: 1rem !important; }
.slide-next { right: 1rem !important; }
.slide-indicators { bottom: 1.75rem !important; }
/* Sections & Headings */
.about-section, .featured-section, .values-section, .collections-section {
padding: 2.5rem 0 !important;
}
.section-heading { font-size: 1.55rem !important; }
.section-desc { font-size: 0.9rem !important; }
/* Grids & Cards */
.about-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
.photo-frame { height: 13rem !important; }
.featured-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 1rem !important;
}
.featured-header .btn { width: 100% !important; }
/* Product Cards Grid: Clean 2 Columns */
.product-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
}
.product-card {
border-radius: var(--radius-xl) !important;
}
.product-card-body { padding: 0.75rem !important; }
.product-card-body h3 { font-size: 0.875rem !important; }
.product-card-body p { display: none !important; }
.product-price { font-size: 1rem !important; }
/* Values Section */
.values-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
/* Cross Promotion Cards Mobile (Men & Kids) */
.kids-promo-strip {
padding: 2.25rem 0 !important;
}
.kids-promo-card {
grid-template-columns: 1fr !important;
display: flex !important;
flex-direction: column !important;
border-radius: var(--radius-2xl) !important;
box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.3) !important;
}
.kids-promo-img {
width: 100% !important;
height: 14rem !important;
min-height: auto !important;
order: -1 !important;
position: relative !important;
}
.kids-promo-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 20% !important;
}
.kids-promo-img::after {
background: linear-gradient(180deg, transparent 40%, rgba(9, 13, 24, 0.95) 100%) !important;
}
.kids-promo-content {
padding: 1.5rem 1.25rem 1.75rem !important;
margin-top: -1.25rem !important;
position: relative !important;
z-index: 2 !important;
text-align: left !important;
}
.kids-promo-content h2 {
font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
line-height: 1.25 !important;
margin: 0.5rem 0 0.65rem !important;
}
.kids-promo-content p {
font-size: 0.925rem !important;
line-height: 1.5 !important;
margin-bottom: 1.5rem !important;
color: #cbd5e1 !important;
max-width: 100% !important;
}
.kids-promo-actions {
flex-direction: column !important;
gap: 0.75rem !important;
width: 100% !important;
}
.kids-promo-actions .btn {
width: 100% !important;
padding: 0.8rem 1.25rem !important;
font-size: 0.95rem !important;
justify-content: center !important;
border-radius: var(--radius-full) !important;
}
/* CTA Banner */
.cta-banner { padding: 2.75rem 1.25rem !important; margin: 2rem 0 !important; }
.cta-inner h2 { font-size: 1.55rem !important; }
.cta-inner p { font-size: 0.925rem !important; }
.cta-inner > div { flex-direction: column !important; width: 100% !important; max-width: 22rem !important; margin-left: auto !important; margin-right: auto !important; }
.cta-inner .btn { width: 100% !important; justify-content: center !important; }
/* Product Detail Gallery & Layout */
.product-detail-grid {
grid-template-columns: 1fr !important;
gap: 1.75rem !important;
padding: 1rem 0 2.5rem !important;
}
.product-layout { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
.gallery-main { aspect-ratio: 1/1 !important; border-radius: var(--radius-xl) !important; }
.gallery-thumbs { gap: 0.5rem !important; overflow-x: auto !important; padding-bottom: 0.25rem !important; }
.gallery-thumb { width: 3.75rem !important; height: 3.75rem !important; }
.product-detail-price { font-size: 1.65rem !important; }
/* Modals, Popups & Responsive Form Grids */
.modal-overlay {
padding: 0.5rem !important;
align-items: center !important;
}
.modal, .modal-card {
padding: 1.15rem 0.95rem !important;
max-width: 100% !important;
max-height: 92vh !important;
margin: auto !important;
border-radius: var(--radius-xl) !important;
}
.modal-header {
margin-bottom: 0.85rem !important;
}
.modal-header h2 {
font-size: 1.125rem !important;
}
.modal-body {
max-height: 60vh !important;
padding: 0.75rem 0.25rem !important;
}
.modal-grid-2, .form-row-2, .grid-2 {
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
.modal-grid-2-compact, .form-row-2-compact {
grid-template-columns: 1fr 1fr !important;
gap: 0.5rem !important;
}
.form-select, .form-input, .form-textarea {
font-size: 0.875rem !important;
padding: 0.55rem 0.75rem !important;
min-height: 42px !important;
}
.modal-form-actions, .modal-actions, .modal-footer {
display: flex !important;
flex-direction: column-reverse !important;
gap: 0.5rem !important;
width: 100% !important;
padding-top: 0.75rem !important;
}
.modal-form-actions .btn, .modal-actions .btn, .modal-footer .btn {
width: 100% !important;
justify-content: center !important;
padding: 0.65rem 1rem !important;
font-size: 0.875rem !important;
}
.modal-btn-group {
width: 100% !important;
display: flex !important;
flex-direction: column-reverse !important;
gap: 0.5rem !important;
}
.modal-btn-group .btn {
width: 100% !important;
}
/* Lightbox Modal */
.lightbox-modal { padding: 1rem 0.5rem !important; }
#lightbox-img { max-width: 96% !important; max-height: 65vh !important; }
.lightbox-nav-btn { width: 2.5rem !important; height: 2.5rem !important; }
.lightbox-prev { left: 0.5rem !important; }
.lightbox-next { right: 0.5rem !important; }
.lightbox-thumbs { gap: 0.5rem !important; }
.lightbox-thumb { width: 3.25rem !important; height: 3.25rem !important; }
/* Horizontal touch scrolling filters */
.filters, .age-filters {
justify-content: flex-start !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 0.5rem !important;
scrollbar-width: none !important;
}
.filter-btn, .age-pill {
white-space: nowrap !important;
flex-shrink: 0 !important;
font-size: 0.8rem !important;
padding: 0.45rem 0.9rem !important;
}
/* WhatsApp button on mobile (Safe area compliant, zero overflow) */
.whatsapp-float {
width: 52px !important;
height: 52px !important;
bottom: max(1.15rem, env(safe-area-inset-bottom, 1.15rem)) !important;
right: max(1.15rem, env(safe-area-inset-right, 1.15rem)) !important;
z-index: 9900 !important;
}
.whatsapp-float svg {
width: 26px !important;
height: 26px !important;
}
.whatsapp-tooltip {
display: none !important;
}
/* Footer */
.footer { padding: 2.5rem 0 2rem !important; }
.footer-inner {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1.25rem !important;
}
}
/* ── 6. COMPACT MOBILE (max-width: 480px) ── */
@media (max-width: 480px) {
.navbar-logo span { display: none !important; }
.navbar-inner { padding: 0 0.75rem !important; }
.product-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.6rem !important;
}
.product-card-body {
padding: 0.6rem !important;
}
.product-price {
font-size: 0.95rem !important;
}
.btn-lg { padding: 0.75rem 1.25rem !important; font-size: 0.925rem !important; }
.btn { padding: 0.625rem 1rem !important; font-size: 0.825rem !important; }
.product-detail-price { font-size: 1.5rem !important; }
.size-option { padding: 0.45rem 0.75rem !important; font-size: 0.8rem !important; }
.color-option { width: 1.85rem !important; height: 1.85rem !important; }
.cart-item { flex-direction: column !important; gap: 0.75rem !important; }
.cart-item-img { width: 100% !important; height: 9rem !important; }
.portal-side { padding: 4.5rem 1rem 2.5rem !important; }
.portal-content-box { padding: 1.75rem 1rem !important; border-radius: var(--radius-xl) !important; }
.portal-title { font-size: 1.65rem !important; }
/* Cross Promotion compact adjustments */
.kids-promo-img { height: 12.5rem !important; }
.kids-promo-content { padding: 1.25rem 1rem 1.5rem !important; }
.kids-promo-content h2 { font-size: 1.3rem !important; }
.kids-promo-content p { font-size: 0.85rem !important; margin-bottom: 1.15rem !important; }
}
/* ── 7. EXTRA SMALL MOBILE (max-width: 360px) ── */
@media (max-width: 360px) {
.product-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.product-card-body p { display: block !important; }
.hero-title { font-size: 1.6rem !important; }
.hero-actions .btn { font-size: 0.85rem !important; padding: 0.65rem 1rem !important; }
.portal-logo-wrapper { width: 5rem !important; height: 5rem !important; }
}
/* ── 8. ACCESSIBILITY / REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── 9. RECEIPT & ORDER TICKET STYLES ── */
.order-ticket {
background: #ffffff;
border-radius: var(--radius-2xl);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-md);
padding: 1.75rem;
width: 100%;
box-sizing: border-box;
color: var(--gray-900);
}
.ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px dashed var(--gray-200);
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
gap: 1rem;
}
.ticket-logo {
max-height: 3.5rem;
max-width: 10rem;
object-fit: contain;
}
.ticket-brand-info {
text-align: right;
}
.ticket-meta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
background: #f8fafc;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 0.875rem 1rem;
margin-bottom: 1.25rem;
}
.ticket-meta-item label {
font-size: 0.7rem;
font-weight: 700;
color: var(--gray-500);
text-transform: uppercase;
display: block;
}
.ticket-meta-item span {
font-size: 0.85rem;
font-weight: 800;
color: var(--gray-900);
}
.ticket-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.25rem;
}
.ticket-table th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gray-500);
border-bottom: 1px solid var(--gray-200);
padding: 0.5rem 0.5rem;
text-align: left;
}
.ticket-table td {
padding: 0.65rem 0.5rem;
border-bottom: 1px solid #f1f5f9;
font-size: 0.85rem;
}
.ticket-total-box {
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #ffffff;
border-radius: var(--radius-xl);
padding: 1.15rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
}
.ticket-total-box .total-label {
font-size: 0.85rem;
font-weight: 700;
color: #94a3b8;
}
.ticket-total-box .total-amount {
font-size: 1.65rem;
font-weight: 900;
color: #38bdf8;
letter-spacing: -0.02em;
}
@media print {
body * {
visibility: hidden !important;
}
#printable-receipt-area, #printable-receipt-area * {
visibility: visible !important;
}
#printable-receipt-area {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 1rem !important;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.no-print {
display: none !important;
}
}
/* ── 10. MULTI-CURRENCY & BCV RATES STYLES ── */
.bcv-rate-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: #f8fafc;
border: 1px solid var(--gray-300);
border-radius: var(--radius-full);
padding: 0.25rem 0.65rem;
font-size: 0.78125rem;
color: var(--gray-800);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
width: 100%;
max-width: 100%;
box-sizing: border-box;
user-select: none;
white-space: nowrap;
}
.bcv-rate-pill:hover {
background: #ffffff;
border-color: #0284c7;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
transform: translateY(-1px);
}
.bcv-pill-flag {
font-size: 0.8125rem;
line-height: 1;
flex-shrink: 0;
}
.bcv-pill-rates {
display: inline-flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 1;
min-width: 0;
}
.bcv-rate-item {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.bcv-rate-item strong {
color: var(--gray-900);
font-weight: 800;
margin-right: 0.1rem;
}
.bcv-rate-divider {
color: var(--gray-300);
font-weight: 300;
margin: 0 0.05rem;
flex-shrink: 0;
}
.bcv-pill-badge {
font-size: 0.65625rem;
font-weight: 800;
padding: 0.08rem 0.3rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.bcv-pill-badge.badge-bcv {
color: #059669;
background: #ecfdf5;
}
.bcv-pill-badge.badge-manual {
color: #d97706;
background: #fffbeb;
}
.bcv-pill-store {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-weight: 800;
color: #0284c7;
font-size: 0.71875rem;
background: #e0f2fe;
padding: 0.08rem 0.35rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
}
.bcv-pill-icon {
color: var(--gray-500);
margin-left: 0.05rem;
flex-shrink: 0;
}
/* Sidebar BCV & Currency Card Widget */
.sidebar-bcv-box {
padding: 0 0.85rem;
margin: 0.35rem 0 0.75rem;
}
.sidebar-bcv-card {
background: #f8fafc;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 0.65rem 0.75rem;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.sidebar-bcv-card:hover {
background: #ffffff;
border-color: #0284c7;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
transform: translateY(-1px);
}
.sidebar-bcv-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.45rem;
}
.sidebar-bcv-title-wrap {
display: flex;
align-items: center;
gap: 0.35rem;
}
.sidebar-bcv-title {
font-size: 0.6875rem;
font-weight: 800;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sidebar-bcv-badge {
font-size: 0.625rem;
font-weight: 800;
padding: 0.1rem 0.35rem;
border-radius: 4px;
}
.sidebar-bcv-badge.status-bcv {
background: #dcfce7;
color: #15803d;
border: 1px solid #bbf7d0;
}
.sidebar-bcv-badge.status-manual {
background: #fef3c7;
color: #b45309;
border: 1px solid #fde68a;
}
.sidebar-bcv-rates-row {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--radius-md);
padding: 0.3rem 0.5rem;
margin-bottom: 0.45rem;
}
.sidebar-bcv-rate-item {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.71875rem;
}
.sidebar-bcv-rate-lbl {
color: var(--gray-500);
font-weight: 700;
}
.sidebar-bcv-rate-val {
color: var(--gray-900);
font-weight: 800;
}
.sidebar-bcv-rate-divider {
width: 1px;
height: 12px;
background: var(--gray-200);
}
.sidebar-bcv-store-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.71875rem;
}
.sidebar-bcv-cur-info {
display: flex;
align-items: center;
gap: 0.3rem;
}
.sidebar-bcv-store-lbl {
color: var(--gray-500);
font-weight: 600;
}
.sidebar-bcv-store-val {
color: #0284c7;
font-weight: 800;
background: #e0f2fe;
padding: 0.1rem 0.35rem;
border-radius: 4px;
font-size: 0.6875rem;
}
.sidebar-bcv-edit-hint {
color: var(--gray-500);
font-size: 0.65625rem;
font-weight: 700;
transition: color 0.15s;
}
.sidebar-bcv-card:hover .sidebar-bcv-edit-hint {
color: #0284c7;
}
@media (max-width: 480px) {
.admin-topbar {
padding: 0.45rem 0.65rem !important;
gap: 0.35rem !important;
}
.bcv-rate-pill {
padding: 0.22rem 0.4rem;
font-size: 0.71875rem;
gap: 0.22rem;
justify-content: space-around;
}
.bcv-store-text {
display: none !important;
}
.bcv-pill-store {
font-size: 0.6875rem;
padding: 0.06rem 0.3rem;
}
}
@media (max-width: 380px) {
.admin-topbar {
padding: 0.4rem 0.5rem !important;
}
.bcv-rate-pill {
padding: 0.18rem 0.25rem;
font-size: 0.65625rem;
gap: 0.15rem;
letter-spacing: -0.01em;
}
.bcv-cur-prefix {
display: none !important;
}
.bcv-pill-badge {
font-size: 0.59375rem;
padding: 0.05rem 0.2rem;
}
.bcv-pill-store {
font-size: 0.625rem;
padding: 0.05rem 0.22rem;
}
.bcv-pill-flag {
font-size: 0.75rem;
}
.bcv-pill-icon {
width: 10px;
height: 10px;
}
}
/* Receipt Currency Switcher */
.ticket-currency-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: #f1f5f9;
border-radius: var(--radius-lg);
padding: 0.375rem 0.5rem;
margin-bottom: 1.25rem;
gap: 0.5rem;
flex-wrap: wrap;
}
.ticket-currency-label {
font-size: 0.75rem;
font-weight: 800;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-left: 0.25rem;
}
.ticket-currency-pills {
display: flex;
gap: 0.35rem;
}
.ticket-currency-btn {
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-md);
padding: 0.25rem 0.65rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--gray-600);
cursor: pointer;
transition: all 0.15s ease;
}
.ticket-currency-btn:hover {
background: #ffffff;
color: var(--gray-900);
}
.ticket-currency-btn.active {
background: var(--gray-900);
color: #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Multi-Currency Conversion Reference Card inside Ticket */
.ticket-multicurrency-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.5rem;
background: #f8fafc;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 0.75rem;
margin-top: 1rem;
}
.ticket-multicurrency-item {
text-align: center;
padding: 0.35rem;
}
.ticket-multicurrency-item .tm-label {
font-size: 0.6875rem;
color: var(--gray-500);
font-weight: 700;
text-transform: uppercase;
}
.ticket-multicurrency-item .tm-value {
font-size: 0.95rem;
font-weight: 900;
color: var(--gray-900);
margin-top: 0.15rem;
}
/* Payment Method Badges */
.badge-pagomovil {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
font-weight: 700;
font-size: 0.75rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-transferencia {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
font-weight: 700;
font-size: 0.75rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-efectivo {
background: #fefce8;
color: #a16207;
border: 1px solid #fef08a;
font-weight: 700;
font-size: 0.75rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-zelle {
background: #faf5ff;
color: #7e22ce;
border: 1px solid #e9d5ff;
font-weight: 700;
font-size: 0.75rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-pos {
background: #f1f5f9;
color: #334155;
border: 1px solid #cbd5e1;
font-weight: 700;
font-size: 0.75rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* KPI Currency Switcher Tabs */
.kpi-currency-tabs {
display: flex;
background: var(--gray-100);
border-radius: var(--radius-lg);
padding: 0.25rem;
gap: 0.25rem;
}
.kpi-cur-btn {
border: none;
background: transparent;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-md);
font-size: 0.8125rem;
font-weight: 700;
color: var(--gray-600);
cursor: pointer;
transition: all 0.15s ease;
}
.kpi-cur-btn:hover {
color: var(--gray-900);
}
.kpi-cur-btn.active {
background: #ffffff;
color: var(--gray-900);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Payment Methods Breakdown Grid */
.payment-methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.85rem;
margin-bottom: 1.5rem;
}
.pm-card {
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-xl);
padding: 1rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.pm-card .pm-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--gray-500);
display: flex;
align-items: center;
justify-content: space-between;
}
.pm-card .pm-amount {
font-size: 1.25rem;
font-weight: 900;
color: var(--gray-900);
}
.pm-card .pm-count {
font-size: 0.7rem;
color: var(--gray-400);
}
/* ==============================================================================
SECTION 11: MODAL DE INACTIVIDAD Y TEMPORIZADOR DE SESIÓN (ZAFIROS)
============================================================================== */
.inactivity-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.inactivity-modal {
background: #ffffff;
border-radius: var(--radius-2xl);
padding: 2rem;
max-width: 28rem;
width: 100%;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
text-align: center;
position: relative;
overflow: hidden;
animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.inactivity-icon-wrap {
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 1.25rem;
background: #fef3c7;
color: #d97706;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
position: relative;
animation: pulseInactivity 2s infinite ease-in-out;
}
@keyframes pulseInactivity {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
}
50% {
transform: scale(1.06);
box-shadow: 0 0 0 14px rgba(217, 119, 6, 0);
}
}
.inactivity-title {
font-size: 1.45rem;
font-weight: 800;
color: var(--gray-900);
margin: 0 0 0.5rem;
letter-spacing: -0.02em;
}
.inactivity-desc {
font-size: 0.9375rem;
color: var(--gray-600);
line-height: 1.5;
margin: 0 0 1.5rem;
}
.inactivity-countdown-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: var(--radius-xl);
padding: 1rem;
margin-bottom: 1.5rem;
}
.inactivity-countdown-number {
font-size: 2.25rem;
font-weight: 900;
font-family: monospace;
color: #dc2626;
line-height: 1;
margin-bottom: 0.35rem;
}
.inactivity-progress-bar {
width: 100%;
height: 6px;
background: #e2e8f0;
border-radius: 3px;
overflow: hidden;
margin-top: 0.5rem;
}
.inactivity-progress-fill {
height: 100%;
background: linear-gradient(90deg, #d97706, #dc2626);
width: 100%;
transition: width 1s linear;
}
.inactivity-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.inactivity-actions .btn {
width: 100%;
justify-content: center;
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
font-weight: 800;
}