/* ===== Layout general ===== */
.scrpc-product-page{max-width:1200px;margin:0 auto;padding:20px;position:relative;z-index:1;display:flex;gap:20px}
.scrpc-filters-column{flex:0 0 250px}
.scrpc-filters{display:flex;flex-direction:column;gap:16px;background:#f9f9f9;padding:15px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.08);position:sticky;top:20px}
.scrpc-filters .form-field{margin-bottom:6px}
.scrpc-filters label{display:block;margin-bottom:6px;font-weight:600;color:#333}
.scrpc-filters select,.scrpc-filters input{width:100%;padding:8px;border:1px solid #ddd;border-radius:6px;font-size:14px}
.scrpc-filters select:focus,.scrpc-filters input:focus{border-color:#eb1f0f;outline:none}
.scrpc-filters .button{padding:10px 16px;border-radius:20px;cursor:pointer;font-weight:700}
.scrpc-filters .button-primary{background:#eb1f0f;color:#fff}
.scrpc-filters .button-primary:hover{background:#c81b0b}

/* ===== Grid de productos ===== */
.scrpc-products-column{flex:1}
.scrpc-product-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.scrpc-product-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.scrpc-product-list{grid-template-columns:1fr}}

.scrpc-product-item{border:1px solid #eee;border-radius:12px;background:#fff;transition:box-shadow .18s ease}
.scrpc-product-item:hover{box-shadow:0 6px 16px rgba(0,0,0,.08)}
.product-content{padding:12px}
.product-image{position:relative;border:1px solid #eee;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;height:220px;margin-bottom:10px;overflow:hidden}
.product-image img{max-width:100%;max-height:100%;object-fit:contain}

/* ===== Botones flotantes: centrados verticalmente, tamaño fijo ===== */
.scrpc-iconstack{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:2
}
.scrpc-icbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid #ddd;background:#fff;border-radius:10px;
  cursor:pointer;color:#222;transition:box-shadow .12s ease, transform .12s ease, border-color .12s ease;
  text-decoration:none
}
.scrpc-icbtn .scrpc-ico{width:20px;height:20px}
.scrpc-icbtn:hover{box-shadow:0 2px 8px rgba(0,0,0,.10);transform:scale(1.02);border-color:#eb1f0f;color:#eb1f0f}
.scrpc-icbtn[data-variant="primary"]{background:#eb1f0f;border-color:#eb1f0f;color:#fff}
.scrpc-icbtn[data-variant="primary"]:hover{filter:brightness(1.04);color:#fff}
.scrpc-icbtn .scrpc-tip{
  pointer-events:none;position:absolute;right:110%;top:50%;transform:translateY(-50%);
  background:#222;color:#fff;font-size:12px;padding:6px 8px;border-radius:6px;white-space:nowrap;
  opacity:0;transition:opacity .12s ease, transform .12s ease;box-shadow:0 4px 12px rgba(0,0,0,.15)
}
.scrpc-icbtn .scrpc-tip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:#222}
.scrpc-icbtn:hover .scrpc-tip{opacity:1;transform:translate(-2px,-50%)}

/* ===== Títulos ===== */
.product-details h3{font-size:16px;margin:8px 0 0;min-height:40px;color:#333;text-align:center}

/* ===== Modales ===== */
.crud-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:9990}
.crud-modal .modal-content{background:#fff;border-radius:12px;max-width:980px;margin:40px auto;padding:16px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:8px}
.modal-header h2{font-size:20px;margin:0}
.modal-header .close{cursor:pointer;font-size:22px}
.modal-body{padding:12px 0;overflow:hidden}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid #eee;padding-top:10px;background:#fff;position:sticky;bottom:0}

/* Grid dentro del modal */
.scrpc-modal-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-bottom:8px}
@media (max-width:900px){.scrpc-modal-grid{grid-template-columns:1fr}}

/* ===== Galería (general) ===== */
.scrpc-gallery .scrpc-hero{position:relative;border:1px solid #eee;border-radius:14px;background:#fff;padding:10px;margin-bottom:10px}
.scrpc-hero-inner{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.scrpc-hero img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.scrpc-gallery .nav{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ddd;border-radius:10px;padding:6px 10px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.scrpc-gallery .nav.prev{left:10px}.scrpc-gallery .nav.next{right:10px}
.scrpc-thumbs{display:flex;gap:10px;overflow-x:auto;margin-top:10px;padding:2px 0 8px}
.scrpc-thumbs img{width:86px;height:86px;object-fit:contain;border:1px solid #eee;border-radius:10px;padding:4px;background:#fff;cursor:pointer;opacity:.85;transition:.12s}
.scrpc-thumbs img.active,.scrpc-thumbs img:hover{opacity:1;border-color:#eb1f0f}

/* ===== Ajuste ESPECÍFICO para MODALES (tamaño proporcional y sin desborde) ===== */
.crud-modal .scrpc-hero-inner{
  /* Altura fija proporcional que no crece de más ni tapa miniaturas */
  height: clamp(200px, 38vh, 300px);
  aspect-ratio: unset;               /* el clamp manda sobre el ancho */
}
.crud-modal .scrpc-hero{padding:8px;margin-bottom:8px}
.crud-modal .scrpc-hero img{width:100%;height:100%;object-fit:contain}
.crud-modal .scrpc-thumbs{margin-top:8px;position:relative;z-index:1}
.crud-modal .scrpc-thumbs img{width:72px;height:72px}
@media (max-width:900px){
  .crud-modal .scrpc-hero-inner{height: clamp(180px, 36vh, 260px)}
  .crud-modal .scrpc-thumbs img{width:64px;height:64px}
}

/* Cantidad / ficha */
.quantity-input{width:90px;padding:6px;border:1px solid #ddd;border-radius:8px}
.scrpc-qtylabel{display:inline-block;margin:10px 8px 10px 0}
.scrpc-ficha-below .button,
.scrpc-ficha-under .button{display:inline-flex;align-items:center;gap:8px;background:#eb1f0f;color:#fff;border:0;border-radius:10px;padding:10px 14px}
.scrpc-ficha-below .button:hover,.scrpc-ficha-under .button:hover{background:#c81b0b}

/* Pestañas */
.modal-tabs{display:flex;gap:8px;margin-top:6px}
.modal-tab{padding:8px 12px;border:1px solid #ddd;border-radius:8px;cursor:pointer;background:#fafafa}
.modal-tab.active{border-color:#eb1f0f;color:#eb1f0f;background:#fff}
.modal-tab-content{display:none;padding:15px;max-height:46vh;overflow:auto;scroll-behavior:smooth}
.modal-tab-content.active{display:block}

/* Notificación */
.scrpc-notification{position:fixed;right:20px;top:20px;background:#1a1a1a;color:#fff;padding:10px 14px;border-radius:10px;z-index:99999;display:none}
.scrpc-notification.success{background:#218838}
.scrpc-notification.error{background:#c82333}

/* Flotante cotización */
.scrpc-quote-button{position:fixed;right:16px;bottom:18px;background:#eb1f0f;color:#fff;border-radius:999px;padding:10px 16px;box-shadow:0 8px 20px rgba(0,0,0,.2);cursor:pointer;z-index:9991;font-weight:700}

/* Single */
.scrpc-single{max-width:1120px;margin:10px auto 30px}
.scrpc-grid{display:grid;grid-template-columns:520px 1fr;gap:28px}
@media (max-width:1080px){.scrpc-grid{grid-template-columns:1fr}}
.scrpc-desc-corta,.scrpc-desc-larga{line-height:1.6}
.scrpc-single-actions{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.scrpc-single-actions input{width:90px;padding:6px;border:1px solid #ddd;border-radius:8px}
.scrpc-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#fff;color:#111;text-decoration:none}
.scrpc-btn:hover{border-color:#eb1f0f;color:#eb1f0f}

/* Lightbox */
.scrpc-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;z-index:9999;align-items:center;justify-content:center}
.scrpc-lightbox.open{display:flex}
.scrpc-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px;background:#111}
.scrpc-lightbox .lb-close{position:absolute;top:16px;right:16px;font-size:18px;border-radius:10px;border:1px solid #666;background:#222;color:#fff;padding:8px 10px;cursor:pointer}
.scrpc-lightbox .lb-prev,.scrpc-lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);font-size:22px;border-radius:10px;border:1px solid #666;background:#222;color:#fff;padding:8px 12px;cursor:pointer}
.scrpc-lightbox .lb-prev{left:18px}.scrpc-lightbox .lb-next{right:18px}

/* Relacionados */
.scrpc-related-wrap{margin:24px auto;max-width:1120px}
.scrpc-rel-track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px}
.scrpc-rel-card{min-width:220px;max-width:220px;background:#fff;border:1px solid #eee;border-radius:10px;padding:10px;flex:0 0 auto;position:relative}
.scrpc-rel-card img{width:100%;height:140px;object-fit:contain;background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:6px}
.scrpc-rel-title{margin:8px 0 6px;font-size:14px;line-height:1.25;height:36px;overflow:hidden}
.scrpc-rel-btn{border:1px solid #ddd;background:#fafafa;border-radius:6px;padding:6px 10px;cursor:pointer}