/* ============================================================================
   speedyrect-ui-v73.css — SpeedyRectCore v7.3 · Ferretería y Barraca Falero
   Hoja NUEVA. No reemplaza v71 ni v72: se sube al lado.
   Resuelve: (1) barra de categorías arrastrable en PC, (2) borde del buscador
   más oscuro pero delicado, (3) consola de botones debajo del hero con los
   colores pedidos, (4) carrito de pedidos (pago + nombre + dirección).
   ============================================================================ */

:root{
  --sr-azul:       var(--sr-primary, #2563eb);   /* azul del comercio  */
  --sr-azul-osc:   #1d4ed8;
  --sr-amarillo:   var(--sr-accent,  #fbbf24);   /* amarillo del comercio */
  --sr-rojo:       var(--sr-danger,  #ef4444);
  --sr-verde:      #16a34a;
  --sr-gris-fondo: #f1f5f9;
  --sr-gris-borde: #cbd5e1;                      /* ← más oscuro que antes */
  --sr-gris-borde-fuerte: #94a3b8;
  --sr-sombra:     0 6px 22px rgba(15,23,42,.14);
  --sr-bar-h:      0px;
}

/* ══════════════════════════════════════════════════════════════════════════
   1) HERO — sliders de fotos (sin dependencias externas)
   ══════════════════════════════════════════════════════════════════════════ */
#hero-section{ position:relative; overflow:hidden; background:#0f172a; }

.sr-hero-slider{ position:absolute; inset:0; z-index:0; }
.sr-hero-foto{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease;
}
.sr-hero-foto.activa{ opacity:1; }

.sr-hero-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(2,6,23,.58) 0%, rgba(2,6,23,.46) 45%, rgba(2,6,23,.78) 100%);
}
.sr-hero-contenido{ position:relative; z-index:2; }
.sr-hero-pista{ color:#e2e8f0; font-size:.85rem; }

.sr-hero-puntos{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  display:flex; gap:8px; justify-content:center;
}
.sr-hero-puntos button{
  width:11px; height:11px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,.85); background:transparent; padding:0;
  transition:background .25s ease, transform .25s ease;
}
.sr-hero-puntos button.activo{ background:var(--sr-amarillo); transform:scale(1.25); }

/* ══════════════════════════════════════════════════════════════════════════
   2) CONSOLA DE BOTONES — va DEBAJO del hero (el hero queda libre)
   ══════════════════════════════════════════════════════════════════════════ */
.sr-consola{
  display:grid; gap:10px; padding:14px 16px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  background:#fff; border-bottom:1px solid #e2e8f0;
}
@media (min-width:768px){
  .sr-consola{ grid-template-columns:repeat(6, minmax(0,1fr)); padding:16px 24px; }
}
.sr-consola-btn{
  display:flex; align-items:center; gap:9px; justify-content:center;
  padding:13px 12px; border-radius:14px; font-weight:700; font-size:.92rem;
  text-decoration:none; line-height:1.15; text-align:center;
  border:1px solid transparent; transition:transform .16s ease, box-shadow .16s ease;
  box-shadow:0 3px 10px rgba(15,23,42,.10);
}
.sr-consola-btn i{ font-size:1.05rem; }
.sr-consola-btn:hover{ transform:translateY(-2px); box-shadow:var(--sr-sombra); }
.sr-consola-btn:active{ transform:translateY(0); }

/* azul del comercio + letras amarillas */
.sr-consola-btn.sr-azul{ background:var(--sr-azul); color:var(--sr-amarillo); border-color:var(--sr-azul-osc); }
.sr-consola-btn.sr-azul:hover{ background:var(--sr-azul-osc); }
/* rojo para Falero TV */
.sr-consola-btn.sr-rojo{ background:var(--sr-rojo); color:#fff; border-color:#dc2626; }
/* verde para WhatsApp */
.sr-consola-btn.sr-verde{ background:var(--sr-verde); color:#fff; border-color:#15803d; }
/* amarillo para catálogo (por si se prefiere al revés) */
.sr-consola-btn.sr-amarillo{ background:var(--sr-amarillo); color:#1e293b; border-color:#d97706; }

/* ══════════════════════════════════════════════════════════════════════════
   3) BUSCADOR — vive en la barra del logo. Borde gris más oscuro y delicado,
      para que el borde azul de foco se note al tocarlo.
   ══════════════════════════════════════════════════════════════════════════ */
.sr-header-busca-slot{ position:relative; flex:1 1 auto; min-width:0; max-width:640px; margin:0 12px; }

.sr-header-busca{
  display:flex; align-items:center; gap:9px;
  background:var(--sr-gris-fondo);
  border:1.5px solid var(--sr-gris-borde);        /* antes casi invisible */
  border-radius:999px; padding:9px 16px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}
.sr-header-busca:hover{ border-color:var(--sr-gris-borde-fuerte); }
.sr-header-busca:focus-within{                    /* el borde azul del toque */
  background:#fff;
  border-color:var(--sr-azul);
  box-shadow:0 0 0 3px rgba(37,99,235,.18), inset 0 1px 2px rgba(15,23,42,.04);
}
.sr-header-busca i{ color:#64748b; font-size:.95rem; }
.sr-header-busca input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font-size:.95rem; color:#0f172a;
}
.sr-header-busca input::placeholder{ color:#7c8798; }

.sr-hero-resultados{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60;
  max-height:62vh; overflow-y:auto;                 /* que el teclado no tape la lista */
  background:#fff; border:1px solid #e2e8f0; border-radius:16px;
  box-shadow:0 18px 40px rgba(15,23,42,.22); padding:6px;
}
.sr-resultado{ display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:11px; cursor:pointer; }
.sr-resultado:hover{ background:var(--sr-gris-fondo); }
.sr-resultado img{ width:44px; height:44px; object-fit:cover; border-radius:9px; background:#e2e8f0; }
.sr-resultado strong{ display:block; font-size:.9rem; color:#0f172a; }
.sr-resultado span{ font-size:.82rem; color:var(--sr-azul); font-weight:700; }
@media (max-width:640px){
  .sr-header-busca-slot{ margin:0 6px; }
  .sr-hero-resultados{ max-height:62vh; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4) BARRA DE CATEGORÍAS (pie) — arrastrable en PC y celular
   ══════════════════════════════════════════════════════════════════════════ */
#sr-bottom-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:850;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  border-top:1px solid #e2e8f0; box-shadow:0 -6px 18px rgba(15,23,42,.08);
}
body.sr-con-barra{ padding-bottom:var(--sr-bar-h); }

.sr-menu-wrap{ overflow:hidden; }
.sr-pills{
  display:flex; gap:8px; align-items:center; padding:10px 14px;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;            /* CLAVE: el arrastre no debe animarse */
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-x;              /* el navegador cede el gesto horizontal */
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
}
.sr-pills::-webkit-scrollbar{ display:none; }
.sr-pills.sr-arrastrando{ cursor:grabbing; scroll-behavior:auto; }
.sr-pills.sr-arrastrando *{ pointer-events:none; }   /* no se activa ningún enlace al arrastrar */

.sr-pill{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  padding:9px 15px; border-radius:999px; text-decoration:none;
  background:var(--sr-gris-fondo); color:#334155; font-weight:600; font-size:.88rem;
  border:1.5px solid transparent;
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.sr-pill:hover{ background:#e2e8f0; }
.sr-pill.active,
.sr-pill.sr-pill-activo{
  background:var(--sr-azul); color:#fff; border-color:var(--sr-azul-osc);
  box-shadow:0 4px 12px rgba(37,99,235,.30);
}
.sr-pill-n{
  background:rgba(15,23,42,.10); color:inherit; font-size:.74rem; font-weight:800;
  padding:1px 7px; border-radius:999px;
}
.sr-pill.active .sr-pill-n,
.sr-pill.sr-pill-activo .sr-pill-n{ background:var(--sr-amarillo); color:#1e293b; }

/* ══════════════════════════════════════════════════════════════════════════
   5) TARJETAS DE PRODUCTO — botón Sumar
   ══════════════════════════════════════════════════════════════════════════ */
.sr-card-add{
  display:flex; align-items:center; gap:7px; justify-content:center;
  width:100%; margin-top:10px; padding:10px 12px; border:0; cursor:pointer;
  border-radius:12px; font-weight:800; font-size:.9rem;
  background:var(--sr-azul); color:var(--sr-amarillo);
  transition:background .16s ease, transform .16s ease;
}
.sr-card-add:hover{ background:var(--sr-azul-osc); transform:translateY(-1px); }
.sr-card-add.sr-sumado{ background:var(--sr-verde); color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   6) CARRITO — es de PEDIDOS: pago, nombre, dirección, envío sin cargo
   ══════════════════════════════════════════════════════════════════════════ */
#sr-carrito-drawer{ position:fixed; inset:0; z-index:1200; pointer-events:none; }
#sr-carrito-drawer.sr-drawer-abierto{ pointer-events:auto; }
#sr-carrito-drawer .sr-drawer-overlay{
  position:absolute; inset:0; background:rgba(2,6,23,.55);
  opacity:0; transition:opacity .28s ease;
}
#sr-carrito-drawer.sr-drawer-abierto .sr-drawer-overlay{ opacity:1; }
#sr-carrito-drawer .sr-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(440px,100%);
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .3s ease;
  box-shadow:-18px 0 44px rgba(2,6,23,.28);
}
#sr-carrito-drawer.sr-drawer-abierto .sr-drawer-panel{ transform:translateX(0); }
.sr-drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; border-bottom:1px solid #e2e8f0; font-size:1.05rem;
}
.sr-drawer-header button{ border:0; background:transparent; font-size:1.15rem; cursor:pointer; color:#64748b; }
.sr-drawer-body{ flex:1 1 auto; overflow-y:auto; padding:14px 18px; }
.sr-drawer-footer{
  border-top:1px solid #e2e8f0; padding:14px 18px; max-height:66vh; overflow-y:auto;
  background:#fbfdff;
}
.sr-carrito-vacio{ text-align:center; color:#64748b; padding:44px 12px; }
.sr-carrito-vacio span{ font-size:2.6rem; display:block; margin-bottom:10px; }

.sr-carrito-item{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid #eef2f7; }
.sr-carrito-item img{ width:62px; height:62px; object-fit:cover; border-radius:11px; background:#e2e8f0; }
.sr-carrito-item-info{ flex:1 1 auto; min-width:0; }
.sr-carrito-item-info strong{ display:block; font-size:.92rem; color:#0f172a; }
.sr-carrito-precio{ color:var(--sr-azul); font-weight:800; font-size:.9rem; }
.sr-carrito-controles{ display:flex; align-items:center; gap:8px; margin-top:7px; }
.sr-carrito-controles button{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--sr-gris-borde);
  background:#fff; cursor:pointer; font-weight:800; color:#334155;
}
.sr-carrito-controles span{ min-width:22px; text-align:center; font-weight:800; }
.sr-carrito-controles .sr-quitar{ width:auto; padding:0 9px; border-color:#fecaca; background:#fef2f2; }

.sr-carrito-total{ font-size:.92rem; color:#334155; margin-bottom:12px; line-height:1.9; }
.sr-envio-gratis{
  display:inline-block; background:#dcfce7; color:#15803d; font-weight:800;
  font-size:.78rem; padding:3px 10px; border-radius:999px;
}
.sr-pedido-datos{ display:grid; gap:10px; margin-bottom:12px; }
.sr-campo{ display:grid; gap:5px; }
.sr-campo span{ font-size:.82rem; font-weight:700; color:#475569; }
.sr-campo input{
  width:100%; padding:10px 13px; border-radius:11px;
  border:1.5px solid var(--sr-gris-borde); background:#fff; font-size:.92rem; outline:0;
}
.sr-campo input:focus{ border-color:var(--sr-azul); box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.sr-campo-titulo{ font-size:.82rem; font-weight:700; color:#475569; margin-top:2px; }

.sr-pago-opciones{ display:grid; grid-template-columns:1fr; gap:8px; }
.sr-pago-opcion{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1.5px solid var(--sr-gris-borde); border-radius:12px; padding:11px 13px;
  font-size:.92rem; font-weight:600; color:#334155; background:#fff;
}
.sr-pago-opcion:has(input:checked){ border-color:var(--sr-azul); background:#eff6ff; color:var(--sr-azul-osc); }
.sr-pago-opcion input{ accent-color:var(--sr-azul); width:17px; height:17px; }

.sr-pedido-aviso{
  background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
  font-size:.85rem; font-weight:600; padding:9px 12px; border-radius:11px; margin-bottom:10px;
}
.sr-btn-wa{
  width:100%; padding:14px; border:0; border-radius:13px; cursor:pointer;
  background:var(--sr-verde); color:#fff; font-weight:800; font-size:1rem;
  box-shadow:0 6px 16px rgba(22,163,74,.30);
}
.sr-btn-wa:hover{ background:#15803d; }
.sr-btn-vaciar{
  width:100%; margin-top:9px; padding:10px; border-radius:11px; cursor:pointer;
  background:transparent; border:1.5px solid #e2e8f0; color:#64748b; font-weight:700; font-size:.86rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   7) FLOTANTES — TV (rojo) y WhatsApp (verde) por encima de la barra
   ══════════════════════════════════════════════════════════════════════════ */
.whatsapp-fab{ right:18px !important; bottom:calc(var(--sr-bar-h) + 86px) !important; z-index:900 !important; }
#sr-tv-fab{    right:18px !important; bottom:calc(var(--sr-bar-h) + 18px) !important; z-index:901 !important; }
.sr-btn-arriba{
  right:18px !important; bottom:calc(var(--sr-bar-h) + 154px) !important; z-index:902 !important;
  background:var(--sr-azul) !important; color:var(--sr-amarillo) !important;
}
@media (max-width:640px){
  .whatsapp-fab{ bottom:calc(var(--sr-bar-h) + 78px) !important; }
  #sr-tv-fab{ bottom:calc(var(--sr-bar-h) + 14px) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8) TV — reproductor 16:9 responsivo
   ══════════════════════════════════════════════════════════════════════════ */
#sr-tv-player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
#sr-tv-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ══════════════════════════════════════════════════════════════════════════
   9) BOTONES DE CATÁLOGO PDF
   ══════════════════════════════════════════════════════════════════════════ */
.generate-pdf-btn, .sr-pdf-btn{
  background:var(--sr-rojo) !important; color:#fff !important;
  font-weight:800; border:0; border-radius:999px; padding:12px 22px; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}
.generate-pdf-btn:hover, .sr-pdf-btn:hover{ transform:translateY(-2px); box-shadow:var(--sr-sombra); }


/* ── CARDS DE PRODUCTO: sombra y botón (fix v7.3) ──────────────────
   Antes: gradiente subía al 55% y tapaba la foto.
          El botón sr-card-add flotaba encima del precio.
   Ahora: gradiente arranca en el 65%, letras y precio siempre visibles,
          botón pegado al fondo sin tapar nada.
   ─────────────────────────────────────────────────────────────────── */

/* Sombra corregida: solo el 35% inferior */
.slide-card-overlay {
  background: linear-gradient(
    to top,
    rgba(2,6,23,.88) 0%,
    rgba(2,6,23,.65) 35%,
    rgba(2,6,23,.15) 65%,
    transparent     100%
  ) !important;
  padding-bottom: 52px !important;   /* deja espacio para el botón */
  z-index: 2 !important;
}

/* Botón Sumar: ancho completo pegado al fondo, no tapa precio */
.slide-card .sr-card-add {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 44px !important;
  border-radius: 0 0 16px 16px !important;
  padding: 0 !important;
  justify-content: center !important;
  z-index: 3 !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   v7.8 · SLOGAN EN EL HEADER (debajo del nombre, no modifica el ancho)
   ══════════════════════════════════════════════════════════════════════ */
.sr-brand-textos{
  display:flex; flex-direction:column; min-width:0;
  line-height:1.1;
}
.sr-brand-name{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:800; font-size:1rem;
}
.sr-brand-slogan{
  font-size:.7rem; font-weight:500; opacity:.72; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; color:inherit;
  margin-top:1px;
}
@media (max-width:480px){
  .sr-brand-slogan{ display:none; }   /* en móvil muy pequeño se oculta para no comprimir */
}

/* ══════════════════════════════════════════════════════════════════════
   v7.8 · BOTÓN COMPARTIR EN CARDS DE PRODUCTO (WhatsApp deep-link)
   ══════════════════════════════════════════════════════════════════════ */
.sr-card-share{
  position:absolute; top:8px; right:8px; z-index:4;
  width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(22,163,74,.88); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; opacity:0; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.slide-card:hover .sr-card-share,
.slide-card:focus-within .sr-card-share{ opacity:1; }
.sr-card-share:hover{ transform:scale(1.12); background:rgba(22,163,74,1); }
/* en móvil siempre visible */
@media (max-width:640px){ .sr-card-share{ opacity:.85; } }

/* ══════════════════════════════════════════════════════════════════════
   v7.7 · TEXTOS Y BOTÓN DE OFERTA SOBRE EL BANNER DEL HERO
   El comerciante los escribe en el admin (Comercio -> Fotos del Hero).
   Todo es opcional: sin textos, el banner queda solo con la foto.
   ══════════════════════════════════════════════════════════════════════ */
.sr-hero-foto { display: flex; align-items: flex-end; justify-content: flex-start; }
.sr-hero-info {
  position: relative; z-index: 3; max-width: 640px;
  margin: 0 0 6vh 5vw;
  text-align: left; pointer-events: none;
}
.sr-hero-info .sr-hero-titulo {
  margin: 0 0 6px; color: #fff; font-weight: 900; line-height: 1.08;
  font-size: clamp(1.35rem, 4.2vw, 2.9rem);
  text-shadow: 0 2px 14px rgba(0,0,0,.78), 0 0 3px rgba(0,0,0,.9);
}
.sr-hero-info .sr-hero-sub {
  margin: 0 0 14px; color: #fde68a; font-weight: 800; line-height: 1.25;
  font-size: clamp(.95rem, 2.1vw, 1.35rem);
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
}
.sr-hero-info .sr-hero-cta {
  pointer-events: auto; display: inline-block;
  background: #fbbf24; color: #111827 !important; font-weight: 900;
  padding: 11px 22px; border-radius: 999px; text-decoration: none;
  font-size: clamp(.85rem, 1.7vw, 1.05rem);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.sr-hero-info .sr-hero-cta:hover { background: #fff; transform: translateY(-2px); }
.sr-hero-info .sr-hero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  .sr-hero-info { margin: 0 0 4vh 4vw; max-width: 90%; }
  .sr-hero-info .sr-hero-cta { padding: 10px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v7.9 — ARREGLOS DEL REPORTE DEL COMERCIANTE
   1) Hero: la capa de textos tapaba el botón de cada banner y los puntos.
   2) Catálogo: grilla densa mobile-first (muchos productos, imagen chica,
      precio grande) + banner de categoría opcional.
   3) Carrito: badge visible (cantidad) y total acumulado.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) HERO — el botón de cada banner y los puntos quedan clickeables ─────── */
#hero-section .sr-hero-slider{ z-index:2; }
#hero-section .sr-hero-foto{ pointer-events:none; }
#hero-section .sr-hero-info{ pointer-events:none; }
#hero-section .sr-hero-info .sr-hero-cta{
  pointer-events:auto; cursor:pointer; position:relative; z-index:5;
}
#hero-section .sr-hero-puntos{ z-index:6; pointer-events:auto; }
#hero-section .sr-hero-puntos button{ pointer-events:auto; }

/* 2) BANNER DE CATEGORÍA (opcional: lo carga el comerciante en el admin) ── */
.sr-cat-banner{
  border-radius:16px; overflow:hidden; margin-bottom:14px; background:#0f172a;
}
.sr-cat-banner img{ width:100%; height:auto; max-height:280px; object-fit:cover; display:block; }

/* 3) GRILLA DENSA DE PRODUCTOS (mobile-first) ──────────────────────────── */
.sr-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(146px, 1fr));
}
@media (max-width:400px){ .sr-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } }
@media (min-width:1024px){ .sr-grid{ grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:14px; } }

.sr-pcard{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px rgba(15,23,42,.06); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}
.sr-pcard:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.14); }
.sr-pcard-img{
  position:relative; width:100%; aspect-ratio:1/1; background:#f1f5f9;
  display:flex; align-items:center; justify-content:center;
}
.sr-pcard-img img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.sr-pcard-info{ padding:8px 9px 0; display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }
.sr-pcard-nombre{
  font-size:.82rem; line-height:1.25; font-weight:700; color:#1f2937; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.1em;
}
.sr-pcard-precio{ font-size:.95rem; font-weight:900; color:#2563eb; margin:0 0 8px; }
.sr-pcard-add{
  margin-top:auto; width:100%; height:38px; border:0; border-radius:0;
  background:#2563eb; color:#fff; font-weight:800; font-size:.82rem;
  display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
}
.sr-pcard-add:hover{ background:#1d4ed8; }
.sr-grid-mas-wrap{ display:flex; justify-content:center; margin-top:16px; }
.sr-grid-mas{
  background:#fff; border:2px solid #2563eb; color:#2563eb; font-weight:800;
  padding:11px 22px; border-radius:999px; cursor:pointer;
}
.sr-grid-mas:hover{ background:#2563eb; color:#fff; }

/* 4) BADGE DEL CARRITO visible cuando hay productos ───────────────────── */
.cart-badge.show{ transform:scale(1) !important; }

/* 5) TOTAL DEL PEDIDO EN EL CARRITO ──────────────────────────────────── */
.sr-carrito-total .sr-total-linea{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:.95rem; font-weight:800; color:#0f172a; margin-bottom:4px;
}
.sr-carrito-total .sr-total-nota{
  display:block; font-size:.74rem; color:#64748b; font-weight:600;
  line-height:1.35; margin:2px 0 6px;
}
.sr-carrito-sub{ display:block; font-size:.78rem; color:#475569; font-weight:700; margin-top:2px; }
.sr-copiar-link{
  width:100%; margin-top:8px; padding:11px; border-radius:11px; cursor:pointer;
  background:#fff; border:1.5px solid #cbd5e1; color:#334155; font-weight:700; font-size:.86rem;
}
.sr-copiar-link:hover{ background:#f1f5f9; }