/* ============================================================
   KAIROS E-COMMERCE SYSTEM — Main Stylesheet
   Premium, High-End E-Commerce Platform
   Stores: Kairos Tecnología (Tech) | Kairos Moda (Fashion)
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   2. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================ */
:root {
  /* ---- Core Palette ---- */
  --color-primary-dark:    #0a0a1a;
  --color-secondary:       #1a1a3e;
  --color-tertiary:         #12122a;
  --color-accent-tech:      #00d4ff;
  --color-accent-tech-dark: #0098b8;
  --color-accent-tech-glow: rgba(0, 212, 255, .35);
  --color-accent-moda:      #e94560;
  --color-accent-moda-dark: #b83050;
  --color-accent-moda-glow: rgba(233, 69, 96, .35);
  --color-gold:             #d4a574;
  --color-gold-light:       #e8c9a0;
  --color-success:          #00c853;
  --color-success-dark:     #009640;
  --color-warning:          #ffab00;
  --color-warning-dark:     #c68400;
  --color-danger:           #ff1744;
  --color-danger-dark:      #d50000;
  --color-info:             #448aff;

  /* ---- Text ---- */
  --color-text-primary:     #ffffff;
  --color-text-secondary:   #b0b0c0;
  --color-text-muted:       #8888a0;
  --color-text-dark:        #0a0a1a;

  /* ---- Surfaces ---- */
  --color-surface:          #111128;
  --color-surface-light:    #1c1c42;
  --color-surface-lighter:  #252550;
  --color-card:             #151530;
  --color-card-hover:       #1a1a3e;
  --color-border:           rgba(255, 255, 255, .06);
  --color-border-light:     rgba(255, 255, 255, .12);

  /* ---- Gradients ---- */
  --gradient-tech: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);
  --gradient-moda: linear-gradient(135deg, #e94560 0%, #ff6b81 100%);
  --gradient-gold: linear-gradient(135deg, #d4a574 0%, #e8c9a0 100%);
  --gradient-dark: linear-gradient(180deg, #0a0a1a 0%, #1a1a3e 100%);
  --gradient-hero-tech: linear-gradient(135deg, rgba(0,212,255,.15) 0%, rgba(0,0,0,.85) 100%);
  --gradient-hero-moda: linear-gradient(135deg, rgba(233,69,96,.15) 0%, rgba(0,0,0,.85) 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);

  /* ---- Typography ---- */
  --font-heading:   'Poppins', sans-serif;
  --font-body:      'Inter', sans-serif;

  --font-size-xs:   .75rem;    /* 12px */
  --font-size-sm:   .875rem;   /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  2rem;      /* 32px */
  --font-size-3xl:  2.5rem;    /* 40px */
  --font-size-4xl:  3rem;      /* 48px */
  --font-size-5xl:  3.5rem;    /* 56px */
  --font-size-hero: 4.5rem;    /* 72px */

  --line-height-tight:  1.15;
  --line-height-normal: 1.6;
  --line-height-relaxed:1.8;

  --letter-spacing-tight:  -.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   .04em;
  --letter-spacing-wider:  .08em;

  /* ---- Spacing ---- */
  --space-1:  .25rem;   /* 4px */
  --space-2:  .5rem;    /* 8px */
  --space-3:  .75rem;   /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ---- Borders & Radius ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.15);
  --shadow-md:   0 4px 16px rgba(0,0,0,.25);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.35);
  --shadow-xl:   0 16px 48px rgba(0,0,0,.45);
  --shadow-glow-tech: 0 0 20px rgba(0,212,255,.25), 0 0 60px rgba(0,212,255,.10);
  --shadow-glow-moda:  0 0 20px rgba(233,69,96,.25), 0 0 60px rgba(233,69,96,.10);
  --shadow-glow-gold:  0 0 20px rgba(212,165,116,.25), 0 0 60px rgba(212,165,116,.10);

  /* ---- Transitions ---- */
  --transition-fast:   all .15s ease;
  --transition-normal: all .3s ease;
  --transition-slow:   all .5s ease;
  --transition-bounce:  all .4s cubic-bezier(.68,-.55,.265,1.55);
  --transition-smooth:  all .3s cubic-bezier(.4,0,.2,1);

  /* ---- Z-Index Scale ---- */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-popover:    500;
  --z-toast:      600;
  --z-tooltip:    700;

  /* ---- Container ---- */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-padding: var(--space-6);
}

/* Store-specific theme overrides */
[data-store="tech"],
.store-tech {
  --color-accent: var(--color-accent-tech);
  --color-accent-dark: var(--color-accent-tech-dark);
  --color-accent-glow: var(--color-accent-tech-glow);
  --gradient-accent: var(--gradient-tech);
  --shadow-glow: var(--shadow-glow-tech);
}

[data-store="moda"],
.store-moda {
  --color-accent: var(--color-accent-moda);
  --color-accent-dark: var(--color-accent-moda-dark);
  --color-accent-glow: var(--color-accent-moda-glow);
  --gradient-accent: var(--gradient-moda);
  --shadow-glow: var(--shadow-glow-moda);
}

/* ============================================================
   3. MODERN CSS RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
  tab-size: 4;
  -moz-tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-primary-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  opacity: 1;
  transition: opacity .3s ease;
}

body.page-entering {
  opacity: 0;
  transform: translateY(8px);
}

body.page-loaded {
  opacity: 1;
  transform: translateY(0);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-normal);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Remove default focus outlines, add custom */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent-tech);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   4. CUSTOM TEXT SELECTION
   ============================================================ */
::selection {
  background-color: rgba(0, 212, 255, .3);
  color: var(--color-text-primary);
}

::-moz-selection {
  background-color: rgba(0, 212, 255, .3);
  color: var(--color-text-primary);
}

.store-moda ::selection {
  background-color: rgba(233, 69, 96, .3);
}

/* ============================================================
   5. CUSTOM SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-primary-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-light);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary-dark);
  transition: var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-surface-lighter);
}

::-webkit-scrollbar-thumb:active {
  background: var(--color-accent-tech);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-light) var(--color-primary-dark);
}

/* ============================================================
   6. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  letter-spacing: -.03em;
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: 500;
}

h6 {
  font-size: var(--font-size-md);
  font-weight: 500;
}

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

p:last-child {
  margin-bottom: 0;
}

small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

strong, b {
  font-weight: 600;
}

.text-gradient {
  background: var(--gradient-tech);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.store-moda .text-gradient {
  background: var(--gradient-moda);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

/* Section title with decorative underline */
.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--gradient-tech);
  border-radius: var(--radius-full);
  transition: width .5s ease;
}

.store-moda .section-title::after {
  background: var(--gradient-moda);
}

.section-title:hover::after,
.section-title.centered::after {
  width: 100%;
}

.section-title.centered {
  display: block;
  text-align: center;
}

.section-title.centered::after {
  left: 50%;
  transform: translateX(-50%);
}

.section-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  max-width: 600px;
  margin: var(--space-4) auto var(--space-12);
  text-align: center;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

/* ============================================================
   7. LAYOUT & CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container-wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container-fluid {
  width: 100%;
  padding-inline: var(--container-padding);
}

.section-padding {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section-padding-sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* ============================================================
   8. ANIMATIONS KEYFRAMES LIBRARY
   ============================================================ */

/* --- Fade In Up --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Fade In Down --- */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Fade In Left --- */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Fade In Right --- */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Fade In (simple) --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Scale In --- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Slide Up --- */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Pulse --- */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --- Float (up and down) --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* --- Glow (border glow) --- */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0,212,255,.2),
                0 0 10px rgba(0,212,255,.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(0,212,255,.4),
                0 0 30px rgba(0,212,255,.2),
                0 0 45px rgba(0,212,255,.1);
  }
}

@keyframes glowModa {
  0%, 100% {
    box-shadow: 0 0 5px rgba(233,69,96,.2),
                0 0 10px rgba(233,69,96,.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(233,69,96,.4),
                0 0 30px rgba(233,69,96,.2),
                0 0 45px rgba(233,69,96,.1);
  }
}

/* --- Shimmer (loading placeholder) --- */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* --- Typing cursor blink --- */
@keyframes typing {
  0%, 100% { border-right-color: transparent; }
  50%      { border-right-color: var(--color-accent-tech); }
}

.store-moda .typing-cursor {
  border-right-color: var(--color-accent-moda);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* --- Bounce In --- */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(.3); }
  50%  { opacity: 1; transform: scale(1.08); }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

/* --- Rotate In --- */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg) scale(.7);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* --- Shake (for errors) --- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* --- Slide In From Right --- */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- Gradient (moving background) --- */
@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Ripple (Material Design) --- */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: .5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- Particle Float --- */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(20px);
    opacity: 0;
  }
}

/* --- Spin --- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Ping --- */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* --- Slide In Up (for cart/panels) --- */
@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Width Grow --- */
@keyframes widthGrow {
  from { width: 0; }
  to   { width: 100%; }
}

/* ============================================================
   9. ANIMATION CLASSES
   ============================================================ */

/* Scroll-triggered animation base state */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}

.animate-on-scroll.visible,
.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-up {
  animation: fadeInUp .7s ease forwards;
}

.fade-in-down {
  animation: fadeInDown .7s ease forwards;
}

.fade-in-left {
  animation: fadeInLeft .7s ease forwards;
}

.fade-in-right {
  animation: fadeInRight .7s ease forwards;
}

.fade-in {
  animation: fadeIn .6s ease forwards;
}

.scale-in {
  animation: scaleIn .5s ease forwards;
}

.bounce-in {
  animation: bounceIn .8s ease forwards;
}

.rotate-in {
  animation: rotateIn .6s ease forwards;
}

.slide-up {
  animation: slideUp .5s ease forwards;
}

/* Stagger delay classes */
.stagger-1 { animation-delay: .1s; }
.stagger-2 { animation-delay: .2s; }
.stagger-3 { animation-delay: .3s; }
.stagger-4 { animation-delay: .4s; }
.stagger-5 { animation-delay: .5s; }
.stagger-6 { animation-delay: .6s; }
.stagger-7 { animation-delay: .7s; }
.stagger-8 { animation-delay: .8s; }

/* Duration classes */
.duration-fast   { animation-duration: .3s; }
.duration-normal { animation-duration: .6s; }
.duration-slow   { animation-duration: 1s; }

/* Float class */
.floating {
  animation: float 3s ease-in-out infinite;
}

/* Pulse class */
.pulsing {
  animation: pulse 2s ease-in-out infinite;
}

/* Glow class */
.glowing {
  animation: glow 2s ease-in-out infinite;
}

.store-moda .glowing {
  animation: glowModa 2s ease-in-out infinite;
}

/* Shake class */
.shaking {
  animation: shake .5s ease-in-out;
}

/* Gradient bg animation */
.gradient-bg {
  background-size: 200% 200%;
  animation: gradient 4s ease infinite;
}

/* ============================================================
   10. UTILITY CLASSES
   ============================================================ */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .6s ease, height .6s ease;
  z-index: 0;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn span,
.btn svg,
.btn i {
  position: relative;
  z-index: 1;
}

.btn-primary {
  background: var(--gradient-tech);
  color: var(--color-text-primary);
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(0,212,255,.25);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,212,255,.4);
  filter: brightness(1.1);
}

.btn-primary:active {
  transform: translateY(-1px);
}

.store-moda .btn-primary {
  background: var(--gradient-moda);
  box-shadow: 0 4px 15px rgba(233,69,96,.25);
}

.store-moda .btn-primary:hover {
  box-shadow: 0 8px 30px rgba(233,69,96,.4);
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
}

.btn-secondary:hover {
  background: var(--color-accent-tech);
  color: var(--color-text-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-tech);
}

.store-moda .btn-secondary {
  color: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
}

.store-moda .btn-secondary:hover {
  background: var(--color-accent-moda);
  box-shadow: var(--shadow-glow-moda);
}

.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-light);
  backdrop-filter: blur(8px);
}

.btn-outline:hover {
  border-color: var(--color-accent-tech);
  color: var(--color-accent-tech);
  background: rgba(0,212,255,.05);
  transform: translateY(-3px);
}

.store-moda .btn-outline:hover {
  border-color: var(--color-accent-moda);
  color: var(--color-accent-moda);
  background: rgba(233,69,96,.05);
}

.btn-white {
  background: var(--color-text-primary);
  color: var(--color-text-dark);
  font-weight: 700;
}

.btn-white:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  filter: brightness(.95);
}

.btn-gold {
  background: var(--gradient-gold);
  color: var(--color-text-dark);
}

.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-gold);
}

.btn-lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--font-size-base);
}

.btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-xs);
}

.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: var(--font-size-lg);
}

.btn-icon.btn-sm {
  width: 36px;
  height: 36px;
  font-size: var(--font-size-sm);
}

.btn-block {
  width: 100%;
}

/* Button loading state */
.btn-loading {
  pointer-events: none;
  opacity: .7;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  z-index: 1;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  left: auto;
}

/* ---- Glassmorphism ---- */
.glass {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
}

.glass-dark {
  background: rgba(10,10,26,.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
}

/* ---- Card ---- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-light);
}

.card:hover::before {
  opacity: 1;
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  line-height: 1.5;
}

.badge-primary {
  background: rgba(0,212,255,.15);
  color: var(--color-accent-tech);
}

.badge-success {
  background: rgba(0,200,83,.15);
  color: var(--color-success);
}

.badge-danger {
  background: rgba(233,69,96,.15);
  color: var(--color-accent-moda);
}

.badge-warning {
  background: rgba(255,171,0,.15);
  color: var(--color-warning);
}

.badge-gold {
  background: rgba(212,165,116,.15);
  color: var(--color-gold);
}

/* ---- Divider ---- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-light), transparent);
  margin: var(--space-8) 0;
  border: none;
}

/* ---- Overlay ---- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: var(--z-overlay);
  pointer-events: none;
}

.overlay-dark {
  background: rgba(0,0,0,.7);
}

.overlay-gradient {
  background: var(--gradient-overlay);
}

/* ---- Misc Utilities ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.relative { position: relative; }
.absolute { position: absolute; }

.overflow-hidden { overflow: hidden; }

/* ============================================================
   11. NAVIGATION
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-4) 0;
  transition: var(--transition-smooth);
  background: transparent;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-scrolled {
  background: rgba(10,10,26,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -.01em;
  transition: var(--transition-normal);
  z-index: 10;
}

.nav-logo:hover {
  transform: scale(1.02);
}

.nav-logo .logo-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: 900;
  font-size: var(--font-size-lg);
}

.store-tech .nav-logo .logo-icon {
  background: var(--gradient-tech);
}

.store-moda .nav-logo .logo-icon {
  background: var(--gradient-moda);
}

.nav-logo .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo .logo-brand {
  font-size: var(--font-size-lg);
  font-weight: 800;
}

.nav-logo .logo-sub {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-2) 0;
  transition: var(--transition-normal);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-tech);
  border-radius: var(--radius-full);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

.store-moda .nav-link::after {
  background: var(--gradient-moda);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-action-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  transition: var(--transition-smooth);
}

.nav-action-btn:hover {
  color: var(--color-text-primary);
  background: rgba(255,255,255,.08);
  transform: scale(1.1);
}

.nav-action-btn .badge-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-tech);
  color: var(--color-text-primary);
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  animation: bounceIn .5s ease;
}

.store-moda .nav-action-btn .badge-count {
  background: var(--color-accent-moda);
}

/* Mobile Menu Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 10;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: var(--radius-full);
  transition: var(--transition-normal);
  transform-origin: center;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Navigation */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10,10,26,.98);
  backdrop-filter: blur(20px);
  z-index: calc(var(--z-sticky) - 1);
  padding: var(--space-24) var(--space-8) var(--space-8);
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

.mobile-nav.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav .nav-link {
  font-size: var(--font-size-xl);
  font-weight: 600;
}

/* ============================================================
   12. SEARCH BAR
   ============================================================ */
.search-container {
  position: relative;
}

.search-toggle {
  cursor: pointer;
}

.search-bar {
  position: absolute;
  top: 100%;
  right: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: width .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  z-index: var(--z-dropdown);
  margin-top: var(--space-3);
}

.search-bar.open {
  width: 320px;
  opacity: 1;
}

.search-bar input {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.search-bar input::placeholder {
  color: var(--color-text-muted);
}

/* Search Results Dropdown */
.search-results {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 400px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  display: none;
}

.search-results.visible {
  display: block;
  animation: fadeInDown .3s ease;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition-fast);
  cursor: pointer;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(255,255,255,.05);
}

.search-result-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ============================================================
   13. HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--space-24);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.store-tech .hero-overlay {
  background: var(--gradient-hero-tech);
}

.store-moda .hero-overlay {
  background: var(--gradient-hero-moda);
}

/* Particle Background */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hero-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat linear infinite;
}

.store-tech .hero-particle {
  background: var(--color-accent-tech);
  box-shadow: 0 0 6px var(--color-accent-tech);
}

.store-moda .hero-particle {
  background: var(--color-accent-moda);
  box-shadow: 0 0 6px var(--color-accent-moda);
}

.hero-particle:nth-child(1)  { left: 10%;  animation-duration: 12s; animation-delay: 0s;    width: 3px; height: 3px; }
.hero-particle:nth-child(2)  { left: 20%;  animation-duration: 15s; animation-delay: 2s;    width: 5px; height: 5px; }
.hero-particle:nth-child(3)  { left: 30%;  animation-duration: 10s; animation-delay: 4s;    width: 2px; height: 2px; }
.hero-particle:nth-child(4)  { left: 40%;  animation-duration: 14s; animation-delay: 1s;    width: 4px; height: 4px; }
.hero-particle:nth-child(5)  { left: 50%;  animation-duration: 18s; animation-delay: 3s;    width: 3px; height: 3px; }
.hero-particle:nth-child(6)  { left: 60%;  animation-duration: 11s; animation-delay: 5s;    width: 6px; height: 6px; }
.hero-particle:nth-child(7)  { left: 70%;  animation-duration: 16s; animation-delay: 0.5s;  width: 2px; height: 2px; }
.hero-particle:nth-child(8)  { left: 80%;  animation-duration: 13s; animation-delay: 2.5s;  width: 4px; height: 4px; }
.hero-particle:nth-child(9)  { left: 90%;  animation-duration: 17s; animation-delay: 1.5s;  width: 3px; height: 3px; }
.hero-particle:nth-child(10) { left: 5%;   animation-duration: 19s; animation-delay: 6s;    width: 5px; height: 5px; }
.hero-particle:nth-child(11) { left: 15%;  animation-duration: 9s;  animation-delay: 3.5s;  width: 2px; height: 2px; }
.hero-particle:nth-child(12) { left: 45%;  animation-duration: 20s; animation-delay: 4.5s;  width: 3px; height: 3px; }
.hero-particle:nth-child(13) { left: 65%;  animation-duration: 8s;  animation-delay: 0.8s;  width: 4px; height: 4px; }
.hero-particle:nth-child(14) { left: 85%;  animation-duration: 22s; animation-delay: 2.8s;  width: 2px; height: 2px; }
.hero-particle:nth-child(15) { left: 55%;  animation-duration: 11s; animation-delay: 5.5s;  width: 5px; height: 5px; }

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  padding: var(--space-8);
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  animation: fadeInDown .8s ease forwards;
}

.hero-label .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.store-tech .hero-label .dot {
  background: var(--color-accent-tech);
  box-shadow: 0 0 8px var(--color-accent-tech);
}

.store-moda .hero-label .dot {
  background: var(--color-accent-moda);
  box-shadow: 0 0 8px var(--color-accent-moda);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-hero);
  font-weight: 900;
  line-height: var(--line-height-tight);
  letter-spacing: -.03em;
  margin-bottom: var(--space-6);
  animation: fadeInUp 1s ease forwards;
  animation-delay: .2s;
  opacity: 0;
}

.hero-title .highlight {
  position: relative;
}

.store-tech .hero-title .highlight {
  color: var(--color-accent-tech);
  text-shadow: 0 0 40px rgba(0,212,255,.3);
}

.store-moda .hero-title .highlight {
  color: var(--color-accent-moda);
  text-shadow: 0 0 40px rgba(233,69,96,.3);
}

/* Typing Effect */
.hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
  animation: fadeInUp 1s ease forwards;
  animation-delay: .4s;
  opacity: 0;
}

.hero-subtitle .typing-text {
  border-right: 2px solid var(--color-accent-tech);
  padding-right: 4px;
  animation: typing .8s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
}

.store-moda .hero-subtitle .typing-text {
  border-right-color: var(--color-accent-moda);
}

/* Hero CTA */
.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  animation: fadeInUp 1s ease forwards;
  animation-delay: .6s;
  opacity: 0;
}

/* Hero CTA glow effect */
.hero-cta .btn-primary {
  animation: glow 3s ease-in-out infinite;
}

.store-moda .hero-cta .btn-primary {
  animation: glowModa 3s ease-in-out infinite;
}

/* Hero Scroll Indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  animation: fadeIn 1s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;
  cursor: pointer;
  transition: var(--transition-normal);
}

.hero-scroll-indicator:hover {
  color: var(--color-text-secondary);
}

.hero-scroll-indicator .mouse {
  width: 24px;
  height: 38px;
  border: 2px solid var(--color-text-muted);
  border-radius: 12px;
  position: relative;
}

.hero-scroll-indicator .mouse::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: var(--color-accent-tech);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  animation: float 1.5s ease-in-out infinite;
}

.store-moda .hero-scroll-indicator .mouse::before {
  background: var(--color-accent-moda);
}

/* Hero decorative elements */
.hero-decoration {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.hero-decoration.circle-1 {
  width: 400px;
  height: 400px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 50%;
  top: 10%;
  right: -100px;
  animation: float 6s ease-in-out infinite;
}

.hero-decoration.circle-2 {
  width: 250px;
  height: 250px;
  border: 1px solid rgba(255,255,255,.03);
  border-radius: 50%;
  bottom: 20%;
  left: -80px;
  animation: float 8s ease-in-out infinite reverse;
}

/* ============================================================
   14. STORE CARDS (Main Page Selection)
   ============================================================ */
.stores-section {
  position: relative;
  padding: var(--space-24) 0;
}

.stores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  max-width: 1000px;
  margin: 0 auto;
}

.store-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 420px;
  cursor: pointer;
  transition: var(--transition-slow);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.store-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-10);
  transition: var(--transition-slow);
  transform: translateZ(0);
}

.store-card:hover {
  transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
  box-shadow: var(--shadow-xl);
}

.store-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.store-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.4,0,.2,1), filter .5s ease;
}

.store-card:hover .store-card-bg img {
  transform: scale(1.1);
  filter: brightness(0.7);
}

.store-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: var(--transition-slow);
}

.store-tech .store-card-overlay {
  background: linear-gradient(180deg, rgba(0,212,255,.05) 0%, rgba(10,10,26,.9) 100%);
}

.store-moda .store-card-overlay {
  background: linear-gradient(180deg, rgba(233,69,96,.05) 0%, rgba(10,10,26,.9) 100%);
}

.store-card-content {
  position: relative;
  z-index: 2;
  transition: var(--transition-normal);
}

.store-card:hover .store-card-content {
  transform: translateY(-10px);
}

.store-card-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
  transition: var(--transition-normal);
}

.store-tech .store-card-icon {
  background: rgba(0,212,255,.15);
  color: var(--color-accent-tech);
  border: 1px solid rgba(0,212,255,.2);
}

.store-moda .store-card-icon {
  background: rgba(233,69,96,.15);
  color: var(--color-accent-moda);
  border: 1px solid rgba(233,69,96,.2);
}

.store-card:hover .store-card-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: var(--shadow-glow-tech);
}

.store-moda .store-card:hover .store-card-icon {
  box-shadow: var(--shadow-glow-moda);
}

.store-card h3 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.store-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  max-width: 300px;
  margin-bottom: var(--space-5);
}

.store-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  transition: var(--transition-normal);
}

.store-tech .store-card-cta {
  color: var(--color-accent-tech);
}

.store-moda .store-card-cta {
  color: var(--color-accent-moda);
}

.store-card-cta .arrow {
  transition: transform .3s ease;
}

.store-card:hover .store-card-cta .arrow {
  transform: translateX(6px);
}

/* Decorative border glow on store cards */
.store-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 2px;
  background: linear-gradient(135deg, transparent 30%, rgba(0,212,255,.3) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 3;
  pointer-events: none;
}

.store-tech .store-card:hover::after {
  opacity: 1;
  background: linear-gradient(135deg, transparent 30%, rgba(0,212,255,.4) 50%, transparent 70%);
}

.store-moda .store-card:hover::after {
  opacity: 1;
  background: linear-gradient(135deg, transparent 30%, rgba(233,69,96,.4) 50%, transparent 70%);
}

/* ============================================================
   15. CATEGORY CARDS
   ============================================================ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-smooth);
  overflow: hidden;
  text-align: center;
}

.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}

.store-tech .category-card::before {
  background: linear-gradient(135deg, rgba(0,212,255,.08) 0%, transparent 100%);
}

.store-moda .category-card::before {
  background: linear-gradient(135deg, rgba(233,69,96,.08) 0%, transparent 100%);
}

.category-card:hover::before {
  opacity: 1;
}

.category-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-light);
}

.category-card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
  transition: var(--transition-bounce);
  position: relative;
  z-index: 1;
}

.store-tech .category-card-icon {
  background: rgba(0,212,255,.1);
  color: var(--color-accent-tech);
}

.store-moda .category-card-icon {
  background: rgba(233,69,96,.1);
  color: var(--color-accent-moda);
}

.category-card:hover .category-card-icon {
  transform: scale(1.15) rotate(-5deg);
}

.category-card h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
  position: relative;
  z-index: 1;
}

.category-card span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}

/* ============================================================
   16. PRODUCT CARDS
   ============================================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.product-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-light);
}

/* Product Image */
.product-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.product-card:hover .product-card-image img {
  transform: scale(1.08);
}

/* Product Badges */
.product-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--radius-sm);
}

.product-badge.discount {
  background: var(--color-accent-moda);
  color: var(--color-text-primary);
  animation: pulse 2s ease-in-out infinite;
}

.product-badge.new {
  background: var(--color-accent-tech);
  color: var(--color-text-primary);
}

.product-badge.hot {
  background: var(--color-warning);
  color: var(--color-text-dark);
}

.product-badge.sold-out {
  background: rgba(255,255,255,.15);
  color: var(--color-text-muted);
}

/* Wishlist Button */
.product-wishlist {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  z-index: 2;
  transition: var(--transition-smooth);
  opacity: 0;
  transform: translateY(-8px);
}

.product-card:hover .product-wishlist {
  opacity: 1;
  transform: translateY(0);
}

.product-wishlist:hover {
  background: var(--color-accent-moda);
  color: var(--color-text-primary);
  transform: scale(1.15) !important;
}

.product-wishlist.active {
  background: var(--color-accent-moda);
  color: var(--color-text-primary);
  opacity: 1;
  transform: translateY(0);
}

/* Quick Actions (slide up on hover) */
.product-quick-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  z-index: 2;
  transform: translateY(100%);
  opacity: 0;
  transition: var(--transition-smooth);
}

.product-card:hover .product-quick-actions {
  transform: translateY(0);
  opacity: 1;
}

.product-quick-actions .btn {
  padding: var(--space-2) var(--space-5);
  font-size: 11px;
  border-radius: var(--radius-full);
  background: rgba(10,10,26,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--color-text-primary);
}

.product-quick-actions .btn:hover {
  background: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
}

.store-moda .product-quick-actions .btn:hover {
  background: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
}

/* Product Info */
.product-card-info {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.product-card-brand {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.product-card-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  transition: var(--transition-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card:hover .product-card-name {
  color: var(--color-accent-tech);
}

.store-moda .product-card:hover .product-card-name {
  color: var(--color-accent-moda);
}

/* Star Rating */
.product-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.product-rating .stars {
  display: flex;
  gap: 1px;
  color: var(--color-warning);
  font-size: var(--font-size-xs);
}

.product-rating .stars .empty {
  color: var(--color-surface-lighter);
}

.product-rating .count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Price */
.product-price {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.product-price .current {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}

.product-price .old {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-price .discount-percent {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent-moda);
}

/* Out of stock overlay */
.product-card.out-of-stock .product-card-image::after {
  content: 'Agotado';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,26,.7);
  backdrop-filter: blur(3px);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
  z-index: 3;
}

/* ============================================================
   17. FEATURED PRODUCTS SECTION
   ============================================================ */
.featured-section {
  position: relative;
  overflow: hidden;
}

.featured-products-scroll {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-4);
  scrollbar-width: none;
}

.featured-products-scroll::-webkit-scrollbar {
  display: none;
}

.featured-products-scroll .product-card {
  min-width: 280px;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ============================================================
   18. SLIDER / BANNER
   ============================================================ */
.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.slider-track {
  display: flex;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.slider-track.fade-mode {
  transition: opacity .6s ease;
}

.slider-slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 21/9;
}

.slider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16);
  background: linear-gradient(90deg, rgba(10,10,26,.85) 0%, rgba(10,10,26,.4) 50%, transparent 100%);
}

.slider-caption h2 {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  max-width: 500px;
  animation: fadeInUp .8s ease forwards;
}

.slider-caption p {
  font-size: var(--font-size-base);
  max-width: 450px;
  margin: var(--space-3) 0 var(--space-6);
  animation: fadeInUp .8s ease forwards;
  animation-delay: .2s;
  opacity: 0;
}

.slider-caption .btn {
  animation: fadeInUp .8s ease forwards;
  animation-delay: .4s;
  opacity: 0;
}

/* Slider Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  z-index: 5;
  transition: var(--transition-smooth);
}

.slider-arrow:hover {
  background: rgba(255,255,255,.2);
  transform: translateY(-50%) scale(1.1);
}

.slider-arrow.prev { left: var(--space-4); }
.slider-arrow.next { right: var(--space-4); }

/* Slider Dots */
.slider-dots {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 5;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.slider-dot.active {
  background: var(--color-accent-tech);
  width: 28px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px rgba(0,212,255,.4);
}

.store-moda .slider-dot.active {
  background: var(--color-accent-moda);
  box-shadow: 0 0 10px rgba(233,69,96,.4);
}

.slider-dot:hover {
  background: rgba(255,255,255,.5);
}

/* ============================================================
   19. PRODUCT DETAIL PAGE
   ============================================================ */
.product-detail {
  padding-top: var(--space-24);
}

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Image Gallery */
.product-gallery {
  position: sticky;
  top: 120px;
}

.product-gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  cursor: zoom-in;
  margin-bottom: var(--space-4);
}

.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.product-gallery-main:hover img {
  transform: scale(1.5);
}

.product-gallery-thumbs {
  display: flex;
  gap: var(--space-3);
}

.product-gallery-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
  opacity: .5;
}

.product-gallery-thumb:hover,
.product-gallery-thumb.active {
  border-color: var(--color-accent-tech);
  opacity: 1;
}

.store-moda .product-gallery-thumb:hover,
.store-moda .product-gallery-thumb.active {
  border-color: var(--color-accent-moda);
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Info */
.product-detail-info {
  padding-top: var(--space-4);
}

.product-detail-brand {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.product-detail-name {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
}

.product-detail-rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.product-detail-rating .stars {
  display: flex;
  gap: 2px;
  color: var(--color-warning);
  font-size: var(--font-size-base);
}

.product-detail-rating .stars .empty {
  color: var(--color-surface-lighter);
}

.product-detail-rating .text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.product-detail-rating .text a {
  color: var(--color-accent-tech);
  text-decoration: underline;
}

.store-moda .product-detail-rating .text a {
  color: var(--color-accent-moda);
}

/* Detail Price */
.product-detail-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.product-detail-price .current {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: 800;
}

.product-detail-price .old {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-detail-price .discount {
  padding: var(--space-1) var(--space-3);
  background: rgba(233,69,96,.15);
  color: var(--color-accent-moda);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.product-detail-description {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

/* Variant Selectors */
.product-variants {
  margin-bottom: var(--space-8);
}

.product-variant-group {
  margin-bottom: var(--space-5);
}

.product-variant-label {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.product-variant-label span {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Color Swatches */
.color-swatches {
  display: flex;
  gap: var(--space-2);
}

.color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: var(--transition-smooth);
  position: relative;
}

.color-swatch:hover {
  transform: scale(1.15);
}

.color-swatch.active {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 2px var(--color-primary-dark), 0 0 0 4px currentColor;
}

.color-swatch::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: inherit;
}

/* Size Buttons */
.size-options {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.size-btn {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.size-btn:hover {
  border-color: var(--color-accent-tech);
  color: var(--color-text-primary);
}

.store-moda .size-btn:hover {
  border-color: var(--color-accent-moda);
}

.size-btn.active {
  background: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
  color: var(--color-text-primary);
  font-weight: 700;
}

.store-moda .size-btn.active {
  background: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
}

.size-btn.unavailable {
  opacity: .3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Quantity Selector */
.quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.quantity-selector button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  transition: var(--transition-fast);
  cursor: pointer;
}

.quantity-selector button:hover {
  background: var(--color-surface-light);
  color: var(--color-text-primary);
}

.quantity-selector input {
  width: 60px;
  height: 44px;
  text-align: center;
  background: var(--color-card);
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-weight: 600;
}

.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add to Cart & Actions */
.product-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.product-actions .btn-add-cart {
  flex: 1;
  padding: var(--space-4) var(--space-8);
}

.product-actions .btn-wishlist {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.product-actions .btn-wishlist:hover {
  border-color: var(--color-accent-moda);
  color: var(--color-accent-moda);
}

/* Sticky Add to Cart Bar */
.sticky-add-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(10,10,26,.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  z-index: var(--z-sticky);
  transform: translateY(100%);
  transition: transform .4s ease;
}

.sticky-add-cart.visible {
  transform: translateY(0);
}

.sticky-add-cart .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Tabbed Content */
.product-tabs {
  margin-top: var(--space-12);
}

.product-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.product-tab-btn {
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--transition-normal);
  margin-bottom: -1px;
}

.product-tab-btn:hover {
  color: var(--color-text-primary);
}

.product-tab-btn.active {
  color: var(--color-accent-tech);
  border-bottom-color: var(--color-accent-tech);
}

.store-moda .product-tab-btn.active {
  color: var(--color-accent-moda);
  border-bottom-color: var(--color-accent-moda);
}

.product-tab-content {
  display: none;
  animation: fadeInUp .4s ease;
}

.product-tab-content.active {
  display: block;
}

/* Related Products Carousel */
.related-products {
  margin-top: var(--space-20);
}

.related-products-scroll {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-4);
  scrollbar-width: none;
}

.related-products-scroll::-webkit-scrollbar {
  display: none;
}

.related-products-scroll .product-card {
  min-width: 250px;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ============================================================
   20. SHOPPING CART
   ============================================================ */
.cart-section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-20);
}

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

/* Cart Items */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cart-item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: var(--transition-smooth);
  animation: fadeInUp .4s ease;
  position: relative;
  overflow: hidden;
}

.cart-item:hover {
  border-color: var(--color-border-light);
}

.cart-item.removing {
  animation: slideInFromRight .3s ease reverse forwards;
  opacity: 0;
  transform: translateX(100%);
}

.cart-item-image {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface);
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-item-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.cart-item-variant {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
}

.cart-item-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-md);
}

/* Cart Remove Button */
.cart-item-remove {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  transition: var(--transition-smooth);
}

.cart-item-remove:hover {
  background: rgba(233,69,96,.15);
  color: var(--color-accent-moda);
  transform: rotate(90deg) scale(1.1);
}

/* Cart Summary */
.cart-summary {
  position: sticky;
  top: 120px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.cart-summary-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
}

.cart-summary-row .label {
  color: var(--color-text-muted);
}

.cart-summary-row .value {
  font-weight: 600;
}

.cart-summary-row.total {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-lg);
}

.cart-summary-row.total .label {
  font-weight: 700;
  color: var(--color-text-primary);
}

.cart-summary-row.total .value {
  font-weight: 800;
  font-size: var(--font-size-xl);
}

.cart-summary .btn {
  margin-top: var(--space-6);
  width: 100%;
}

/* Checkout Progress Steps */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-12);
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.checkout-step-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  transition: var(--transition-smooth);
}

.checkout-step.active .checkout-step-number {
  background: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-glow-tech);
}

.store-moda .checkout-step.active .checkout-step-number {
  background: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
  box-shadow: var(--shadow-glow-moda);
}

.checkout-step.completed .checkout-step-number {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-text-primary);
}

.checkout-step-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.checkout-step.active .checkout-step-label {
  color: var(--color-text-primary);
}

.checkout-step-connector {
  width: 60px;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--space-3);
}

.checkout-step-connector.active {
  background: var(--color-accent-tech);
}

.store-moda .checkout-step-connector.active {
  background: var(--color-accent-moda);
}

/* ============================================================
   21. FORMS & INPUTS (Checkout, Contact)
   ============================================================ */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--color-accent-moda);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  transition: var(--transition-smooth);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:hover {
  border-color: var(--color-border-light);
}

.form-input:focus {
  border-color: var(--color-accent-tech);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
  background: var(--color-surface-light);
}

.store-moda .form-input:focus {
  border-color: var(--color-accent-moda);
  box-shadow: 0 0 0 3px rgba(233,69,96,.1);
}

.form-input.error {
  border-color: var(--color-danger);
  animation: shake .5s ease;
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
  display: none;
}

.form-input.error + .form-error {
  display: block;
  animation: fadeInUp .3s ease;
}

.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  appearance: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23b0b0c0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form-select:focus {
  border-color: var(--color-accent-tech);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}

.form-textarea {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  resize: vertical;
  min-height: 120px;
  transition: var(--transition-smooth);
}

.form-textarea:focus {
  border-color: var(--color-accent-tech);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  flex-shrink: 0;
}

.form-checkbox input[type="checkbox"]:checked {
  background: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
}

.form-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 700;
}

.store-moda .form-checkbox input[type="checkbox"]:checked {
  background: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
}

/* ============================================================
   22. FOOTER
   ============================================================ */
.footer {
  background: var(--color-secondary);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-tech), transparent);
  opacity: .3;
}

.store-moda .footer::before {
  background: linear-gradient(90deg, transparent, var(--color-accent-moda), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-brand {
  max-width: 320px;
}

.footer-brand .nav-logo {
  margin-bottom: var(--space-5);
}

.footer-brand p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

/* Footer Social Icons */
.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social-link {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  transition: var(--transition-smooth);
}

.footer-social-link:hover {
  transform: translateY(-4px) scale(1.1);
  color: var(--color-text-primary);
}

.store-tech .footer-social-link:hover {
  background: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
  box-shadow: var(--shadow-glow-tech);
}

.store-moda .footer-social-link:hover {
  background: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
  box-shadow: var(--shadow-glow-moda);
}

/* Footer Columns */
.footer-column h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-link {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-link:hover {
  color: var(--color-text-primary);
  transform: translateX(4px);
}

.store-tech .footer-link:hover {
  color: var(--color-accent-tech);
}

.store-moda .footer-link:hover {
  color: var(--color-accent-moda);
}

/* Footer Bottom */
.footer-bottom {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-bottom p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-6);
}

.footer-bottom-links a {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: var(--transition-normal);
}

.footer-bottom-links a:hover {
  color: var(--color-text-primary);
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition-smooth);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
  color: var(--color-text-primary);
}

.store-tech .back-to-top:hover {
  background: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
  box-shadow: var(--shadow-glow-tech);
}

.store-moda .back-to-top:hover {
  background: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
  box-shadow: var(--shadow-glow-moda);
}

/* ============================================================
   23. LOADING STATES
   ============================================================ */

/* Skeleton Loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface) !important;
  border-radius: var(--radius-md);
  color: transparent !important;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.04) 50%,
    transparent 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

.skeleton-text {
  height: 16px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-title {
  height: 24px;
  margin-bottom: var(--space-4);
  width: 80%;
  border-radius: var(--radius-sm);
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
}

.skeleton-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.skeleton-card .skeleton-image {
  border-radius: 0;
}

.skeleton-card .skeleton-body {
  padding: var(--space-5);
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent-tech);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.store-moda .spinner {
  border-top-color: var(--color-accent-moda);
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 56px;
  height: 56px;
  border-width: 4px;
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,26,.8);
  backdrop-filter: blur(8px);
  z-index: var(--z-modal);
}

/* ============================================================
   24. TOAST / NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  top: var(--space-8);
  right: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: var(--z-toast);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  animation: slideInFromRight .4s ease, fadeIn .3s ease;
  backdrop-filter: blur(20px);
}

.toast.success { border-left: 4px solid var(--color-success); }
.toast.error   { border-left: 4px solid var(--color-danger); }
.toast.warning { border-left: 4px solid var(--color-warning); }
.toast.info    { border-left: 4px solid var(--color-info); }

.toast.removing {
  animation: slideInFromRight .3s ease reverse forwards;
  opacity: 0;
}

.toast-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.toast.success .toast-icon { color: var(--color-success); }
.toast.error .toast-icon   { color: var(--color-danger); }
.toast.warning .toast-icon { color: var(--color-warning); }
.toast.info .toast-icon    { color: var(--color-info); }

.toast-message {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.toast-close {
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: var(--font-size-lg);
}

.toast-close:hover {
  color: var(--color-text-primary);
}

/* ============================================================
   25. MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  transform: scale(.9) translateY(20px);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-xl);
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
  font-size: var(--font-size-lg);
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: var(--transition-smooth);
}

.modal-close:hover {
  background: rgba(255,255,255,.08);
  color: var(--color-text-primary);
  transform: rotate(90deg);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ============================================================
   26. BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: var(--transition-normal);
}

.breadcrumb a:hover {
  color: var(--color-accent-tech);
}

.store-moda .breadcrumb a:hover {
  color: var(--color-accent-moda);
}

.breadcrumb .separator {
  font-size: var(--font-size-xs);
}

.breadcrumb .current {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* ============================================================
   27. PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}

.pagination-btn {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.pagination-btn:hover {
  border-color: var(--color-accent-tech);
  color: var(--color-text-primary);
  transform: translateY(-2px);
}

.store-moda .pagination-btn:hover {
  border-color: var(--color-accent-moda);
}

.pagination-btn.active {
  background: var(--color-accent-tech);
  border-color: var(--color-accent-tech);
  color: var(--color-text-primary);
}

.store-moda .pagination-btn.active {
  background: var(--color-accent-moda);
  border-color: var(--color-accent-moda);
}

.pagination-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   28. EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: var(--space-6);
  opacity: .3;
  animation: float 3s ease-in-out infinite;
}

.empty-state h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
}

.empty-state p {
  color: var(--color-text-muted);
  max-width: 400px;
  margin: 0 auto var(--space-6);
}

/* ============================================================
   29. NOTIFICATION DOT
   ============================================================ */
.notification-dot {
  position: relative;
}

.notification-dot::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: var(--color-accent-moda);
  border-radius: 50%;
  border: 2px solid var(--color-primary-dark);
}

.notification-dot::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: var(--color-accent-moda);
  border-radius: 50%;
  animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}

/* ============================================================
   30. MARQUEE / TICKER
   ============================================================ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-3) 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.marquee-content {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-10);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.marquee-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-tech);
}

.store-moda .marquee-item .dot {
  background: var(--color-accent-moda);
}

/* ============================================================
   31. COUNTER / STATS
   ============================================================ */
.stats-section {
  padding: var(--space-16) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}

.stat-item {
  padding: var(--space-8);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: 900;
  margin-bottom: var(--space-2);
}

.store-tech .stat-number {
  color: var(--color-accent-tech);
}

.store-moda .stat-number {
  color: var(--color-accent-moda);
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

/* ============================================================
   32. TESTIMONIAL / REVIEW
   ============================================================ */
.testimonial-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: var(--transition-smooth);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-light);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.testimonial-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  margin-bottom: var(--space-6);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.testimonial-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   33. NEWSLETTER
   ============================================================ */
.newsletter-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-16) 0;
}

.newsletter-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-content h3 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-3);
}

.newsletter-content p {
  margin-bottom: var(--space-6);
}

.newsletter-form {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.newsletter-form input::placeholder {
  color: var(--color-text-muted);
}

.newsletter-form input:focus {
  border-color: var(--color-accent-tech);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}

.store-moda .newsletter-form input:focus {
  border-color: var(--color-accent-moda);
  box-shadow: 0 0 0 3px rgba(233,69,96,.1);
}

/* ============================================================
   34. PROMO BANNER (Inline)
   ============================================================ */
.promo-banner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  margin: var(--space-12) 0;
}

.store-tech .promo-banner {
  background: linear-gradient(135deg, rgba(0,212,255,.1) 0%, rgba(0,102,255,.1) 100%);
  border: 1px solid rgba(0,212,255,.15);
}

.store-moda .promo-banner {
  background: linear-gradient(135deg, rgba(233,69,96,.1) 0%, rgba(255,107,129,.1) 100%);
  border: 1px solid rgba(233,69,96,.15);
}

.promo-banner-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.promo-banner-content h3 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.promo-banner-content p {
  max-width: 400px;
}

.promo-banner-image {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.promo-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ============================================================
   35. PAGE TRANSITIONS
   ============================================================ */
.page-wrapper {
  transition: opacity .3s ease, transform .3s ease;
}

.page-wrapper.transitioning {
  opacity: 0;
  transform: translateY(12px);
}

/* ============================================================
   36. RESPONSIVE DESIGN
   ============================================================ */

/* ---- Extra Small (0 - 575px) ---- */
@media (max-width: 575.98px) {
  :root {
    --font-size-hero: 2.5rem;
    --font-size-4xl:  2rem;
    --font-size-3xl:  1.75rem;
    --font-size-2xl:  1.5rem;
    --container-padding: var(--space-4);
  }

  .container {
    padding-inline: var(--space-4);
  }

  .section-padding {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  /* Nav */
  .nav-links,
  .nav-actions .nav-action-btn:not(.nav-cart-btn) {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }

  /* Hero */
  .hero {
    min-height: 90vh;
    padding-top: var(--space-20);
  }

  .hero-content {
    padding: var(--space-4);
  }

  .hero-cta {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero-cta .btn {
    width: 100%;
  }

  .hero-scroll-indicator {
    display: none;
  }

  /* Grids */
  .stores-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Product Detail */
  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-gallery {
    position: relative;
    top: auto;
  }

  .product-actions {
    flex-direction: column;
  }

  /* Cart */
  .cart-grid {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: relative;
    top: auto;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Checkout steps */
  .checkout-steps {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .checkout-step-label {
    display: none;
  }

  .checkout-step-connector {
    width: 30px;
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
  }

  /* Promo Banner */
  .promo-banner {
    flex-direction: column;
    padding: var(--space-6);
    text-align: center;
  }

  .promo-banner-image {
    width: 150px;
    height: 150px;
  }

  /* Toast */
  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
  }

  .toast {
    min-width: auto;
  }

  /* Back to Top */
  .back-to-top {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
  }

  /* Slider */
  .slider-slide {
    aspect-ratio: 16/9;
  }

  .slider-caption {
    padding: var(--space-6);
  }

  .slider-caption h2 {
    font-size: var(--font-size-xl);
  }

  .slider-arrow {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }

  /* Pagination */
  .pagination {
    gap: var(--space-1);
  }

  .pagination-btn {
    min-width: 38px;
    height: 38px;
    font-size: var(--font-size-xs);
  }
}

/* ---- Small (576px - 767px) ---- */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    --font-size-hero: 3rem;
    --font-size-4xl:  2.25rem;
    --font-size-3xl:  2rem;
    --container-padding: var(--space-5);
  }

  .nav-links,
  .nav-actions .nav-action-btn:not(.nav-cart-btn) {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .cart-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

/* ---- Medium (768px - 991px) ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --font-size-hero: 3.5rem;
    --font-size-4xl:  2.75rem;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .product-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}

/* ---- Large (992px - 1199px) ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --font-size-hero: 4rem;
    --font-size-4xl:  3rem;
  }

  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Extra Large (1200px+) ---- */
@media (min-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Hover media query (devices that support hover) ---- */
@media (hover: hover) {
  .product-quick-actions {
    transform: translateY(100%);
    opacity: 0;
  }

  .product-wishlist {
    opacity: 0;
    transform: translateY(-8px);
  }

  .product-card:hover .product-quick-actions {
    transform: translateY(0);
    opacity: 1;
  }

  .product-card:hover .product-wishlist {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Touch devices (no hover support) ---- */
@media (hover: none) and (pointer: coarse) {
  .product-quick-actions {
    transform: translateY(0);
    opacity: 1;
    background: linear-gradient(transparent, rgba(10,10,26,.85));
    padding-top: var(--space-12);
  }

  .product-wishlist {
    opacity: 1;
    transform: translateY(0);
  }

  .product-card:hover .product-card-image img {
    transform: scale(1);
  }

  .store-card:hover .store-card-bg img {
    transform: scale(1);
  }
}

/* ============================================================
   37. PRINT STYLES
   ============================================================ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a, a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
  }

  img {
    page-break-inside: avoid;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  .navbar,
  .footer,
  .back-to-top,
  .hero-particles,
  .toast-container {
    display: none !important;
  }
}

/* ============================================================
   38. DARK MODE OVERRIDES (if light mode ever needed)
   ============================================================ */
[data-theme="light"] {
  --color-primary-dark:    #f5f5f7;
  --color-secondary:       #e8e8ed;
  --color-tertiary:         #f0f0f5;
  --color-text-primary:     #1a1a2e;
  --color-text-secondary:   #555570;
  --color-text-muted:       #888898;
  --color-card:             #ffffff;
  --color-card-hover:       #f8f8fc;
  --color-surface:          #f0f0f5;
  --color-surface-light:    #e8e8ed;
  --color-surface-lighter:  #dddde5;
  --color-border:           rgba(0,0,0,.08);
  --color-border-light:     rgba(0,0,0,.15);
}

/* ============================================================
   39. ACCESSIBILITY
   ============================================================ */
/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent-tech);
  outline-offset: 3px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-border:       rgba(255,255,255,.2);
    --color-border-light: rgba(255,255,255,.35);
  }

  .btn {
    border-width: 3px;
  }
}

/* ============================================================
   40. ADDITIONAL MICRO-INTERACTIONS
   ============================================================ */

/* Ripple effect for buttons */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  animation: ripple .6s ease-out forwards;
  pointer-events: none;
}

/* Gradient border animation */
.gradient-border {
  position: relative;
  border: none;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(
    135deg,
    var(--color-accent-tech),
    var(--color-accent-moda),
    var(--color-gold),
    var(--color-accent-tech)
  );
  background-size: 300% 300%;
  animation: gradient 4s ease infinite;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Tilt effect utility */
.tilt {
  transform-style: preserve-3d;
  transition: transform .3s ease;
}

/* Magnetic hover effect placeholder */
.magnetic {
  transition: transform .3s ease;
}

/* Image reveal */
.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary-dark);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .8s cubic-bezier(.77,0,.175,1);
}

.image-reveal.revealed::after {
  transform: scaleX(0);
}

/* ============================================================
   41. SPECIAL EFFECTS
   ============================================================ */

/* Neon text */
.neon-text {
  text-shadow:
    0 0 7px rgba(0,212,255,.5),
    0 0 10px rgba(0,212,255,.3),
    0 0 21px rgba(0,212,255,.3),
    0 0 42px rgba(0,212,255,.2);
}

.store-moda .neon-text {
  text-shadow:
    0 0 7px rgba(233,69,96,.5),
    0 0 10px rgba(233,69,96,.3),
    0 0 21px rgba(233,69,96,.3),
    0 0 42px rgba(233,69,96,.2);
}

/* Glassmorphism card with blur */
.glass-card {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Noise texture overlay (subtle) */
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Animated gradient border box */
.animated-border {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 2px;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--angle, 0deg), var(--color-accent-tech), var(--color-accent-moda), var(--color-gold), var(--color-accent-tech));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotateBorder 4s linear infinite;
}

@keyframes rotateBorder {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Parallax layers */
.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  will-change: transform;
}

/* ============================================================
   42. COMPONENT STATES
   ============================================================ */

/* Disabled state */
.disabled,
[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Active / Pressed state */
.btn:active:not(.btn-loading) {
  transform: translateY(-1px) scale(.98);
}

/* Hover card shine effect */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    transparent 40%,
    rgba(255,255,255,.03) 45%,
    rgba(255,255,255,.05) 50%,
    rgba(255,255,255,.03) 55%,
    transparent 60%
  );
  transform: rotate(45deg) translateX(-100%);
  transition: transform .6s ease;
}

.card-shine:hover::after {
  transform: rotate(45deg) translateX(100%);
}

/* Drag handle */
.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* ============================================================
   END OF STYLESHEET
   ============================================================ */

/* ============================================================
   99. HOSTING COMPARTIDO - PARCHE VISUAL DE COMPATIBILIDAD
   Corrige clases usadas por las vistas públicas actuales.
   ============================================================ */
:root {
  --color-accent: var(--color-accent-tech);
  --gradient-accent: var(--gradient-tech);
  --shadow-glow: var(--shadow-glow-tech);
}

.public-layout {
  background:
    radial-gradient(circle at 15% 5%, rgba(0,212,255,.13), transparent 34%),
    radial-gradient(circle at 85% 18%, rgba(233,69,96,.10), transparent 32%),
    linear-gradient(180deg, #070716 0%, #0d0d22 46%, #090918 100%);
}

.public-layout #mainContent {
  min-height: 60vh;
  overflow: hidden;
}

.container {
  width: min(100% - 32px, var(--container-wide));
  margin-inline: auto;
}

/* Botones compatibles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .78rem 1.25rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #fff;
  background: var(--gradient-tech);
  box-shadow: 0 10px 28px rgba(0, 153, 255, .22);
}
.btn-primary:hover { box-shadow: 0 14px 38px rgba(0, 153, 255, .35); }
.btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.btn-outline:hover { border-color: rgba(0,212,255,.5); background: rgba(0,212,255,.08); }
.btn-lg { min-height: 52px; padding: .95rem 1.75rem; font-size: .92rem; }
.btn-sm { min-height: 36px; padding: .55rem .9rem; font-size: .76rem; }
.btn-danger { background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark)); color:#fff; }

/* Navbar real usada por layouts/app.php y layouts/store.php */
.navbar-fixed { position: fixed; }
.navbar-transparent { background: rgba(7,7,22,.18); }
.navbar-solid,
.navbar.navbar-scrolled {
  background: rgba(7,7,22,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}
.navbar-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: max-content;
  font-family: var(--font-heading);
  font-weight: 900;
  color: #fff;
  letter-spacing: .05em;
}
.navbar-logo { max-height: 46px; max-width: 180px; object-fit: contain; }
.navbar-brand-text { font-size: 1.08rem; }
.navbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
  flex: 1;
}
.nav-item { display: flex; align-items: center; }
.nav-item.active .nav-link { color: #fff; }
.navbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  min-width: max-content;
}
.navbar-action-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.navbar-action-btn:hover { background: rgba(0,212,255,.14); border-color: rgba(0,212,255,.32); }
.cart-btn { position: relative; }
.cart-badge,
.cart-badge-mobile {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  color: #fff;
  background: var(--color-accent-moda);
  box-shadow: 0 0 0 2px rgba(7,7,22,1);
}
.hamburger-btn { display: none; flex-direction: column; gap: 4px; }
.hamburger-line {
  width: 19px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  display: block;
  transition: var(--transition-normal);
}
.hamburger-btn.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger-btn.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav-list { display: flex; flex-direction: column; gap: .5rem; width: min(100%, 420px); margin: 0 auto; }
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-heading);
  font-weight: 700;
}
.mobile-nav-link.active,
.mobile-nav-link:hover { color: #fff; border-color: rgba(0,212,255,.35); background: rgba(0,212,255,.10); }

/* Hero y sliders */
.hero-fullscreen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 25%, rgba(0,212,255,.22), transparent 32%),
    radial-gradient(circle at 78% 55%, rgba(233,69,96,.16), transparent 34%),
    linear-gradient(135deg, #060615 0%, #111136 56%, #050512 100%);
}
.particles-container,
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.particle,
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,212,255,.75);
  box-shadow: 0 0 18px rgba(0,212,255,.6);
  animation: particleFloat 7s linear infinite;
  opacity: .5;
}
.hero-slider,
.store-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-slide,
.store-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}
.hero-slide.active,
.store-slide.active { opacity: 1; visibility: visible; }
.hero-slide::before,
.store-slide-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.18), rgba(233,69,96,.08)), linear-gradient(180deg, rgba(5,5,18,.14), rgba(5,5,18,.70));
}
.hero-slide-overlay,
.store-slide-overlay,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5,5,18,.72) 0%, rgba(5,5,18,.34) 52%, rgba(5,5,18,.62) 100%),
    radial-gradient(circle at 55% 40%, rgba(0,212,255,.13), transparent 36%);
}
.hero .container,
.store-slide .container { position: relative; z-index: 4; }
.hero-content {
  margin-inline: auto;
  max-width: min(920px, 100%);
  text-align: center;
}
.hero-title {
  color: #fff;
  text-shadow: 0 18px 48px rgba(0,0,0,.6);
}
.hero-subtitle { color: rgba(255,255,255,.76); max-width: 800px; margin-inline: auto; }
.hero-cta-group { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.hero-slider-controls {
  position: absolute;
  left: 50%;
  bottom: 4rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.hero-slider-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.hero-slider-btn:hover { background: rgba(0,212,255,.18); border-color: rgba(0,212,255,.45); }
.hero-slider-dots,
.store-slider-dots { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.hero-slider-dot,
.store-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  transition: var(--transition-normal);
}
.hero-slider-dot.active,
.store-slider-dot.active {
  width: 30px;
  border-radius: 99px;
  background: var(--color-accent-tech);
  box-shadow: 0 0 18px rgba(0,212,255,.55);
}
.scroll-indicator-text { font-size: .72rem; }
.scroll-indicator-line { width: 1px; height: 42px; background: linear-gradient(180deg, rgba(255,255,255,.75), transparent); }

/* Secciones públicas */
.section { position: relative; padding: clamp(4rem, 8vw, 7rem) 0; }
.section-alt { background: rgba(255,255,255,.025); }
.section-header { max-width: 760px; margin: 0 auto 3rem; }
.section-subtitle {
  display: inline-block;
  margin-bottom: .55rem;
  color: var(--color-accent-tech);
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-title { color: #fff; }
.section-underline {
  width: 84px;
  height: 3px;
  border-radius: 99px;
  margin: 1rem auto 1.15rem;
  background: var(--gradient-tech);
  box-shadow: 0 0 22px rgba(0,212,255,.35);
}
.section-description,
.section-header .section-description { color: var(--color-text-secondary); line-height: 1.75; }
.section-footer { margin-top: 2.25rem; }
.text-center { text-align: center; }

/* Tarjetas de tiendas del Home */
.section-stores { background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.035)); }
.store-card {
  min-height: 430px;
  isolation: isolate;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.store-card-bg { background: linear-gradient(135deg, #101036, #050512); }
.store-card-tech { background: radial-gradient(circle at 25% 20%, rgba(0,212,255,.34), transparent 36%), linear-gradient(135deg, #061227, #071830 55%, #050512); }
.store-card-fashion { background: radial-gradient(circle at 78% 22%, rgba(233,69,96,.34), transparent 35%), linear-gradient(135deg, #210718, #171125 58%, #050512); }
.store-card-pattern { position: absolute; inset: 0; opacity: .35; }
.store-card-pattern span {
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  animation: float 7s ease-in-out infinite;
}
.store-card-pattern span:nth-child(1) { top: 8%; left: 10%; }
.store-card-pattern span:nth-child(2) { top: 24%; right: 14%; animation-delay: .8s; }
.store-card-pattern span:nth-child(3) { bottom: 12%; left: 18%; animation-delay: 1.6s; }
.store-card-pattern span:nth-child(4) { bottom: 22%; right: 10%; animation-delay: 2.4s; }
.store-card-pattern span:nth-child(5) { top: 48%; left: 42%; animation-delay: 3.2s; }
.store-card-pattern span:nth-child(6) { bottom: -6%; right: 42%; animation-delay: 4s; }
.store-card-content {
  position: relative;
  z-index: 2;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: linear-gradient(180deg, transparent 0%, rgba(5,5,18,.84) 82%);
}
.store-card-title { font-size: clamp(1.75rem, 3vw, 2.55rem); font-weight: 900; margin-bottom: .7rem; }
.store-card-description { color: rgba(255,255,255,.75); max-width: 520px; margin-bottom: 1.35rem; }
.store-card-icon { backdrop-filter: blur(10px); }
.store-card-btn { align-self: flex-start; }

/* Productos */
.products-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card-actions {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: var(--transition-smooth);
  z-index: 4;
}
.product-card:hover .product-card-actions { opacity: 1; transform: translateY(0); }
.product-card-image::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events: none;
}
.product-category {
  display: inline-block;
  color: var(--color-accent-tech);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.product-name,
.product-card-name {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  min-height: 2.7em;
}
.product-name a:hover { color: var(--color-accent-tech); }
.price-current,
.product-price .current {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
}
.price-old,
.product-price .old {
  color: rgba(255,255,255,.42);
  text-decoration: line-through;
  font-size: .88rem;
}
.price-lg { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.price-save { color: var(--color-success); font-size: .85rem; font-weight: 700; }

/* Stats, features y newsletter */
.stats-grid,
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.stat-card,
.feature-card,
.newsletter-card,
.empty-state,
.cms-page,
.confirmation-card {
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}
.stat-card { position: relative; padding: 2rem 1.5rem; text-align: center; overflow: hidden; }
.stat-icon { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 1rem; color: var(--color-accent-tech); background: rgba(0,212,255,.10); }
.stat-value { display: inline-block; color: #fff; font-size: clamp(2rem, 4vw, 3rem); font-family: var(--font-heading); font-weight: 900; line-height: 1; }
.stat-suffix { display: inline-block; color: var(--color-accent-tech); font-weight: 900; font-size: 1.4rem; margin-left: 2px; }
.stat-label { margin-top: .55rem; color: var(--color-text-secondary); font-weight: 700; }
.feature-card { padding: 2rem; transition: var(--transition-smooth); }
.feature-card:hover { transform: translateY(-7px); border-color: rgba(0,212,255,.25); }
.feature-icon { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 1.2rem; color: var(--color-accent-tech); background: rgba(0,212,255,.10); }
.feature-title { font-size: 1.18rem; font-weight: 900; margin-bottom: .7rem; }
.feature-description { color: var(--color-text-secondary); }
.newsletter-card { padding: clamp(2rem, 5vw, 3rem); display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; align-items: center; }
.newsletter-title { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 900; }
.newsletter-description,
.newsletter-disclaimer { color: var(--color-text-secondary); }
.newsletter-input-group { display: flex; gap: .75rem; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); padding: .55rem; border-radius: 999px; }
.newsletter-input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; padding: 0 1rem; }
.newsletter-btn { white-space: nowrap; }

/* Footer */
.footer { padding: 4.5rem 0 1.5rem; background: #060612; border-top: 1px solid rgba(255,255,255,.07); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer-brand,
.footer-brand-text { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 900; color: #fff; letter-spacing: .06em; margin-bottom: 1rem; }
.footer-logo { max-height: 52px; max-width: 190px; object-fit: contain; }
.footer-description { color: var(--color-text-secondary); max-width: 360px; }
.footer-heading { font-size: .9rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; color: #fff; }
.footer-links,
.footer-contact { display: grid; gap: .7rem; }
.footer-link,
.footer-contact-item { color: var(--color-text-secondary); display: flex; align-items: center; gap: .55rem; }
.footer-link:hover,
.footer-contact a:hover { color: var(--color-accent-tech); }
.footer-social { display: flex; gap: .65rem; margin-top: 1.15rem; }
.social-link { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color:#fff; }
.social-link:hover { background: rgba(0,212,255,.13); border-color: rgba(0,212,255,.34); }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.07); text-align:center; }
.footer-copyright { color: var(--color-text-muted); font-size: .86rem; }

/* Overlay de búsqueda */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: rgba(5,5,18,.92);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}
.search-overlay.active,
.search-overlay.open { opacity: 1; visibility: visible; }
.search-overlay-inner { width: min(92vw, 760px); position: relative; }
.search-overlay-close { position: absolute; right: 0; top: -64px; color:#fff; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); }
.search-overlay-form { display: flex; gap: .7rem; padding: .7rem; border-radius: 999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.search-overlay-input { flex:1; border:0; background:transparent; color:#fff; padding: 0 1.25rem; font-size: clamp(1.1rem, 3vw, 1.6rem); }
.search-overlay-btn { width: 56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--gradient-tech); }

/* Tiendas */
.store-layout .navbar { position: fixed; }
.store-main { padding-bottom: 4rem; }
.store-header-banner {
  position: relative;
  padding: 9rem 0 4rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 25%, rgba(0,212,255,.25), transparent 35%),
    linear-gradient(135deg, #071024, #101034 62%, #050512);
}
.store-header-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.45)); }
.store-header-content { position: relative; z-index: 1; text-align:center; max-width: 900px; margin-inline:auto; }
.store-header-image { max-height: 140px; width:100%; object-fit:cover; border-radius: var(--radius-xl); margin-bottom: 1.4rem; opacity:.82; }
.store-header-title { font-size: clamp(2.3rem, 6vw, 4.2rem); font-weight: 900; text-shadow: 0 16px 44px rgba(0,0,0,.45); }
.store-header-description { color: rgba(255,255,255,.78); max-width: 740px; margin: .8rem auto 0; }
.store-category-bar { position: sticky; top: 74px; z-index: 90; background: rgba(7,7,22,.86); border-block:1px solid rgba(255,255,255,.07); backdrop-filter: blur(14px); }
.store-category-scroll { display:flex; gap:1rem; overflow-x:auto; padding:.8rem 0; scrollbar-width:none; }
.store-category-scroll::-webkit-scrollbar { display:none; }
.store-category-link { white-space:nowrap; color:var(--color-text-secondary); font-weight:800; font-size:.85rem; padding:.55rem .85rem; border-radius:999px; border:1px solid transparent; }
.store-category-link.active,
.store-category-link:hover { color:#fff; border-color:rgba(0,212,255,.35); background:rgba(0,212,255,.10); }
.store-slider-section { position: relative; min-height: 520px; padding-top: 74px; }
.store-slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.store-slide-content { position: relative; z-index:2; max-width:720px; padding-top: 6rem; }
.store-slide-title { font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight:900; line-height:1.05; }
.store-slide-subtitle { margin:1rem 0 1.5rem; color:rgba(255,255,255,.78); font-size:1.15rem; }
.store-slider-dots { position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:5; }
.store-filter-section,
.store-products-section,
.section-featured-alt { padding: 3rem 0; }
.filter-bar { background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-xl); padding:1rem; backdrop-filter:blur(14px); }
.filter-bar-inner { display:grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap:1rem; align-items:end; }
.filter-label { display:block; color:var(--color-text-secondary); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem; }
.filter-select,
.filter-input { width:100%; min-height:44px; border-radius:var(--radius-md); border:1px solid rgba(255,255,255,.10); background:rgba(5,5,18,.72); color:#fff; padding:0 .9rem; }
.filter-search-input { position:relative; }
.filter-search-input svg { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--color-text-muted); }
.filter-search-input .filter-input { padding-left:2.35rem; }
.filter-actions { display:flex; gap:.6rem; align-items:center; }
.active-filters { display:flex; gap:.65rem; align-items:center; flex-wrap:wrap; margin:1rem 0; }
.active-filters-label { color:var(--color-text-secondary); font-weight:700; }
.active-filter-tag { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius:999px; background:rgba(0,212,255,.10); color:#fff; border:1px solid rgba(0,212,255,.24); }
.active-filter-remove { color:#fff; font-weight:900; }
.store-results-info { color:var(--color-text-secondary); margin-top:1rem; }
.pagination { display:flex; align-items:center; justify-content:center; gap:.7rem; margin-top:2.5rem; flex-wrap:wrap; }
.pagination-pages { display:flex; gap:.45rem; align-items:center; }
.pagination-link { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.5rem .8rem; border-radius:999px; color:var(--color-text-secondary); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
.pagination-link:hover,
.pagination-current { color:#fff; background:var(--gradient-tech); border-color:transparent; }
.pagination-ellipsis { color:var(--color-text-muted); }

/* Producto detalle */
.breadcrumb-nav { padding: 7.5rem 0 1rem; }
.breadcrumb { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; color:var(--color-text-muted); font-size:.88rem; }
.breadcrumb-item:not(:last-child)::after { content:'›'; margin-left:.55rem; color:rgba(255,255,255,.32); }
.breadcrumb-item a:hover { color:var(--color-accent-tech); }
.section-product-detail { padding-top: 2rem; }
.product-detail-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.product-info { padding:1rem 0; }
.product-store-badge { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .75rem; border-radius:999px; background:rgba(0,212,255,.10); border:1px solid rgba(0,212,255,.23); color:#fff; font-weight:800; margin-bottom:1rem; }
.product-detail-category { color:var(--color-text-secondary); margin-bottom:1rem; }
.product-detail-category a { color:var(--color-accent-tech); }
.product-detail-short-desc,
.product-description-content { color:var(--color-text-secondary); line-height:1.8; }
.product-detail-divider { border:0; height:1px; background:rgba(255,255,255,.09); margin:1.6rem 0; }
.variant-group { margin-bottom:1rem; }
.variant-label { display:block; font-weight:800; margin-bottom:.65rem; }
.variant-options { display:flex; gap:.5rem; flex-wrap:wrap; }
.variant-btn { padding:.65rem .9rem; border-radius:var(--radius-md); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); color:#fff; font-weight:800; }
.variant-btn.active,
.variant-btn:hover { background:rgba(0,212,255,.14); border-color:rgba(0,212,255,.38); }
.product-cart-row { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; }
.quantity-label { display:block; color:var(--color-text-secondary); font-size:.82rem; font-weight:800; margin-bottom:.4rem; }
.quantity-controls { display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.12); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.045); }
.quantity-btn { width:44px; height:44px; display:grid; place-items:center; color:#fff; }
.quantity-input { width:62px; height:44px; border:0; background:transparent; text-align:center; color:#fff; font-weight:900; }
.product-add-btn { min-width:240px; }
.product-meta { display:grid; gap:.7rem; }
.product-meta-item { display:flex; gap:.5rem; color:var(--color-text-secondary); }
.product-meta-label { font-weight:900; color:#fff; }
.product-meta-value.in-stock { color:var(--color-success); display:inline-flex; align-items:center; gap:.35rem; }
.product-meta-value.out-of-stock { color:var(--color-danger); }
.product-store-link { margin-top:1.2rem; }
.product-tabs-content,
.product-tab-panel.active { display:block; }
.product-tab-panel { display:none; }
.specifications-table { width:100%; border-collapse:collapse; overflow:hidden; border-radius:var(--radius-lg); }
.specifications-table th,
.specifications-table td { padding:1rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.specifications-table th { color:#fff; background:rgba(255,255,255,.045); }
.specifications-table td { color:var(--color-text-secondary); }

/* Carrito, búsqueda, páginas CMS y confirmación */
.section-page-header,
.section-search-results,
.section-cart,
.section-cart-empty,
.section-cms-page,
.section-confirmation { padding-top: 8rem; }
.page-title { font-size: clamp(2rem, 5vw, 3.6rem); font-weight:900; }
.page-subtitle { color:var(--color-text-secondary); margin-top:.5rem; }
.cart-layout,
.cart-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:2rem; align-items:start; }
.cart-summary-card,
.cart-summary { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-xl); padding:1.5rem; position:sticky; top:100px; }
.cart-items-header { display:grid; grid-template-columns:1fr 110px 130px 120px 50px; gap:1rem; padding:.8rem 1rem; color:var(--color-text-muted); font-size:.78rem; text-transform:uppercase; font-weight:900; }
.cart-item-product { display:flex; gap:1rem; align-items:center; }
.cart-item-details { display:grid; gap:.25rem; }
.cart-item-store { color:var(--color-accent-tech); font-size:.78rem; font-weight:800; }
.cart-item-subtotal { font-weight:900; color:#fff; }
.cart-remove-btn { color:var(--color-danger); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(255,23,68,.08); }
.cart-summary-rows { display:grid; gap:.85rem; margin:1rem 0; }
.cart-summary-row,
.cart-summary-total-row { display:flex; justify-content:space-between; gap:1rem; color:var(--color-text-secondary); }
.cart-summary-total-row { color:#fff; font-size:1.2rem; font-weight:900; padding-top:1rem; border-top:1px solid rgba(255,255,255,.09); }
.cart-checkout-btn { width:100%; margin-top:1rem; }
.cart-continue-shopping { margin-top:1rem; color:var(--color-accent-tech); font-weight:800; display:inline-flex; }
.empty-state-card,
.empty-state-cart,
.empty-state { text-align:center; padding:3rem 2rem; }
.empty-state-title { font-size:1.4rem; font-weight:900; margin:1rem 0 .5rem; }
.empty-state-description { color:var(--color-text-secondary); margin-bottom:1.2rem; }
.search-inline-form { display:flex; gap:.75rem; margin:1.5rem 0; }
.search-bar-input { flex:1; min-height:50px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); color:#fff; padding:0 1.2rem; }
.search-filter-buttons { display:flex; gap:.7rem; flex-wrap:wrap; margin:1rem 0 2rem; }
.search-filter-btn { border-radius:999px; padding:.65rem 1rem; color:var(--color-text-secondary); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); font-weight:800; }
.search-filter-btn.active,
.search-filter-btn:hover { color:#fff; background:rgba(0,212,255,.11); border-color:rgba(0,212,255,.35); }
.cms-page { padding:clamp(1.5rem,4vw,3rem); }
.cms-page-title { font-size:clamp(2rem,5vw,3rem); font-weight:900; }
.cms-page-content { color:var(--color-text-secondary); line-height:1.8; }
.cms-page-content h2,
.cms-page-content h3 { color:#fff; margin:1.5rem 0 .6rem; }
.confirmation-wrapper { max-width:900px; margin:0 auto; }
.confirmation-card { padding:clamp(1.5rem,4vw,3rem); text-align:center; }
.confirmation-title { font-size:clamp(2rem,5vw,3rem); font-weight:900; }
.confirmation-message { color:var(--color-text-secondary); }
.confirmation-actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }

/* Notificaciones y botón arriba */
.flash-messages { position:fixed; right:1rem; top:6rem; z-index:var(--z-toast); display:grid; gap:.75rem; }
.notification { display:flex; align-items:center; gap:.7rem; min-width:min(92vw,320px); padding:.85rem 1rem; border-radius:var(--radius-lg); background:rgba(17,17,40,.96); border:1px solid rgba(255,255,255,.10); color:#fff; box-shadow:var(--shadow-lg); transform:translateX(120%); opacity:0; transition:var(--transition-normal); }
.notification.show,
.notification.fade-in-up { transform:translateX(0); opacity:1; }
.notification-success { border-color:rgba(0,200,83,.35); }
.notification-error { border-color:rgba(255,23,68,.35); }
.notification-info { border-color:rgba(68,138,255,.35); }
.notification-close { margin-left:auto; color:#fff; font-size:1.25rem; }
.back-to-top { position:fixed; right:1.2rem; bottom:1.2rem; z-index:var(--z-sticky); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--gradient-tech); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(10px); transition:var(--transition-normal); }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
  .products-grid,
  .products-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-grid,
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar-inner { grid-template-columns: 1fr 1fr; }
  .cart-layout,
  .cart-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .navbar-nav { display: none; }
  .hamburger-btn { display: inline-flex; }
  .mobile-nav { display: flex; }
  .hero-title { font-size: clamp(2.6rem, 12vw, 4.5rem); }
  .stores-grid,
  .product-detail-grid,
  .newsletter-card { grid-template-columns: 1fr; }
  .store-slider-section { min-height: 460px; }
  .store-slide-content { padding-top: 4rem; text-align:center; margin-inline:auto; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 22px, var(--container-wide)); }
  .navbar { padding: .7rem 0; }
  .navbar-logo { max-height: 38px; max-width: 145px; }
  .products-grid,
  .products-grid-4,
  .stats-grid,
  .features-grid { grid-template-columns: 1fr; }
  .filter-bar-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .newsletter-input-group,
  .search-overlay-form,
  .search-inline-form { border-radius: var(--radius-xl); flex-direction: column; }
  .newsletter-btn { width: 100%; }
  .cart-items-header { display:none; }
  .cart-item { flex-direction: column; }
  .hero-slider-controls { bottom: 2rem; }
  .hero-scroll-indicator { display:none; }
}

/* Complementos visuales para carrito, confirmación y 404 */
.btn-block { width: 100%; }
.cart-col-product, .cart-col-price, .cart-col-quantity, .cart-col-subtotal, .cart-col-actions,
.cart-item-price, .cart-item-quantity, .cart-item-actions { display:flex; align-items:center; }
.cart-item { align-items:center; }
.cart-item-image { width:82px; height:82px; border-radius:var(--radius-lg); overflow:hidden; flex:0 0 82px; background:rgba(255,255,255,.05); }
.cart-item-image img { width:100%; height:100%; object-fit:cover; }
.cart-item-name { color:#fff; font-size:1rem; font-weight:900; }
.cart-item-variant { color:var(--color-text-muted); font-size:.84rem; }
.quantity-display { min-width:42px; text-align:center; color:#fff; font-weight:900; }
.quantity-controls-sm .quantity-btn { width:36px; height:36px; }
.cart-summary-title { font-size:1.35rem; font-weight:900; margin-bottom:1rem; }
.cart-summary-divider { border:0; height:1px; background:rgba(255,255,255,.10); margin:.4rem 0; }
.cart-summary-free { color:var(--color-success); font-weight:800; }
.cart-payment-icons { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.payment-icon { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 .65rem; border-radius:8px; color:rgba(255,255,255,.75); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); font-size:.72rem; font-weight:900; }

.confirmation-icon { display:grid; place-items:center; margin-bottom:1rem; color:var(--color-success); }
.confirmation-checkmark { width:88px; height:88px; border-radius:50%; display:grid; place-items:center; background:rgba(0,200,83,.10); border:1px solid rgba(0,200,83,.28); }
.confirmation-checkmark-circle { stroke:rgba(0,200,83,.55); }
.confirmation-checkmark-check { stroke:var(--color-success); }
.confirmation-text { color:var(--color-text-secondary); max-width:680px; margin:.65rem auto 1.25rem; }
.confirmation-card-row { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.confirmation-card-row:last-child { border-bottom:0; }
.confirmation-card-label { color:var(--color-text-secondary); font-weight:800; }
.confirmation-card-value { color:#fff; font-weight:900; display:inline-flex; align-items:center; gap:.45rem; }
.confirmation-order-number { color:var(--color-accent-tech); }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--color-success); display:inline-block; }
.confirmation-summary { margin-top:2rem; text-align:left; }
.confirmation-summary-title { font-size:1.45rem; font-weight:900; margin-bottom:1rem; }
.confirmation-table-wrapper { overflow:auto; border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.09); }
.confirmation-table { width:100%; border-collapse:collapse; min-width:680px; background:rgba(255,255,255,.035); }
.confirmation-table th, .confirmation-table td { padding:1rem; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; color:var(--color-text-secondary); }
.confirmation-table th { color:#fff; background:rgba(255,255,255,.055); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.confirmation-table-product { display:flex; align-items:center; gap:.8rem; }
.confirmation-table-img { width:58px; height:58px; object-fit:cover; border-radius:12px; }
.confirmation-table-name, .confirmation-table-subtotal, .confirmation-table-footer-value, .confirmation-table-total { color:#fff; font-weight:900; }
.confirmation-table-variant { display:block; color:var(--color-text-muted); font-size:.82rem; }
.confirmation-table-footer-label { text-align:right !important; font-weight:900; color:#fff !important; }
.confirmation-table-total-row td { font-size:1.1rem; background:rgba(0,212,255,.06); }

.section-404 { min-height:100vh; display:flex; align-items:center; padding-top:8rem; }
.error-404-wrapper { position:relative; text-align:center; max-width:940px; margin:0 auto; }
.error-404-decorations { position:absolute; inset:-4rem; pointer-events:none; opacity:.75; }
.error-404-shape { position:absolute; border-radius:50%; filter:blur(2px); }
.error-404-shape-1 { width:190px; height:190px; left:4%; top:8%; background:rgba(0,212,255,.10); }
.error-404-shape-2 { width:240px; height:240px; right:0; bottom:0; background:rgba(233,69,96,.10); }
.error-404-shape-3 { width:120px; height:120px; left:62%; top:0; background:rgba(212,165,116,.10); }
.error-404-grid-overlay { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle, #000 0%, transparent 70%); }
.error-404-number { position:relative; z-index:1; font-size:clamp(7rem,22vw,16rem); font-family:var(--font-heading); font-weight:900; line-height:.82; letter-spacing:-.08em; }
.error-404-digit { display:inline-block; color:#fff; text-shadow:0 0 48px rgba(0,212,255,.22); animation:float 4s ease-in-out infinite; animation-delay:var(--delay); }
.error-404-digit-middle { color:var(--color-accent-tech); }
.error-404-glitch { position:absolute; inset:0; display:grid; place-items:start center; opacity:.08; pointer-events:none; }
.error-404-glitch-text { font-size:clamp(7rem,22vw,16rem); font-weight:900; color:var(--color-accent-moda); }
.error-404-title { font-size:clamp(2rem,5vw,3.2rem); font-weight:900; }
.error-404-text { color:var(--color-text-secondary); max-width:680px; margin:.8rem auto 1.5rem; }
.error-404-search { max-width:620px; margin:0 auto 1.5rem; }
.error-404-search-inner { display:flex; align-items:center; gap:.7rem; padding:.55rem; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); }
.error-404-search-input { flex:1; min-width:0; border:0; background:transparent; color:#fff; padding:0 .6rem; }
.error-404-actions, .error-404-links-grid, .empty-state-actions { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.error-404-links { margin-top:1.4rem; }
.error-404-links-label { color:var(--color-text-muted); font-weight:800; margin-bottom:.75rem; }
.error-404-link { display:inline-flex; align-items:center; gap:.5rem; color:#fff; padding:.75rem 1rem; border-radius:999px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); }
.error-404-link:hover { border-color:rgba(0,212,255,.35); background:rgba(0,212,255,.10); }

.cms-page-header, .cms-page-footer { margin-bottom:1.25rem; }
.cms-page-date { color:var(--color-text-muted); font-size:.86rem; }
.cms-page-divider { border:0; height:1px; background:rgba(255,255,255,.09); margin:1.5rem 0; }
.product-gallery-badge { left:auto; right:var(--space-3); }
.variant-swatch { width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.25); }
.variant-swatch.active { outline:3px solid var(--color-accent-tech); outline-offset:2px; }
@media (max-width:640px) {
  .confirmation-card-row { flex-direction:column; gap:.25rem; }
  .error-404-search-inner { border-radius:var(--radius-xl); flex-direction:column; align-items:stretch; }
}

/* ============================================================
   KAIROS REMODELACIÓN ADMIN / HOME 2026
   ============================================================ */
.navbar-logo,
.footer-logo {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,.9));
}

.section-company {
  position: relative;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}
.company-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: var(--space-8);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: linear-gradient(135deg, rgba(0,212,255,.09), rgba(233,69,96,.08)), rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  overflow: hidden;
}
.company-description {
  color: var(--color-text-secondary);
  max-width: 760px;
  margin-top: var(--space-4);
  font-size: var(--font-size-md);
}
.company-credits {
  margin-top: var(--space-4);
  display: inline-flex;
  padding: .8rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-weight: 700;
}
.company-card-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.company-card-image img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.section-newsletter .newsletter-form {
  display: block;
  max-width: none;
  margin: 0;
}
.section-newsletter .newsletter-input-group {
  min-height: 54px;
  padding: .42rem;
  align-items: center;
}
.section-newsletter .newsletter-input {
  min-height: 42px;
  font-size: .94rem;
}
.section-newsletter .newsletter-btn {
  width: auto;
  min-height: 42px;
  padding: .72rem 1.25rem;
  font-size: .78rem;
  letter-spacing: .03em;
}
.section-newsletter .newsletter-disclaimer {
  margin-top: .75rem;
  font-size: .86rem;
  line-height: 1.5;
  max-width: 100%;
}

.product-features-list {
  display: grid;
  gap: .9rem;
  padding: 0;
  margin: 0;
}
.product-features-list li {
  position: relative;
  padding: .85rem 1rem .85rem 2.4rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--color-text-secondary);
}
.product-features-list li::before {
  content: '✓';
  position: absolute;
  left: .95rem;
  top: .78rem;
  color: var(--color-success);
  font-weight: 900;
}

@media (max-width: 860px) {
  .company-card { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .section-newsletter .newsletter-input-group { border-radius: var(--radius-xl); }
  .section-newsletter .newsletter-btn { width: 100%; }
  .company-credits { border-radius: var(--radius-lg); }
}
.navbar-logo { max-height: 54px; max-width: 230px; }
.footer-logo { max-height: 62px; max-width: 260px; }
@media (max-width: 640px) { .navbar-logo { max-height: 42px; max-width: 170px; } }

/* ============================================================
   KAIROS HOME V2 - CENTRADO, TÍTULOS EN DOS LÍNEAS Y FOOTER
   ============================================================ */
.hero-scroll-indicator { display: none !important; }

.section-header {
  display: block !important;
  text-align: center !important;
  max-width: 850px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.section-header .section-subtitle,
.section-subtitle {
  display: block !important;
  width: 100% !important;
  margin: 0 auto .55rem !important;
  text-align: center !important;
  color: var(--color-accent-tech) !important;
  font-family: var(--font-heading) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
.section-header .section-title,
.section-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: #fff !important;
  margin: 0 auto !important;
  font-weight: 900 !important;
}
.section-title::after { display: none !important; }
.section-underline {
  margin: 1rem auto 1.25rem !important;
}
.section-description,
.section-header .section-description {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.section-stores,
.section-products,
.section-stats,
.section-features,
.section-newsletter,
.section-company {
  text-align: center !important;
}
.stores-grid,
.products-grid,
.stats-grid,
.features-grid {
  justify-content: center !important;
}
.store-card-content {
  align-items: center !important;
  text-align: center !important;
}
.store-card-description,
.product-card-info,
.feature-description,
.company-description {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.store-card-btn,
.section-footer .btn,
.product-card-actions,
.feature-icon {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.feature-icon { margin-bottom: 1.2rem !important; }
.product-card-info { text-align: center !important; }
.product-price { justify-content: center !important; }

.company-card {
  text-align: center !important;
  justify-items: center !important;
}
.company-card-content { width: 100% !important; }
.company-credits { display: none !important; }

.footer-bottom {
  display: grid !important;
  justify-items: center !important;
  gap: .45rem !important;
}
.footer-credits {
  margin: 0 !important;
  color: rgba(255,255,255,.34) !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
}

@media (max-width: 640px) {
  .section-header .section-title,
  .section-title { line-height: 1.1 !important; }
  .section-header .section-subtitle,
  .section-subtitle { font-size: .72rem !important; letter-spacing: .14em !important; }
}


/* ============================================================
   KAIROS V3 - AJUSTES HOME Y ADMIN
   ============================================================ */
.section-stores-has-bg {
  background-image:
    linear-gradient(180deg, rgba(5,5,18,.80), rgba(5,5,18,.88)),
    var(--stores-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed;
}
.section-stores-has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(0,212,255,.14), transparent 32%),
    radial-gradient(circle at 86% 74%, rgba(233,69,96,.12), transparent 30%);
}
.section-stores-has-bg > .container { position: relative; z-index: 2; }

/* Evita que los rótulos incrustados en las imágenes de producto se vean tapados. */
.product-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.product-card-image {
  flex: 0 0 auto !important;
  aspect-ratio: 1 / .88 !important;
  background: #05091a !important;
}
.product-card-image img {
  width: 100% !important;
  height: 114% !important;
  object-fit: cover !important;
  object-position: top center !important;
}
.product-card-info {
  position: relative !important;
  z-index: 5 !important;
  flex: 1 1 auto !important;
  padding-top: 1.8rem !important;
  background: var(--color-card) !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}
.product-category {
  min-height: 1em !important;
  display: block !important;
  margin-bottom: .65rem !important;
}
.product-name,
.product-card-name {
  position: relative !important;
  z-index: 6 !important;
}
@media (max-width: 768px) {
  .section-stores-has-bg { background-attachment: scroll; }
  .product-card-image { aspect-ratio: 1 / .92 !important; }
}


/* ============================================================
   KAIROS V4 - CORRECCIÓN DEFINITIVA PRODUCTOS + IMÁGENES
   Evita que las imágenes tapen nombres o rótulos y mantiene tarjetas limpias.
   ============================================================ */
.section-products .product-card {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.section-products .product-card-image {
  aspect-ratio: 1 / 0.78 !important;
  min-height: 230px !important;
  padding: 1rem !important;
  background: linear-gradient(145deg, #061226 0%, #0b1832 55%, #05091a 100%) !important;
  overflow: hidden !important;
}
.section-products .product-card-image::after {
  display: none !important;
}
.section-products .product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  border-radius: 14px !important;
}
.section-products .product-card:hover .product-card-image img {
  transform: scale(1.035) !important;
}
.section-products .product-card-info {
  position: relative !important;
  z-index: 10 !important;
  background: #15152f !important;
  padding: 1.35rem 1.45rem 1.55rem !important;
  min-height: 164px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
.section-products .product-name,
.section-products .product-card-name {
  margin: 0 0 .75rem !important;
  min-height: 2.75em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.section-products .product-price {
  gap: .7rem !important;
  flex-wrap: wrap !important;
}
@media (max-width: 768px) {
  .section-products .product-card-image {
    min-height: 210px !important;
    aspect-ratio: 1 / 0.82 !important;
  }
  .section-products .product-card-info {
    min-height: 150px !important;
  }
}