@keyframes tickerScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.search-wrapper { position: relative; flex-grow: 1; }
.search-wrapper input { padding-right: 2.75rem; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:'Inter',sans-serif; background:#f8f8fc; min-height:100vh; color:#1e293b; }
  a { color:inherit; }

  .header { background:white; border-bottom:1px solid #e2e8f0; padding:12px 20px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:10; }
  .header img { height:36px; flex-shrink:0; }
  .header-busqueda { flex:1; position:relative; max-width:480px; }
  .header-busqueda input { width:100%; height:38px; padding:0 40px 0 14px; border:2px solid #e2e8f0; border-radius:999px; font-size:0.8rem; outline:none; font-family:inherit; }
  .header-busqueda input:focus { border-color:#7c3aed; }
  .header-busqueda button { position:absolute; right:3px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:#7c3aed; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .btn-tienda { background:#7c3aed; color:white; border:none; border-radius:10px; padding:8px 16px; font-size:0.82rem; font-weight:700; cursor:pointer; text-decoration:none; flex-shrink:0; white-space:nowrap; }
  .btn-tienda:hover { background:#6d28d9; }

  .breadcrumb { max-width:1280px; margin:0 auto; padding:16px 16px 0; font-size:0.78rem; color:#94a3b8; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
  .breadcrumb a { color:#94a3b8; text-decoration:none; }
  .breadcrumb a:hover { color:#7c3aed; }
  .breadcrumb .actual { color:#7c3aed; font-weight:700; }

  .pagina-cont { max-width:1280px; margin:0 auto; padding:14px 16px 50px; }
  .layout { display:grid; grid-template-columns:1fr; gap:24px; }
  @media (min-width:800px) { .layout { grid-template-columns:0.36fr 0.64fr; align-items:start; gap:32px; } }

  .galeria-wrap { background:white; border-radius:20px; padding:14px; box-shadow:0 4px 24px rgba(0,0,0,0.06); }
  .galeria { position:relative; background:#ffffff; border:1px solid #f1f5f9; border-radius:14px; aspect-ratio:1; overflow:hidden; }
  .galeria img { width:100%; height:100%; object-fit:contain; cursor:zoom-in; transition:opacity 0.2s; }

  .lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:999; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
  .lightbox.open { display:flex; }
  .lightbox img { max-width:92vw; max-height:92vh; object-fit:contain; border-radius:8px; }
  .lightbox-cerrar { position:absolute; top:20px; right:24px; width:40px; height:40px; background:rgba(255,255,255,0.15); border:none; border-radius:50%; color:white; font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .lightbox-cerrar:hover { background:rgba(255,255,255,0.25); }
  .galeria-iconos { position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:8px; }
  .icono-flotante { width:38px; height:38px; background:white; border:none; border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#334155; }
  .icono-flotante:hover { background:#f5f3ff; color:#7c3aed; }
  .btn-nav { position:absolute; top:50%; transform:translateY(-50%); background:white; border:none; border-radius:50%; width:34px; height:34px; font-size:1rem; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center; opacity:0.9; }
  .btn-prev { left:10px; }
  .btn-next { right:10px; }

  .thumbs { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .thumb { width:56px; height:56px; border-radius:10px; overflow:hidden; border:1px solid #f1f5f9; cursor:pointer; background:#ffffff; flex-shrink:0; }
  .thumb.active { border:2px solid #10b981; }
  .thumb img { width:100%; height:100%; object-fit:contain; }

  .info-card { background:white; border-radius:20px; padding:24px; box-shadow:0 4px 24px rgba(0,0,0,0.06); }
  .badge-merc { display:inline-flex; align-items:center; gap:5px; background:#0891b2; color:#fff; font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,0.15); white-space:nowrap; }
  .badge-merc-mobile { margin-bottom:14px; }
  @media (min-width:800px){ .badge-merc-mobile { display:none; } }
  @media (max-width:799px){ .badge-merc-desktop { display:none; } }
  .marca { font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#7c3aed; margin-bottom:6px; }
  .codigo-row { display:inline-flex; align-items:center; gap:6px; background:#f1f5f9; border-radius:8px; padding:3px 10px; font-size:0.72rem; color:#64748b; font-family:Arial,sans-serif; margin-bottom:14px; cursor:pointer; }
  .codigo-row:hover { background:#e2e8f0; }
  .nombre { font-size:1.35rem; font-weight:900; line-height:1.3; margin-bottom:16px; }
  .precio { font-size:2.1rem; font-weight:900; color:#7c3aed; margin-bottom:4px; letter-spacing:-1px; }
  .precio-mayorista { display:none; font-size:1rem; font-weight:800; color:#16a34a; margin-bottom:12px; }
  body.is-logged-in.es-mayorista .precio-mayorista { display:block; }
  .desc-transf { display:inline-block; background:#dcfce7; color:#16a34a; font-size:0.75rem; font-weight:800; padding:5px 12px; border-radius:20px; margin-bottom:12px; }
  body.is-logged-in #btn-login { display:none; }
  body.is-logged-in #user-badge { display:flex; }
  body.is-logged-in #btn-login-mobile { display:none; }
  body.is-logged-in #user-badge-mobile { display:flex; }
  .sin-stock { display:inline-block; background:#fee2e2; color:#ef4444; font-size:0.72rem; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:18px; }
  .en-stock { display:inline-block; background:#dcfce7; color:#16a34a; font-size:0.72rem; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:18px; }
  .reposicion-aviso { display:flex; align-items:center; gap:5px; color:#ef4444; font-size:0.72rem; font-weight:700; margin:-10px 0 16px; font-family:Arial,sans-serif; }

  .btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
  @media (max-width:420px) { .btns { grid-template-columns:1fr; } }
  .btn-comprar { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:white; border:none; border-radius:14px; padding:16px; font-size:0.95rem; font-weight:900; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; text-transform:uppercase; letter-spacing:0.3px; }
  .btn-comprar:hover { filter:brightness(1.06); }
  .btn-comprar:disabled { background:#cbd5e1; cursor:not-allowed; }
  .btn-wsp { background:#25d366; color:white; border:none; border-radius:14px; padding:14px; font-size:0.9rem; font-weight:800; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
  .btn-wsp:hover { background:#22c55e; }

  .descripcion-card { background:white; border-radius:20px; padding:22px 24px; margin-top:20px; box-shadow:0 4px 24px rgba(0,0,0,0.06); }
  .descripcion-titulo { font-size:0.78rem; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#94a3b8; margin-bottom:10px; }
  .descripcion-texto { color:#475569; font-size:0.92rem; line-height:1.7; }
  .descripcion-texto div, .descripcion-texto p { margin:0 0 0.55em; }
  .descripcion-texto div:last-child, .descripcion-texto p:last-child { margin-bottom:0; }
  .descripcion-texto ul, .descripcion-texto ol { margin:0.4em 0 0.7em 1.4em; }
  .descripcion-texto li { margin:0.15em 0; }
  .descripcion-texto b, .descripcion-texto strong { font-weight:700; color:#1e293b; }
  .descripcion-texto u { text-decoration:underline; }
  .descripcion-texto a { color:#7c3aed; text-decoration:underline; }
  .descripcion-texto h1, .descripcion-texto h2 { font-size:1.05rem; font-weight:800; color:#1e293b; margin:0.7em 0 0.35em; line-height:1.3; }
  .descripcion-texto h3, .descripcion-texto h4 { font-size:0.95rem; font-weight:700; color:#334155; margin:0.6em 0 0.3em; line-height:1.3; }
  .descripcion-texto em, .descripcion-texto i { font-style:italic; }
  .descripcion-texto hr { border:none; border-top:1px solid #e2e8f0; margin:0.9em 0; }

  .estado { text-align:center; padding:80px 20px; color:#94a3b8; }
  .estado-icon { font-size:3rem; margin-bottom:12px; }
  .estado h2 { font-size:1.1rem; font-weight:700; margin-bottom:6px; color:#64748b; }
  .estado p { font-size:0.85rem; }

  #toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#1e293b; color:white; border-radius:10px; padding:10px 20px; font-size:0.85rem; font-weight:700; z-index:999; opacity:0; transition:all 0.3s; pointer-events:none; white-space:nowrap; }


    .nav-link { position:relative; overflow:hidden; border-radius:9px; }
    .nav-link select { background:transparent !important; color:#fff !important; }
    .nav-link select option { color:#1e293b !important; background:#ffffff !important; }
    #selectCatMobile option, #selectMarcaMobile option { color:#1e293b; background:#ffffff; }
    .nav-link::after { content:''; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent); transform:skewX(-20deg); pointer-events:none; opacity:0; }
    .nav-link:hover::after { animation: navShine 0.7s ease; }
    @keyframes navShine { 0%{ left:-130%; opacity:1; } 100%{ left:140%; opacity:1; } }
    @keyframes logoDrop {
        0%   { opacity:0; transform: translateY(-180px); animation-timing-function: ease-in; }
        50%  { opacity:1; transform: translateY(0);      animation-timing-function: ease-out; }
        66%  { transform: translateY(-34px);             animation-timing-function: ease-in; }
        80%  { transform: translateY(0);                 animation-timing-function: ease-out; }
        90%  { transform: translateY(-13px);             animation-timing-function: ease-in; }
        96%  { transform: translateY(0);                 animation-timing-function: ease-out; }
        98%  { transform: translateY(-4px); }
        100% { transform: translateY(0); }
    }
    .logo-anim { animation: logoDrop 1.3s both; transform-origin:center; }
    @media (prefers-reduced-motion: reduce) { .logo-anim { animation:none; } }