/* ═══════════════════════════════════════════════════════════════
   IMPRENET · Autogestión Tienda — E-commerce Storefront CSS
   Mobile-first, light theme, Tienda Nube-inspired
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#f5f5f5;color:#212529;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ─── Variables ─── */
:root{
  --bg:#f5f5f5;
  --bg-white:#ffffff;
  --text:#212529;
  --text-dim:#6c757d;
  --text-muted:#adb5bd;
  --border:#dee2e6;
  --border-light:#e9ecef;
  --accent:#00a650;
  --accent-hover:#008f45;
  --accent-light:rgba(0,166,80,.08);
  --dark:#212529;
  --dark-hover:#343a40;
  --danger:#dc3545;
  --warning:#f59e0b;
  --info:#0ea5e9;
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 1px 4px rgba(0,0,0,.08);
  --shadow:0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --transition:all .2s ease;
  --header-h:60px;
}

/* ─── Container ─── */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ═══ ANNOUNCEMENT BAR ═══ */
.announce-marquee{
  background:#00a650;color:#fff;overflow:hidden;white-space:nowrap;
  font-size:.82rem;font-weight:600;position:relative;
}
.marquee-track{
  display:inline-flex;animation:marquee-scroll 25s linear infinite;
}
.marquee-content{
  padding:9px 32px;display:inline-block;
}
.marquee-content::before{
  content:'✦  ';opacity:.6;
}
.marquee-content::after{
  content:'  ✦';opacity:.6;
}
@keyframes marquee-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
/* marquee never pauses — continuous scroll */

/* ═══ HEADER ═══ */
.site-header{
  background:var(--bg-white);
  border-bottom:1px solid var(--border-light);
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  box-shadow:var(--shadow-xs);
}
.header-inner{
  display:flex;align-items:center;gap:16px;
  height:var(--header-h);max-width:1200px;
  margin:0 auto;padding:0 20px;
}
.site-logo{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:1.15rem;color:var(--text);
  flex-shrink:0;cursor:pointer;
}
.site-logo .logo-icon{
  width:34px;height:34px;border-radius:8px;
  background:var(--accent);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:.9rem;font-weight:800;
}
.main-nav{display:flex;gap:24px;margin-left:32px;flex:1}
.nav-link{
  font-size:.875rem;font-weight:500;color:var(--text-dim);
  padding:4px 0;position:relative;transition:var(--transition);
  cursor:pointer;background:none;border:none;
}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:2px;background:var(--accent);border-radius:2px;
}
.header-search{
  flex:1;max-width:320px;position:relative;
}
.header-search input{
  width:100%;padding:8px 36px 8px 14px;border:1px solid var(--border);
  border-radius:24px;font-size:.85rem;background:var(--bg);
  transition:var(--transition);outline:none;
}
.header-search input:focus{border-color:var(--accent);background:var(--bg-white)}
.header-search .search-icon{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:.9rem;pointer-events:none;
}
.header-actions{display:flex;gap:12px;align-items:center}
.header-btn{
  width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:1.05rem;
  transition:var(--transition);position:relative;color:var(--text-dim);
}
.header-btn:hover{background:var(--bg);color:var(--text)}
.cart-badge{
  position:absolute;top:2px;right:0;background:var(--danger);color:#fff;
  font-size:.6rem;font-weight:700;width:17px;height:17px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg-white);
}
.cart-badge:empty,.cart-badge[data-count="0"]{display:none}
.user-name{
  font-size:.78rem;font-weight:600;color:var(--text-dim);
  max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mobile-menu-btn{display:none;font-size:1.3rem;color:var(--text)}
.header-login-link{
  display:flex;align-items:center;gap:6px;text-decoration:none;
  font-size:.82rem;font-weight:600;color:var(--text-dim);
  padding:6px 14px;border-radius:20px;border:1px solid var(--border);
  transition:all .2s;white-space:nowrap;
}
.header-login-link:hover{background:var(--bg);color:var(--text);border-color:var(--accent)}
.header-login-link i{font-size:1rem}

/* ═══ HERO BANNER ═══ */
.hero-banner{
  padding:48px 0;text-align:center;color:#fff;
  margin-bottom:0;
}
.hero-title{font-size:1.85rem;font-weight:800;margin-bottom:10px;letter-spacing:-.5px;text-shadow:0 1px 4px rgba(0,0,0,.15)}
.hero-subtitle{font-size:.95rem;color:rgba(255,255,255,.9);max-width:480px;margin:0 auto;text-shadow:0 1px 2px rgba(0,0,0,.1)}

/* ═══ SECTION ═══ */
.page-section{padding:0 0 40px}
.section-title{
  font-size:1.2rem;font-weight:700;margin-bottom:20px;
  display:flex;align-items:center;gap:8px;
}

/* ═══ CAROUSEL LAYOUT ═══ */
.carousel-wrap{
  position:relative;
  overflow:hidden;
}
.carousel-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track .product-card,
.carousel-track .trabajos-card{
  flex:0 0 calc(25% - 15px);
  scroll-snap-align:start;
  min-width:0;
}
.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:1.1rem;
  color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  transition:all .2s;
}
.carousel-arrow:hover{
  background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  color:var(--accent);
}
.carousel-arrow-left{left:-4px}
.carousel-arrow-right{right:-4px}

/* Trabajos card inside carousel */
.trabajos-card{
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  background:#f0f0f0;
  aspect-ratio:1;
  transition:transform .2s,box-shadow .2s;
}
.trabajos-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.trabajos-card img{
  width:100%;height:100%;object-fit:cover;display:block;
}

@media(max-width:1024px){
  .carousel-track .product-card,
  .carousel-track .trabajos-card{
    flex:0 0 calc(33.333% - 14px);
  }
}
@media(max-width:768px){
  .carousel-track .product-card,
  .carousel-track .trabajos-card{
    flex:0 0 calc(50% - 10px);
  }
  .carousel-arrow{width:34px;height:34px;font-size:.9rem}
}
@media(max-width:480px){
  .carousel-track{gap:12px}
  .carousel-track .product-card,
  .carousel-track .trabajos-card{
    flex:0 0 calc(50% - 6px);
  }
}

/* ═══ PRODUCT GRID ═══ */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}
.product-card{
  background:var(--bg-white);border-radius:var(--radius);
  overflow:hidden;transition:transform .4s ease,box-shadow .4s ease,opacity .6s ease;
  cursor:pointer;border:1px solid var(--border-light);
  opacity:0;transform:translateY(30px);
}
.product-card.revealed{
  opacity:1;transform:translateY(0);
}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card-img{
  position:relative;aspect-ratio:1;overflow:hidden;
  background:#fafafa;display:flex;align-items:center;justify-content:center;
}
.card-img img{width:80%;height:80%;object-fit:contain;transition:transform .3s}
.product-card:hover .card-img img{transform:scale(1.05)}
.card-badge{
  position:absolute;top:10px;left:10px;
  background:var(--accent);color:#fff;
  font-size:.68rem;font-weight:600;padding:4px 10px;border-radius:20px;
}
.card-body{padding:14px 16px}
.card-title{font-size:.88rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.card-price{font-size:1.05rem;font-weight:700;color:var(--text)}
.card-min{font-size:.72rem;color:var(--text-muted);margin-top:4px}

/* ═══ CATEGORY FILTER ═══ */
.category-filter{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.cat-chip{
  display:inline-flex;align-items:center;padding:8px 18px;
  border-radius:20px;font-size:.85rem;font-weight:600;
  background:var(--bg-white);color:var(--text-dim);
  border:1px solid var(--border);cursor:pointer;
  transition:var(--transition);white-space:nowrap;
}
.cat-chip:hover{border-color:var(--accent);color:var(--accent)}
.cat-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ═══ BREADCRUMB ═══ */
.breadcrumb{
  display:flex;gap:6px;font-size:.8rem;color:var(--text-dim);
  margin-bottom:20px;flex-wrap:wrap;align-items:center;padding-top:20px;
}
.breadcrumb a{color:var(--text-dim);transition:var(--transition)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:var(--text-muted);font-size:.7rem}
.breadcrumb .current{color:var(--text);font-weight:500}

/* ═══ DETAIL LAYOUT ═══ */
.detail-layout{
  display:grid;grid-template-columns:90px 1fr 1fr;gap:24px;
  align-items:start;padding-bottom:60px;
}

/* ═══ LEFT SIDEBAR — Other products strip ═══ */
.detail-sidebar{
  position:sticky;top:calc(var(--header-h) + 16px);
  max-height:calc(100vh - var(--header-h) - 40px);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
}
.gt-strip{display:flex;flex-direction:column;gap:6px}
.gt-card{
  width:100%;border:2px solid var(--border-light);
  border-radius:var(--radius-sm);padding:6px 4px 5px;text-align:center;
  cursor:pointer;transition:var(--transition);background:var(--bg-white);
}
.gt-card:hover{border-color:var(--accent);background:var(--accent-light)}
.gt-card img{width:56px;height:56px;object-fit:contain;margin:0 auto 2px;display:block}
.gt-card .gt-name{font-size:.58rem;color:var(--text-dim);line-height:1.15;margin-bottom:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:100%;word-break:break-word}
.gt-card .gt-price{font-size:.68rem;font-weight:700;color:var(--text)}

/* ═══ CENTER — Preview + Colors ═══ */
.detail-center{position:sticky;top:calc(var(--header-h) + 16px)}

/* ═══ GARMENT PREVIEW ═══ */
.preview-main{
  position:relative;background:#f8f8f8;border-radius:var(--radius);
  overflow:visible;border:1px solid var(--border-light);
  user-select:none;max-width:100%;max-height:60vh;
  margin:0 auto;touch-action:none;
}
.preview-main .garment-img{
  max-width:100%;max-height:60vh;object-fit:contain;pointer-events:none;
  display:block;padding:8px;
}
/* Jersey images tend to be wider — remove square constraint */
.preview-main.jersey-preview{
  aspect-ratio:auto;max-height:none;
}
@media(max-width:768px){
  .preview-main.jersey-preview{max-height:50vh}
  .preview-main.jersey-preview .garment-img{max-height:48vh}
}
@media(max-width:576px){
  .preview-main.jersey-preview{max-height:42vh}
  .preview-main.jersey-preview .garment-img{max-height:40vh}
}
.logo-overlay{
  position:absolute;cursor:move;
  border:2px dashed rgba(0,0,0,.15);
  border-radius:4px;transition:border-color .15s;
  touch-action:none;z-index:5;
}
.logo-overlay:active,.logo-overlay.dragging{border-color:#16a34a}
.logo-overlay img{
  width:100%;height:auto;display:block;
  pointer-events:none;opacity:.8;
}
.logo-overlay .lo-resize{
  position:absolute;right:-6px;bottom:-6px;
  width:16px;height:16px;background:#16a34a;border-radius:50%;
  cursor:nwse-resize;border:2px solid #fff;z-index:10;
}
.logo-overlay .lo-delete{
  position:absolute;right:-8px;top:-8px;
  width:18px;height:18px;background:#dc2626;border-radius:50%;
  cursor:pointer;border:2px solid #fff;color:#fff;
  font-size:11px;line-height:14px;text-align:center;font-weight:bold;z-index:12;
}
/* Mobile: bigger touch targets for logo handles */
@media(max-width:768px){
  .logo-overlay .lo-resize{
    width:24px;height:24px;right:-10px;bottom:-10px;
    border-width:3px;
  }
  .logo-overlay .lo-delete{
    width:24px;height:24px;right:-10px;top:-10px;
    font-size:13px;line-height:18px;border-width:3px;
  }
}
.preview-side-label{
  position:absolute;top:10px;left:10px;
  font-size:.7rem;font-weight:600;color:var(--text-dim);
  background:rgba(255,255,255,.9);padding:3px 10px;border-radius:20px;
  box-shadow:var(--shadow-xs);
}

/* ─── Preview thumbnails (removed - colors shown in right panel) ─── */

/* ─── Preview controls ─── */
.preview-controls{
  margin-top:14px;background:var(--bg-white);border-radius:var(--radius);
  padding:16px;border:1px solid var(--border-light);
}
.preview-controls h4{
  font-size:.78rem;font-weight:700;color:var(--text-dim);
  margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;
}
.side-toggle{
  display:flex;gap:4px;background:var(--bg);border-radius:var(--radius-xs);
  padding:3px;margin-bottom:14px;
}
.side-toggle-btn{
  flex:1;padding:7px 14px;border-radius:var(--radius-xs);
  font-size:.8rem;font-weight:600;color:var(--text-dim);
  transition:var(--transition);text-align:center;
}
.side-toggle-btn.active{background:var(--dark);color:#fff}
.pc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.pc-field{display:flex;flex-direction:column;gap:4px}
.pc-field label{font-size:.68rem;font-weight:500;color:var(--text-muted)}
.pc-field input[type="number"]{
  width:100%;padding:6px 8px;border:1px solid var(--border);
  border-radius:var(--radius-xs);font-size:.8rem;text-align:center;
  outline:none;transition:var(--transition);
}
.pc-field input:focus{border-color:var(--accent)}
.pc-size-row{margin-top:10px;display:flex;align-items:center;gap:10px}
.pc-size-row label{font-size:.72rem;font-weight:500;color:var(--text-muted);flex-shrink:0}
.pc-size-row input[type="range"]{flex:1;accent-color:var(--accent)}
.size-val{font-size:.72rem;font-weight:600;color:var(--dark);min-width:32px;text-align:right}

/* ─── Logo nudge buttons ─── */
.pc-nudge-row{
  display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap;
}
.pc-nudge-label{font-size:.72rem;font-weight:500;color:var(--text-muted);margin-right:2px}
.pc-nudge-btn{
  width:36px;height:36px;border-radius:var(--radius-xs);
  border:1px solid var(--border);background:var(--bg-white);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--text);cursor:pointer;
  transition:var(--transition);
}
.pc-nudge-btn:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}
.pc-nudge-btn:active{background:var(--accent);color:#fff}
.pc-open-editor{
  margin-left:auto;background:var(--accent-light);border-color:var(--accent);
  color:var(--accent);font-size:.85rem;
}
.pc-open-editor:hover{background:var(--accent);color:#fff}
@media(max-width:768px){
  .pc-nudge-btn{width:42px;height:42px;font-size:1rem}
  .pc-size-row input[type="range"]{height:28px}
}

/* ─── Logo selector tabs ─── */
.logo-selector{
  display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap;
}
.logo-sel-btn{
  padding:5px 12px;border-radius:var(--radius-xs);font-size:.75rem;
  font-weight:600;background:var(--bg);color:var(--text-dim);
  transition:var(--transition);cursor:pointer;
}
.logo-sel-btn.active{background:var(--accent);color:#fff}
.logo-sel-btn:hover{background:var(--accent-light);color:var(--accent)}
.logo-sel-btn.active:hover{background:var(--accent);color:#fff}

/* ─── Logo list items ─── */
.logo-count-hint{font-size:.72rem;font-weight:400;color:var(--text-muted)}
.logo-list-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--bg-white);border:1px solid var(--border-light);
  border-radius:var(--radius-xs);margin-bottom:8px;cursor:pointer;
  transition:var(--transition);
}
.logo-list-item:hover{border-color:var(--accent);box-shadow:var(--shadow-xs)}
.logo-list-item.selected{border-color:var(--accent);background:var(--accent-light)}
.logo-list-thumb{
  width:40px;height:40px;border-radius:6px;object-fit:contain;
  background:#f5f5f5;border:1px solid var(--border-light);flex-shrink:0;
}
.logo-list-thumb-placeholder{
  width:40px;height:40px;border-radius:6px;background:#f5f5f5;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-light);flex-shrink:0;
  font-size:1.2rem;color:var(--text-muted);
}
.logo-list-info{flex:1;min-width:0}
.logo-list-name{font-size:.8rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-list-size{font-size:.7rem;color:var(--text-muted)}
.logo-list-remove{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--text-muted);font-size:.75rem;
  transition:var(--transition);flex-shrink:0;background:transparent;
}
.logo-list-remove:hover{background:#fee2e2;color:#dc2626}
.pc-size-row .size-val{font-size:.75rem;font-weight:600;width:40px;text-align:right}

/* ═══ DETAIL INFO (right panel) ═══ */
.detail-info{max-width:100%}
.detail-name{font-size:1.5rem;font-weight:800;margin-bottom:4px;line-height:1.2;letter-spacing:-.3px}
.detail-category{font-size:.82rem;color:var(--text-dim);margin-bottom:12px}
.detail-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.price-current{font-size:1.7rem;font-weight:800;color:var(--text)}
.price-original{font-size:.95rem;color:var(--text-muted);text-decoration:line-through}
.price-discount{
  background:#fee2e2;color:#dc2626;font-size:.72rem;font-weight:700;
  padding:3px 8px;border-radius:4px;
}
.detail-desc{font-size:.85rem;color:var(--text-dim);margin-bottom:20px;line-height:1.6}

/* ─── Section label ─── */
.sec-label{
  font-size:.85rem;font-weight:600;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;color:var(--text);
}
.sec-label i{font-size:.85rem;color:var(--text-dim)}

/* ═══ GARMENT TYPE SELECTOR — (moved to sidebar) ═══ */
.garment-types{margin-bottom:24px}

/* ═══ COLOR SELECTOR ═══ */
.color-section{margin-bottom:20px;margin-top:16px}
.color-section-mobile{display:none}
.color-section-desktop{display:block}
.color-name-display{font-size:.82rem;color:var(--text-dim);font-weight:500;margin-left:4px}
.color-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.color-swatch{
  width:48px;height:48px;border-radius:8px;overflow:hidden;
  border:2px solid var(--border);cursor:pointer;transition:var(--transition);
  background:#f0f0f0;flex-shrink:0;position:relative;
}
.color-swatch:hover{border-color:var(--text-dim);transform:scale(1.06)}
.color-swatch.active{border-color:var(--dark);box-shadow:0 0 0 2px var(--dark)}
.color-swatch img{
  width:100%;height:100%;object-fit:cover;
}

/* ═══ SIZE / TALLE SELECTOR ═══ */
.size-section{margin-bottom:24px}
.talle-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.talle-guide-link{
  font-size:.75rem;color:var(--accent);cursor:pointer;font-weight:500;
  display:flex;align-items:center;gap:4px;
}
.talle-guide-link:hover{text-decoration:underline}
.talle-qty-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:8px}
.talle-qty-item{
  border:1px solid var(--border-light);border-radius:var(--radius-sm);
  padding:8px 4px;text-align:center;transition:var(--transition);
  background:var(--bg-white);
}
.talle-qty-item.has-qty{border-color:var(--accent);background:var(--accent-light)}
.talle-label{display:block;font-size:.72rem;font-weight:700;color:var(--text);margin-bottom:6px}
.talle-controls{display:flex;align-items:center;justify-content:center;gap:2px}
.tqc-btn{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg-white);display:flex;align-items:center;justify-content:center;
  font-size:.85rem;transition:var(--transition);color:var(--text);line-height:1;
}
.tqc-btn:hover{background:var(--bg);border-color:var(--text-dim)}
.tqc-input{
  width:38px;text-align:center;font-size:.82rem;font-weight:700;
  border:1px solid var(--border);border-radius:6px;padding:3px 2px;
  background:var(--bg-white);color:var(--text);
  -moz-appearance:textfield;
}
.tqc-input::-webkit-outer-spin-button,
.tqc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tqc-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,197,94,.15)}
.talle-unico-wrap{display:flex;justify-content:center}
.talle-unico{min-width:180px;padding:16px 20px}
.talle-unico .tqc-input{width:52px;font-size:1rem;padding:5px 4px;border-radius:8px}
.tqc-value{
  width:26px;text-align:center;font-size:.82rem;font-weight:700;color:var(--text);
}
.talle-total-bar{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding:10px 14px;background:var(--bg);
  border-radius:var(--radius-sm);font-size:.82rem;
}
.talle-total-bar .total-count{font-weight:700}
.talle-total-bar .min-label{color:var(--text-dim)}
.talle-total-bar.error{background:#fef2f2;color:var(--danger)}
.talle-total-bar.ok{background:#f0fdf4;color:var(--accent)}

/* ═══ DESCRIPCIÓN / DETALLES ═══ */
.descripcion-section{margin-bottom:24px}
.descripcion-textarea{
  width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);font-family:inherit;font-size:.9rem;
  resize:vertical;min-height:60px;transition:var(--transition);box-sizing:border-box;
}
.descripcion-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,166,80,.12)}
.descripcion-textarea::placeholder{color:var(--text-muted)}

/* ═══ LOGO UPLOAD ═══ */
.logo-section{margin-bottom:24px}
.upload-zone{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:28px 20px;text-align:center;cursor:pointer;
  transition:var(--transition);background:var(--bg);
}
.upload-zone:hover{border-color:var(--accent);background:var(--accent-light)}
.upload-zone.dragover{border-color:var(--accent);background:var(--accent-light)}
.upload-zone.has-file{border-style:solid;border-color:var(--accent);background:var(--accent-light)}
.upload-icon{font-size:1.8rem;color:var(--text-muted);margin-bottom:8px}
.upload-text{font-size:.85rem;color:var(--text-dim);margin-bottom:4px}
.upload-hint{font-size:.72rem;color:var(--text-muted)}
.logo-file-preview{
  display:flex;align-items:center;gap:12px;text-align:left;
}
.logo-file-preview img{
  width:48px;height:48px;object-fit:contain;border-radius:var(--radius-xs);
  background:#fff;border:1px solid var(--border-light);padding:4px;
}
.logo-file-info{flex:1}
.logo-file-info .fname{font-size:.8rem;font-weight:500;color:var(--text)}
.logo-file-info .fsize{font-size:.7rem;color:var(--text-muted)}
.logo-remove{
  background:none;border:none;color:var(--danger);font-size:1.3rem;
  cursor:pointer;padding:4px;transition:var(--transition);
}
.logo-remove:hover{transform:scale(1.2)}

/* ═══ QUANTITY DISPLAY ═══ */
.quantity-section{margin-bottom:20px}
.qty-display{
  display:flex;align-items:center;gap:4px;
}
.qty-btn{
  width:36px;height:36px;border-radius:var(--radius-xs);
  border:1px solid var(--border);background:var(--bg-white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;transition:var(--transition);color:var(--text);
}
.qty-btn:hover{background:var(--bg);border-color:var(--text-dim)}
.qty-value{
  width:48px;text-align:center;font-size:1rem;font-weight:700;
  padding:8px;border:1px solid var(--border);border-radius:var(--radius-xs);
  background:var(--bg-white);
}

/* ═══ ACTION BUTTONS ═══ */
.action-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--radius-sm);font-size:.92rem;
  font-weight:600;border:none;cursor:pointer;transition:var(--transition);
  text-decoration:none;width:100%;
}
.btn-cart{background:var(--dark);color:#fff}
.btn-cart:hover{background:var(--dark-hover)}
.btn-cart:disabled{opacity:.45;cursor:not-allowed}
.btn-whatsapp{background:#25d366;color:#fff}
.btn-whatsapp:hover{background:#20bd5a}
.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--text-dim);background:var(--bg)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover)}
.btn-sm{padding:10px 18px;font-size:.82rem}

/* ═══ TRUST BADGES ═══ */
.trust-badges{
  display:flex;flex-direction:column;gap:10px;
  padding-top:18px;border-top:1px solid var(--border-light);
}
.trust-item{
  display:flex;align-items:center;gap:10px;
  font-size:.82rem;color:var(--text-dim);
}
.trust-item i{font-size:1rem;color:var(--accent)}

/* ═══ CART SIDEBAR ═══ */
.cart-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.cart-overlay.active{opacity:1;pointer-events:all}
.cart-sidebar{
  position:fixed;top:0;right:0;width:min(420px,92vw);height:100%;
  background:var(--bg-white);z-index:1101;transform:translateX(100%);
  transition:transform .3s ease;display:flex;flex-direction:column;
  box-shadow:-4px 0 24px rgba(0,0,0,.08);
}
.cart-sidebar.open{transform:translateX(0)}
.cs-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border-light);flex-shrink:0;
}
.cs-header h3{font-size:1rem;font-weight:700}
.cs-close{font-size:1.4rem;color:var(--text-dim);padding:8px;cursor:pointer;z-index:5}
.cs-items{flex:1;overflow-y:auto;padding:12px 20px}
.cs-item{
  display:flex;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--border-light);
}
.cs-item-img{
  width:64px;height:64px;border-radius:var(--radius-xs);overflow:hidden;
  background:#fafafa;flex-shrink:0;border:1px solid var(--border-light);
}
.cs-item-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.cs-item-info{flex:1;min-width:0}
.cs-item-name{font-size:.82rem;font-weight:600;margin-bottom:2px}
.cs-item-detail{font-size:.72rem;color:var(--text-dim);line-height:1.4}
.cs-item-price{font-size:.88rem;font-weight:700;margin-top:4px}
.cs-item-remove{
  font-size:.72rem;color:var(--danger);cursor:pointer;
  margin-top:4px;display:inline-block;
}
.cs-item-remove:hover{text-decoration:underline}
.cs-empty{text-align:center;padding:48px 20px;color:var(--text-muted)}
.cs-empty i{font-size:2.5rem;display:block;margin-bottom:12px}
.cs-footer{
  padding:16px 20px;border-top:1px solid var(--border-light);
  flex-shrink:0;background:var(--bg-white);
}
.cs-total{
  display:flex;justify-content:space-between;font-size:1rem;
  font-weight:700;margin-bottom:14px;
}

/* ═══ CART PAGE ═══ */
.cart-page{max-width:900px;margin:0 auto;padding-top:20px;padding-bottom:60px}
.cart-page h2{font-size:1.3rem;font-weight:700;margin-bottom:20px}
.cart-item-row{
  display:flex;gap:16px;padding:16px;margin-bottom:12px;
  background:var(--bg-white);border-radius:var(--radius);
  border:1px solid var(--border-light);align-items:flex-start;
}
.cart-item-preview{
  width:80px;height:80px;border-radius:var(--radius-sm);overflow:hidden;
  background:#fafafa;flex-shrink:0;position:relative;
  border:1px solid var(--border-light);
}
.cart-item-preview img{width:100%;height:100%;object-fit:contain;padding:4px}
.cart-item-preview .mini-logo{
  position:absolute;top:25%;left:30%;width:40%;
  pointer-events:none;
}
.cart-item-body{flex:1;min-width:0}
.cart-item-title{font-size:.88rem;font-weight:600;margin-bottom:4px}
.cart-item-meta{font-size:.78rem;color:var(--text-dim);line-height:1.5}
.cart-item-actions{display:flex;gap:12px;margin-top:8px}
.cart-item-right{text-align:right;flex-shrink:0}
.cart-item-price{font-size:1rem;font-weight:700;margin-bottom:8px}
.cart-item-remove{
  font-size:.75rem;color:var(--danger);cursor:pointer;
}
.cart-item-remove:hover{text-decoration:underline}
.cart-summary-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px;margin-top:16px;background:var(--bg-white);
  border-radius:var(--radius);border:1px solid var(--border-light);
}
.cart-summary-bar .total-label{font-size:1rem;color:var(--text-dim)}
.cart-summary-bar .total-value{font-size:1.3rem;font-weight:800}
.cart-btns{display:flex;gap:12px;margin-top:16px;justify-content:flex-end}
.cart-btns .btn{width:auto}
.cart-empty{
  text-align:center;padding:60px 20px;color:var(--text-muted);
}
.cart-empty i{font-size:3rem;display:block;margin-bottom:16px}
.cart-empty p{font-size:.92rem;margin-bottom:20px}

/* ═══ CHECKOUT PAGE ═══ */
.checkout-page{max-width:800px;margin:0 auto;padding-top:20px;padding-bottom:60px}
.checkout-page h2{font-size:1.3rem;font-weight:700;margin-bottom:20px}
.checkout-card{
  background:var(--bg-white);border-radius:var(--radius);
  padding:24px;margin-bottom:16px;border:1px solid var(--border-light);
}
.checkout-card h3{
  font-size:.95rem;font-weight:700;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;gap:8px;
}
.checkout-card h3 i{color:var(--accent)}
.bank-grid{display:grid;gap:8px}
.bank-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;font-size:.85rem;border-bottom:1px solid var(--border-light);
}
.bank-row:last-child{border:none}
.bank-row .blabel{color:var(--text-dim)}
.bank-row .bvalue{font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.bank-row .bvalue .copy-icon{
  font-size:.75rem;color:var(--text-muted);opacity:0;transition:opacity .2s;
}
.bank-row .bvalue:hover .copy-icon{opacity:1}
.sena-badge{
  background:var(--accent-light);color:var(--accent);font-weight:700;
  padding:12px 16px;border-radius:var(--radius-sm);text-align:center;
  font-size:1.1rem;margin-bottom:16px;
}
.checkout-upload-zone{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:32px 20px;text-align:center;cursor:pointer;
  transition:var(--transition);background:var(--bg);
}
.checkout-upload-zone:hover{border-color:var(--accent);background:var(--accent-light)}
.checkout-upload-zone.has-file{border-style:solid;border-color:var(--accent);background:var(--accent-light)}
.checkout-file-name{font-size:.82rem;font-weight:500;margin-top:8px;color:var(--accent)}
.checkout-summary-item{
  display:flex;justify-content:space-between;padding:6px 0;
  font-size:.85rem;
}
.checkout-total{
  display:flex;justify-content:space-between;padding:12px 0 0;
  margin-top:8px;border-top:2px solid var(--border-light);
  font-size:1.05rem;font-weight:700;
}
.checkout-btns{display:flex;gap:12px;margin-top:20px}
.checkout-btns .btn{flex:1}

/* ═══ ORDERS PAGE ═══ */
.orders-page{max-width:800px;margin:0 auto;padding-top:20px;padding-bottom:60px}
.orders-page h2{font-size:1.3rem;font-weight:700;margin-bottom:20px}
.order-card{
  background:var(--bg-white);border-radius:var(--radius);
  margin-bottom:12px;border:1px solid var(--border-light);
  transition:var(--transition);overflow:hidden;
}
.order-card:hover{box-shadow:var(--shadow)}
.order-card.expanded{border-color:var(--accent);box-shadow:0 2px 16px rgba(0,0,0,.08)}
.order-card-toggle{
  padding:18px 20px;cursor:pointer;transition:background .15s;
}
.order-card-toggle:hover{background:rgba(0,0,0,.015)}
.order-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;flex-wrap:wrap;gap:6px;
}
.order-number{font-weight:700;font-size:.92rem}
.order-date{font-size:.75rem;color:var(--text-muted);margin-left:8px}
.order-status{
  font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:20px;
}
.st-pendiente{background:#fef3c7;color:#d97706}
.st-comprobante{background:#dbeafe;color:#2563eb}
.st-configurado{background:#d1fae5;color:#059669}
.st-entrada{background:#ede9fe;color:#7c3aed}
.order-items{font-size:.82rem;color:var(--text-dim);line-height:1.5}
.order-summary-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;
}
.order-total{font-size:.95rem;font-weight:700}
.order-expand-hint{
  font-size:.78rem;color:var(--accent);display:flex;align-items:center;gap:4px;
  transition:transform .2s;
}
.order-card.expanded .order-expand-hint i{transform:rotate(180deg)}
.order-card.expanded .order-expand-hint::after{content:'Ocultar';}
.order-card.expanded .order-expand-hint{color:var(--text-muted)}
.order-card:not(.expanded) .order-expand-hint::after{content:'';}
.order-actions{margin-top:10px}
.orders-empty{text-align:center;padding:60px 20px;color:var(--text-muted)}
.orders-empty i{font-size:3rem;display:block;margin-bottom:12px}

/* ── Order Detail (accordion) ── */
.order-detail{
  border-top:1px solid var(--border-light);
  background:#fafbfc;
  animation:odSlideDown .25s ease;
}
@keyframes odSlideDown{from{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}
.od-section{
  padding:16px 20px;
  border-bottom:1px solid var(--border-light);
}
.od-section:last-child{border-bottom:none}
.od-section-title{
  font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--text-muted);margin-bottom:12px;
  display:flex;align-items:center;gap:6px;
}
.od-item{
  background:#fff;border:1px solid var(--border-light);
  border-radius:8px;padding:14px;margin-bottom:8px;
}
.od-item:last-child{margin-bottom:0}
.od-item-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:6px;margin-bottom:8px;
}
.od-item-name{font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.od-color-tag{
  display:inline-block;font-size:.7rem;font-weight:600;
  padding:2px 8px;border-radius:10px;
  background:#e8f5e9;color:#2e7d32;
}
.od-item-price-line{display:flex;align-items:center;gap:10px;flex-shrink:0}
.od-qty{font-size:.82rem;font-weight:600;color:var(--text-dim)}
.od-unit-price{font-size:.85rem;font-weight:700;color:var(--accent)}
.od-talles{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;
}
.od-talle-chip{
  display:inline-flex;align-items:center;
  background:#f0f0f0;border:1px solid #e0e0e0;
  border-radius:6px;font-size:.75rem;overflow:hidden;
}
.od-talle-name{padding:3px 7px;font-weight:600}
.od-talle-qty{
  padding:3px 7px;background:#e0e0e0;font-weight:700;color:#555;
}
.od-logo,.od-logos{
  font-size:.78rem;color:var(--text-muted);
  margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.od-logo-thumb{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;background:#f0f0f0;border-radius:6px;
  border:1px solid var(--border-light);transition:var(--transition);cursor:pointer;
}
.od-logo-thumb:hover{border-color:var(--accent);box-shadow:var(--shadow-xs)}
.od-logo-thumb img{width:32px;height:32px;object-fit:contain;border-radius:4px}
.od-logo-thumb span{font-size:.7rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-logo-file{font-size:.75rem;color:var(--text-dim)}

/* Comprobantes */
.od-comprobante{margin-bottom:10px}
.od-comprobante:last-child{margin-bottom:0}
.od-comp-link{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border-light)}
.od-comp-img{
  width:100%;max-width:320px;height:auto;display:block;
  border-radius:8px;transition:transform .2s;
}
.od-comp-img:hover{transform:scale(1.02)}
.od-comp-file{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;background:#fff;
  border:1px solid var(--border-light);border-radius:8px;
  font-size:.85rem;font-weight:500;color:var(--accent);
  transition:var(--transition);
}
.od-comp-file:hover{background:var(--accent);color:#fff;text-decoration:none}
.od-comp-meta{font-size:.72rem;color:var(--text-muted);margin-top:4px}
.od-summary{
  background:#f7f7f7;
}
.od-summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 0;font-size:.88rem;
}
.od-summary-row strong{color:var(--accent)}

/* ─── Comprobante modal ─── */
.modal-comp{max-width:560px}
.modal-comp .modal-body img{max-height:70vh;object-fit:contain}

/* ─── Success items summary ─── */
.success-items-summary{
  max-width:480px;margin:16px auto;text-align:left;
}
.success-item{
  padding:12px;background:#f9fafb;border:1px solid var(--border-light);
  border-radius:var(--radius-xs);margin-bottom:8px;
}
.success-total{
  font-size:1rem;font-weight:700;text-align:center;
  color:var(--accent);margin:10px 0 16px;
}

/* ═══ SUCCESS SCREEN ═══ */
.success-screen{
  text-align:center;padding:80px 20px;max-width:500px;margin:0 auto;
}
.success-icon{font-size:4rem;margin-bottom:16px;color:var(--accent)}
.success-screen h2{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.success-screen p{color:var(--text-dim);font-size:.92rem;margin-bottom:24px;line-height:1.5}
.success-ot{
  font-size:2rem;font-weight:800;color:var(--accent);
  margin-bottom:24px;
}

/* ═══ MODAL ═══ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;padding:20px;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-box{
  background:var(--bg-white);border-radius:var(--radius);
  max-width:500px;width:100%;max-height:85vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);transform:scale(.95);
  transition:transform .25s;
}
.modal-overlay.active .modal-box{transform:scale(1)}
.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border-light);
}
.modal-header h3{font-size:1rem;font-weight:700}
.modal-close{font-size:1.3rem;color:var(--text-dim);cursor:pointer;padding:4px}
.modal-body{padding:20px}
.modal-body img{width:100%;border-radius:var(--radius-sm)}

/* ═══ TOAST ═══ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--dark);color:#fff;padding:12px 24px;border-radius:var(--radius-sm);
  font-size:.85rem;font-weight:500;z-index:300;
  opacity:0;transition:all .3s ease;pointer-events:none;
  box-shadow:var(--shadow-lg);white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast.error{background:var(--danger)}
.toast.success{background:var(--accent)}

/* ═══ LOADING ═══ */
.loading-overlay{
  position:fixed;inset:0;background:rgba(255,255,255,.8);z-index:250;
  display:flex;align-items:center;justify-content:center;
}
.spinner{
  width:36px;height:36px;border:3px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-inline{
  display:flex;align-items:center;justify-content:center;
  padding:40px;color:var(--text-muted);gap:10px;font-size:.85rem;
}
.loading-inline .spinner{width:20px;height:20px;border-width:2px}

/* ═══ NO AUTH ═══ */
.noauth{
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;padding:20px;background:var(--bg);
}
.noauth-card{
  background:var(--bg-white);border-radius:var(--radius);
  padding:40px;text-align:center;max-width:420px;width:100%;
  box-shadow:var(--shadow);
}
.noauth-card .na-icon{font-size:3rem;margin-bottom:16px}
.noauth-card h2{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.noauth-card p{font-size:.88rem;color:var(--text-dim);margin-bottom:20px;line-height:1.5}
.noauth-card .na-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;padding:12px 28px;
  border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;
  transition:var(--transition);
}
.noauth-card .na-btn:hover{background:var(--accent-hover)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1200px){
  .detail-layout{grid-template-columns:80px 1fr 1fr;gap:18px}
  .gt-card img{width:48px;height:48px}
}
@media(max-width:992px){
  .detail-layout{grid-template-columns:1fr 1fr;gap:20px}
  .detail-sidebar{
    grid-column:1/-1;grid-row:3;position:static;max-height:none;overflow:visible;
  }
  .gt-strip{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .gt-card{min-width:90px;max-width:110px;flex-shrink:0}
  .detail-center{position:static}
  .detail-info{max-width:100%}
  .main-nav{gap:16px;margin-left:20px}
}
@media(max-width:768px){
  /* ── Grid: single column, prevent children from overflowing ── */
  .detail-layout{grid-template-columns:1fr;gap:12px}
  .detail-layout>*{min-width:0;max-width:100%}
  .detail-sidebar{grid-row:auto}
  .detail-center{width:100%;min-width:0}
  .color-section-desktop{display:none}
  .color-section-mobile{display:block}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .main-nav{display:none}
  .mobile-menu-btn{display:flex}
  .header-search{display:none}
  .hero-banner{padding:36px 0}
  .hero-title{font-size:1.4rem}
  .hero-subtitle{font-size:.85rem}
  .gt-card{min-width:70px}
  .gt-card img{width:40px;height:40px}
  .pc-grid{grid-template-columns:1fr 1fr}
  .cart-item-row{flex-direction:column}
  .cart-item-right{text-align:left;display:flex;justify-content:space-between;align-items:center;width:100%}
  .cart-btns{flex-direction:column}
  .cart-btns .btn{width:100%}
  .checkout-btns{flex-direction:column}

  /* ── Image: constrain height, center image ── */
  .preview-main{
    max-height:50vh;
  }
  .preview-main .garment-img{
    max-height:48vh;
    display:block;
    margin:0 auto;
  }

  .action-buttons{
    position:sticky;bottom:0;z-index:20;
    background:var(--bg-white);padding:12px 0;
    border-top:1px solid var(--border-light);
    margin:0 -14px;padding:12px 14px;
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
  }
  .color-swatch{width:42px;height:42px;border-radius:6px}

  /* ── Detail info: contain everything ── */
  .detail-info{max-width:100%;min-width:0;overflow-x:hidden;box-sizing:border-box}
  .detail-name{font-size:1.3rem;word-break:break-word}
  .detail-desc{word-break:break-word}

  /* ── Talle controls ── */
  .talle-qty-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
  .talle-qty-item{padding:8px 4px}

  /* ── Trust badges ── */
  .trust-badges{gap:8px}
  .trust-item{font-size:.75rem;padding:8px 10px}

  /* ── Jersey table ── */
  .jersey-table{font-size:.8rem}

  /* ── Upload zone ── */
  .upload-zone{padding:16px 10px;box-sizing:border-box;max-width:100%}
  .upload-text{font-size:.82rem}
  .upload-hint{font-size:.72rem}

  /* ── Logo section ── */
  .logo-section{max-width:100%;overflow:hidden}
  .logo-source-options{flex-wrap:wrap}

  /* ── Preview controls ── */
  .preview-controls{padding:10px;max-width:100%;box-sizing:border-box}
  .preview-controls h4{font-size:.85rem}

  /* ── Color grid wrap ── */
  .color-grid{max-width:100%;flex-wrap:wrap}
}
@media(max-width:576px){
  .container{padding:0 10px}
  .card-body{padding:10px 12px}
  .card-title{font-size:.8rem}
  .card-price{font-size:.92rem}
  .detail-name{font-size:1.15rem}
  .price-current{font-size:1.3rem}
  .header-inner{gap:10px}
  .site-logo span{display:none}
  .user-name{display:none}
  .header-login-link span{display:none}
  .header-login-link{padding:6px 8px;border:none}

  /* Image: even smaller on small phones */
  .preview-main .garment-img{
    max-height:42vh;
  }

  .detail-layout{gap:8px}
  .gt-strip{gap:6px}
  .gt-card{min-width:56px;padding:5px 3px}
  .gt-card img{width:34px;height:34px}
  .gt-price{font-size:.58rem}
  .color-swatch{width:36px;height:36px}

  /* Talle grid: tighter */
  .talle-qty-grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:4px}
  .talle-qty-item{padding:6px 3px;font-size:.78rem}
  .talle-qty-item input{width:38px;font-size:.8rem;padding:3px 2px}

  /* PC grid single col */
  .pc-grid{grid-template-columns:1fr}
  /* Upload zone */
  .upload-zone{padding:12px 8px}
  /* Step indicator */
  .step-indicator{font-size:.7rem;gap:4px}
  /* Trust badges stack */
  .trust-badges{flex-direction:column;gap:6px}
  .trust-item{font-size:.72rem;padding:6px 8px}
  /* Section headers */
  .section-header h3{font-size:.95rem}
  .section-header p{font-size:.78rem}
  /* Cart sidebar full width */
  .cart-sidebar{width:100vw;max-width:100vw}
}

/* ═══ MOBILE NAV DRAWER ═══ */
.mobile-nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:90;opacity:0;pointer-events:none;transition:opacity .3s;
}
.mobile-nav-overlay.active{opacity:1;pointer-events:all}
.mobile-nav{
  position:fixed;top:0;left:0;width:min(300px,80vw);height:100%;
  background:var(--bg-white);z-index:91;transform:translateX(-100%);
  transition:transform .3s ease;display:flex;flex-direction:column;
  box-shadow:4px 0 24px rgba(0,0,0,.08);
}
.mobile-nav.open{transform:translateX(0)}
.mn-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border-light);
}
.mn-header .site-logo{font-size:1rem}
.mn-close{font-size:1.3rem;color:var(--text-dim);padding:4px;cursor:pointer}
.mn-links{padding:12px 0}
.mn-link{
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  font-size:.92rem;font-weight:500;color:var(--text);
  transition:var(--transition);cursor:pointer;
}
.mn-link:hover,.mn-link.active{background:var(--accent-light);color:var(--accent)}
.mn-link i{font-size:1.1rem;width:20px;text-align:center}

/* ═══ MISC ═══ */
.hidden{display:none!important}
.text-center{text-align:center}
.mt-2{margin-top:8px}
.mt-4{margin-top:16px}
.mb-2{margin-bottom:8px}
.mb-4{margin-bottom:16px}

/* ═══ LOGO SOURCE OPTIONS ═══ */
.logo-source-options{
  display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;
}
.logo-source-btn{
  flex:1;min-width:120px;padding:10px 12px;border:2px solid var(--border-light);
  border-radius:var(--radius);background:var(--bg-white);color:var(--text);
  font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;
  transition:var(--transition);
}
.logo-source-btn:hover{border-color:var(--accent);color:var(--accent)}
.logo-source-btn.active{
  border-color:var(--accent);background:var(--accent-light);color:var(--accent);
}
.logo-source-btn i{margin-right:6px}

/* Previous logos grid */
.prev-logos-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;margin-bottom:12px;
}
.prev-logo-card{
  border:2px solid var(--border-light);border-radius:var(--radius);
  padding:8px;text-align:center;cursor:pointer;transition:var(--transition);
  background:var(--bg-white);position:relative;
}
.prev-logo-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.prev-logo-card.already-added{border-color:var(--success);opacity:.6;pointer-events:none}
.prev-logo-card img{
  width:100%;height:80px;object-fit:contain;border-radius:4px;margin-bottom:6px;
}
.prev-logo-name{
  font-size:.72rem;color:var(--text-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.prev-logo-date{font-size:.68rem;color:var(--text-dim);margin-top:2px}
.prev-logo-badge{
  position:absolute;top:4px;right:4px;background:var(--success);color:#fff;
  font-size:.6rem;padding:2px 6px;border-radius:10px;font-weight:700;
}

/* ═══ JERSEY MODE ═══ */
.talle-qty-grid.jersey-active{
  display:block!important;
}
.jersey-mode-toggle{
  display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;
}
.jersey-mode-btn{
  flex:1;min-width:130px;padding:10px 12px;border:2px solid var(--border-light);
  border-radius:var(--radius);background:var(--bg-white);color:var(--text);
  font-size:.82rem;font-weight:600;cursor:pointer;text-align:center;
  transition:var(--transition);
}
.jersey-mode-btn:hover{border-color:var(--accent);color:var(--accent)}
.jersey-mode-btn.active{
  border-color:var(--accent);background:var(--accent-light);color:var(--accent);
}
.jersey-mode-btn i{margin-right:6px}

.jersey-logos-below{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding:10px;background:var(--bg-gray);border-radius:var(--radius);
  border:1px solid var(--border-light);
}
.jersey-logo-thumb{
  width:90px;height:90px;background:var(--bg-white);
  border:1px solid var(--border-light);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:6px;
}
.jersey-logo-thumb img{
  max-width:100%;max-height:100%;object-fit:contain;
}

.jersey-table-wrap{
  border:1px solid var(--border-light);border-radius:var(--radius);
  overflow:hidden;background:var(--bg-white);
}
.jersey-table{
  width:100%;border-collapse:collapse;font-size:.84rem;
}
.jersey-table thead{background:var(--bg-gray)}
.jersey-table th{
  padding:8px 10px;text-align:left;font-weight:600;font-size:.78rem;
  color:var(--text-dim);border-bottom:1px solid var(--border-light);
}
.jersey-table td{
  padding:6px 8px;border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
.jersey-table tr:last-child td{border-bottom:none}
.jersey-select{
  width:100%;padding:6px 8px;border:1px solid var(--border-light);
  border-radius:6px;font-size:.82rem;background:var(--bg-white);
  color:var(--text);
}
.jersey-select:focus{border-color:var(--accent);outline:none}
.jersey-input{
  width:100%;padding:6px 8px;border:1px solid var(--border-light);
  border-radius:6px;font-size:.82rem;background:var(--bg-white);
  color:var(--text);
}
.jersey-input:focus{border-color:var(--accent);outline:none}
.jersey-input::placeholder{color:var(--text-dim);opacity:.6}
.jersey-del-btn{
  background:none;border:none;color:var(--text-dim);cursor:pointer;
  padding:4px;border-radius:4px;font-size:.9rem;transition:var(--transition);
}
.jersey-del-btn:hover{color:var(--danger);background:rgba(220,53,69,.08)}
.jersey-add-btn{
  width:100%;padding:10px;background:none;border:none;border-top:1px solid var(--border-light);
  color:var(--accent);font-weight:600;font-size:.84rem;cursor:pointer;
  transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:6px;
}
.jersey-add-btn:hover{background:var(--accent-light)}
.jersey-hint{
  padding:8px 12px;font-size:.76rem;color:var(--text-dim);
  background:var(--bg-gray);border-top:1px solid var(--border-light);
  display:flex;align-items:center;gap:6px;
}

@media(max-width:600px){
  .jersey-table{font-size:.78rem}
  .jersey-table th,.jersey-table td{padding:5px 4px}
  .jersey-select,.jersey-input{padding:5px 6px;font-size:.78rem}
}

/* ═══ PHONE LOGIN MODAL ═══ */
.phone-input-wrap{
  display:flex;align-items:center;gap:0;
  border:2px solid var(--border-light);border-radius:var(--radius);
  overflow:hidden;background:var(--bg-white);transition:border-color .2s;
}
.phone-input-wrap:focus-within{border-color:var(--accent)}
.phone-prefix{
  padding:12px 14px;background:var(--bg-gray);font-weight:700;
  font-size:1rem;color:var(--text);border-right:1px solid var(--border-light);
  white-space:nowrap;user-select:none;
}
.phone-number-input{
  flex:1;padding:12px 14px;border:none;outline:none;
  font-size:1.1rem;font-weight:600;background:transparent;
  color:var(--text);letter-spacing:.5px;
}
.phone-number-input::placeholder{color:var(--text-dim);opacity:.5;font-weight:400}

/* ═══ VOLUME DISCOUNT PROGRESS ═══ */
.discount-progress-wrap{
  margin-top:10px;padding:12px 14px;
  background:linear-gradient(135deg,#eafaf1 0%,#d5f5e3 100%);
  border:1px solid #a3e4bc;border-radius:var(--radius);
  transition:all .3s ease;
}
.discount-msg{
  font-size:.82rem;color:#1e7e34;font-weight:500;margin-bottom:8px;line-height:1.4;
}
.discount-msg strong{font-weight:700}
.discount-msg i{margin-right:4px;color:#28a745}
.discount-bar-track{
  height:10px;background:#c8e6c9;border-radius:6px;overflow:hidden;position:relative;
}
.discount-bar-fill{
  height:100%;background:linear-gradient(90deg,#28a745,#20c997);border-radius:6px;
  transition:width .4s ease;min-width:2px;
}
.discount-bar-labels{
  display:flex;justify-content:space-between;margin-top:4px;
  font-size:.72rem;color:#2e6b3a;font-weight:600;
}
.discount-applied-badge{
  display:none;margin-top:8px;padding:8px 14px;
  background:linear-gradient(135deg,#d4edda,#c3e6cb);
  border:1px solid #a3d7b5;border-radius:var(--radius);
  font-size:.82rem;font-weight:700;color:#155724;
  text-align:center;animation:discountPulse .6s ease;
}
.discount-applied-badge.active{display:block}
.discount-applied-badge i{margin-right:4px;color:#28a745}
@keyframes discountPulse{
  0%{transform:scale(.95);opacity:.5} 50%{transform:scale(1.02)} 100%{transform:scale(1);opacity:1}
}

/* Price discount styling */
.price-old{
  text-decoration:line-through;color:var(--text-dim);font-size:.85em;font-weight:400;margin-right:6px;
}
.price-discounted{color:#28a745 !important}
.price-discount-tag{
  display:inline-block;background:#28a745;color:#fff;padding:2px 8px;border-radius:4px;
  font-size:.72rem;font-weight:700;margin-left:6px;vertical-align:middle;
}
.price-hint{
  font-size:.75rem;color:var(--text-dim);font-weight:400;margin-left:4px;
}

/* ═══ CAROUSEL BANNER ═══ */
.carousel-wrapper{
  position:relative;width:100%;overflow:hidden;
  background:#000;line-height:0;
}
.carousel-track{
  position:relative;width:100%;
}
.carousel-slide{
  position:absolute;top:0;left:0;width:100%;
  opacity:0;transition:opacity .6s ease;
  pointer-events:none;
}
.carousel-slide.active{
  position:relative;opacity:1;pointer-events:auto;
}
.carousel-slide img{
  width:100%;height:auto;display:block;
}
.carousel-slide a{display:block;width:100%}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;border:none;
  font-size:1.2rem;cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
  backdrop-filter:blur(4px);
}
.carousel-arrow:hover{background:rgba(0,0,0,.7);transform:translateY(-50%) scale(1.08)}
.carousel-prev{left:16px}
.carousel-next{right:16px}
.carousel-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:5;
}
.carousel-dot{
  width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  background:transparent;cursor:pointer;transition:all .2s;padding:0;
}
.carousel-dot.active{background:#fff;border-color:#fff;transform:scale(1.2)}
@media(max-width:768px){
  .carousel-arrow{width:34px;height:34px;font-size:1rem}
  .carousel-prev{left:8px} .carousel-next{right:8px}
  .carousel-dots{bottom:10px;gap:6px}
  .carousel-dot{width:8px;height:8px}
}

/* ═══ SKELETON / LAZY LOADING ═══ */
.img-skeleton{
  position:absolute;inset:0;background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;z-index:0;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card-img{position:relative;overflow:hidden}
.card-img img{position:relative;z-index:1}
.catalog-sentinel{height:1px;width:100%;grid-column:1/-1}

/* ═══ FOOTER ═══ */
.site-footer{
  color:#e8f5e9;padding:0;margin-top:40px;
}
.footer-inner{
  max-width:1200px;margin:0 auto;padding:40px 20px 24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;
}
.footer-brand .footer-logo{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.footer-brand .footer-logo .logo-icon{
  width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#00a650,#00d68f);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:1.1rem;
}
.footer-brand .footer-logo span{font-weight:800;font-size:1.15rem;letter-spacing:1px;color:#fff}
.footer-desc{font-size:.84rem;color:rgba(255,255,255,.7);line-height:1.55;margin-bottom:16px}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;color:#e8f5e9;
  font-size:1.05rem;transition:all .2s;text-decoration:none;
}
.footer-social a:hover{background:rgba(255,255,255,.3);color:#fff;transform:translateY(-2px)}
.footer-col h4{
  font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:#fff;margin-bottom:14px;
}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:8px}
.footer-links a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.85rem;transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-contact li{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.75);font-size:.85rem}
.footer-contact i{color:#a5d6a7;font-size:.95rem;flex-shrink:0}
.footer-map{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  text-align:center;padding:16px 20px;font-size:.78rem;color:rgba(255,255,255,.5);
}

/* ═══ WHATSAPP FLOAT ═══ */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:1100;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;font-size:1.7rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 16px rgba(37,211,102,.45);
  text-decoration:none;transition:all .2s;
}
.wa-float:hover{transform:scale(1.1);box-shadow:0 4px 20px rgba(37,211,102,.6)}
.wa-float i{line-height:1}

/* ═══ HEADER PHONE BUTTON ═══ */
.header-phone-wrap{position:relative}
.header-phone{color:var(--accent,#00a650);display:flex}
.header-phone:hover{color:#0d6efd}
.phone-popup{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  background:#fff;border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  padding:12px 18px;white-space:nowrap;z-index:1200;
  text-align:center;
}
.phone-popup::before{
  content:'';position:absolute;top:-6px;right:14px;
  width:12px;height:12px;background:#fff;
  transform:rotate(45deg);
  box-shadow:-2px -2px 4px rgba(0,0,0,.06);
}
.phone-popup.show{display:block}
.phone-popup-title{font-size:.75rem;color:#888;font-weight:600;margin-bottom:4px}
.phone-popup-number{
  font-size:1.1rem;font-weight:700;color:#0d6efd;
  text-decoration:none;
}
.phone-popup-number:hover{text-decoration:underline}
@media(max-width:768px){
  .phone-popup{display:none!important}
}

/* ═══ COTIZADOR RÁPIDO BUTTON ═══ */
.header-cotizar{
  background:var(--accent,#00a650)!important;color:#fff!important;
  border-radius:8px!important;padding:8px 16px!important;
  font-size:.82rem!important;font-weight:700!important;
  gap:6px!important;white-space:nowrap;
  width:auto!important;height:auto!important;
  transition:background .2s;
  box-shadow:0 2px 8px rgba(0,166,80,.3);
}
.header-cotizar:hover{background:#008f45!important;box-shadow:0 2px 12px rgba(0,166,80,.45)}
.cotizar-label{font-size:.82rem}
@media(max-width:576px){
  .header-cotizar{padding:7px 12px!important;font-size:.75rem!important}
  .cotizar-label{font-size:.75rem}
}

/* ═══ COTIZADOR MODAL ═══ */
.cot-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  display:none;align-items:flex-end;justify-content:flex-end;
  z-index:9999999;padding:16px;
}
.cot-overlay.open{display:flex}
.cot-box{
  width:380px;max-width:100%;
  max-height:calc(100vh - 32px);
  background:#fff;border-radius:16px;
  display:flex;flex-direction:column;
  box-shadow:0 8px 40px rgba(0,0,0,.2);
  overflow:hidden;
}
.cot-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  background:var(--accent,#00a650);color:#fff;
  flex-shrink:0;
}
.cot-header-title{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:6px}
.cot-close{background:none;border:none;color:#fff;font-size:1.1rem;cursor:pointer;padding:4px}
.cot-close:hover{opacity:.8}
.cot-chat{
  flex:1;overflow-y:auto;
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  background:#f7f8fa;
}
/* Bot message */
.cot-msg{
  max-width:90%;padding:10px 14px;
  border-radius:14px 14px 14px 4px;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);
  font-size:.85rem;color:#333;line-height:1.5;
}
/* Options grid */
.cot-options{
  display:flex;flex-direction:column;gap:6px;
  margin-top:4px;
}
.cot-opt{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:#fff;border:1.5px solid #e0e0e0;
  border-radius:10px;cursor:pointer;
  font-size:.83rem;font-weight:500;color:#333;
  transition:all .15s;text-align:left;
}
.cot-opt:hover{border-color:var(--accent,#00a650);background:#f0faf4}
.cot-opt img{
  width:40px;height:40px;border-radius:8px;
  object-fit:cover;flex-shrink:0;
}
/* User reply bubble */
.cot-reply{
  align-self:flex-end;
  max-width:80%;padding:8px 14px;
  border-radius:14px 14px 4px 14px;
  background:var(--accent,#00a650);color:#fff;
  font-size:.85rem;font-weight:500;
}
/* Summary */
.cot-summary{
  background:#fff;border-radius:12px;
  padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);
  font-size:.84rem;line-height:1.6;
}
.cot-summary strong{color:#212529}
.cot-summary .cot-price{
  font-size:1.2rem;font-weight:800;color:var(--accent,#00a650);
  display:block;margin:8px 0;
}
.cot-wa-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px;margin-top:8px;
  background:#25d366;color:#fff;border:none;border-radius:10px;
  font-size:.9rem;font-weight:700;cursor:pointer;
  text-decoration:none;transition:background .2s;
}
.cot-wa-btn:hover{background:#1da851;color:#fff}
.cot-restart{
  display:block;text-align:center;
  margin-top:8px;font-size:.78rem;color:#888;
  cursor:pointer;background:none;border:none;
  text-decoration:underline;
}
.cot-restart:hover{color:#333}

@media(max-width:576px){
  .cot-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .cot-box{width:100%;max-width:100%;border-radius:0;max-height:100vh}
}

/* ═══ LOGO EDITOR FULLSCREEN MODAL ═══ */
.le-overlay{
  position:fixed;inset:0;z-index:1300;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.le-overlay.active{opacity:1;pointer-events:all}
.le-modal{
  width:100%;height:100%;max-width:100vw;max-height:100dvh;
  display:flex;flex-direction:column;
  background:#1a1a1a;color:#fff;
  overflow:hidden;
}
/* Header */
.le-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.le-header h3{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:8px}
.le-close{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:#fff;background:rgba(255,255,255,.1);
  cursor:pointer;transition:background .2s;border:none;
}
.le-close:hover{background:rgba(255,255,255,.2)}

/* Preview area */
.le-preview-area{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:12px;overflow:hidden;
  min-height:0;
}
.le-preview{
  position:relative;background:#f8f8f8;border-radius:12px;
  overflow:visible;max-width:90vw;max-height:55vh;
  border:2px solid rgba(255,255,255,.15);
  touch-action:none;margin:0 auto;
}
.le-garment-img{
  max-width:100%;max-height:55vh;object-fit:contain;
  display:block;pointer-events:none;padding:8px;
}
.le-preview .logo-overlay{
  position:absolute;cursor:move;user-select:none;touch-action:none;z-index:5;
  border:2px dashed rgba(0,0,0,.15);border-radius:4px;transition:border-color .15s;
}
.le-preview .logo-overlay:active,.le-preview .logo-overlay.dragging{border-color:#16a34a}
.le-preview .logo-overlay img{
  width:100%;height:auto;display:block;
  pointer-events:none;opacity:.8;
}
.le-preview .lo-resize{
  position:absolute;right:-8px;bottom:-8px;
  width:28px;height:28px;background:#16a34a;border-radius:50%;
  cursor:nwse-resize;z-index:10;
  border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.le-preview .lo-delete{
  position:absolute;right:-8px;top:-8px;
  width:24px;height:24px;background:#dc2626;border-radius:50%;
  cursor:pointer;border:3px solid #fff;color:#fff;
  font-size:13px;line-height:18px;text-align:center;font-weight:bold;z-index:12;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* Logo tabs */
.le-logo-tabs{
  display:flex;gap:6px;margin-top:10px;
}
.le-tab{
  padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:600;
  background:rgba(255,255,255,.1);color:#ccc;cursor:pointer;
  border:1px solid rgba(255,255,255,.15);transition:all .2s;
}
.le-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Controls */
.le-controls{
  padding:10px 16px;border-top:1px solid rgba(255,255,255,.1);
  flex-shrink:0;display:flex;flex-direction:column;gap:8px;
}
.le-control-group{display:flex;align-items:center;gap:10px}
.le-group-label{
  font-size:.72rem;font-weight:600;color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:.5px;width:58px;flex-shrink:0;
}
/* Arrow pad */
.le-arrows{
  display:grid;grid-template-columns:repeat(3,42px);gap:4px;
  justify-content:center;
}
.le-arrow-spacer{width:42px;height:42px}
.le-btn{
  width:42px;height:42px;border-radius:10px;border:none;
  background:rgba(255,255,255,.12);color:#fff;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.le-btn:active{background:var(--accent);transform:scale(.92)}
.le-btn-center{opacity:.3;cursor:default}
.le-btn-center:active{background:rgba(255,255,255,.12);transform:none}

/* Size / Rotation row */
.le-size-row{
  display:flex;align-items:center;gap:8px;flex:1;
}
.le-btn-round{
  width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(255,255,255,.12);color:#fff;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.le-btn-round:active{background:var(--accent);transform:scale(.92)}
.le-size-bar{flex:1}
.le-size-bar input[type="range"]{
  width:100%;accent-color:var(--accent);height:24px;
}
.le-size-val{
  font-size:.78rem;font-weight:700;color:#fff;
  min-width:36px;text-align:right;
}

/* Footer */
.le-footer{
  padding:12px 16px;border-top:1px solid rgba(255,255,255,.1);
  flex-shrink:0;display:flex;gap:10px;align-items:center;
}
.le-confirm-btn{
  flex:1;border:none;border-radius:12px;padding:14px 24px;
  font-size:1rem;font-weight:700;cursor:pointer;
  background:#fff;color:#111;transition:background .2s;
}
.le-confirm-btn:hover{background:#e0e0e0}
.le-duplicate-btn{
  border:2px solid rgba(255,255,255,.4);border-radius:12px;padding:14px 16px;
  font-size:.9rem;font-weight:600;cursor:pointer;
  background:transparent;color:#fff;transition:border-color .2s,background .2s;
}
.le-duplicate-btn:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* Desktop: constrain modal to reasonable size */
@media(min-width:769px){
  .le-modal{
    max-width:480px;max-height:90vh;
    border-radius:16px;margin:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
}

/* ═══ SIDE BANNERS ═══ */
.side-banner{
  position:fixed;top:50%;transform:translateY(-50%);z-index:900;
  max-width:140px;
}
.side-banner img{width:100%;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.side-banner-left{left:8px}
.side-banner-right{right:8px}
@media(max-width:1400px){
  .side-banner{display:none}
}

/* ═══ FOOTER RESPONSIVE ═══ */
@media(max-width:768px){
  .footer-inner{grid-template-columns:1fr;gap:24px;padding:30px 16px 18px}
  .footer-map-col{order:10}
  .wa-float{bottom:16px;right:16px;width:50px;height:50px;font-size:1.4rem}
}

/* ═══ FACTURA A/B TOGGLE ═══ */
.factura-toggle{
  display:flex;gap:8px;margin:8px 0 12px;
}
.factura-btn{
  flex:1;padding:10px 0;border:2px solid var(--accent,#6366f1);
  border-radius:10px;background:transparent;color:var(--accent,#6366f1);
  font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s;
  text-align:center;
}
.factura-btn:hover{
  background:color-mix(in srgb,var(--accent,#6366f1) 10%,transparent);
}
.factura-btn.active{
  background:var(--accent,#6366f1);color:#fff;
  box-shadow:0 2px 8px rgba(99,102,241,.35);
}

/* ═══ FACTURA CHECKBOX ═══ */
.factura-check-label{
  display:flex;align-items:center;gap:10px;
  cursor:pointer;font-size:.95rem;font-weight:600;
  padding:10px 0;user-select:none;
}
.factura-checkbox{
  width:24px;height:24px;border:2px solid #ccc;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
  color:transparent;font-size:.85rem;
}
.factura-checkbox.checked{
  background:var(--accent,#6366f1);border-color:var(--accent,#6366f1);
  color:#fff;
}

/* ═══ PRICE HINTS (1-9 unit pricing) ═══ */
.price-unit-hint{
  font-size:.82rem;color:var(--text-dim,#888);margin-left:4px;
}
.price-10-hint{
  display:block;font-size:.82rem;color:var(--text-dim,#888);margin-top:4px;
}
.price-10-hint .price-old{
  color:var(--accent,#6366f1);font-weight:600;font-size:.9rem;
}

/* ═══ CATALOG LAYOUT ═══ */
.catalog-main{
  flex:1;
  min-width:0;
}

/* ── Sidebar (desktop) ── */
.trabajos-sidebar{
  width:170px;
  flex-shrink:0;
  position:sticky;
  top:16px;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#ccc transparent;
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 16px rgba(0,0,0,.07);
  padding:0 0 12px;
}
.trabajos-sidebar::-webkit-scrollbar{width:4px}
.trabajos-sidebar::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
.trabajos-sidebar-header{
  position:sticky;top:0;z-index:2;
  background:#fff;
  padding:14px 14px 10px;
  border-bottom:1px solid #f0f0f0;
}
.trabajos-sidebar-header h3{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.5px;
  margin:0;
  display:flex;align-items:center;gap:6px;
  color:#212529;
}
.trabajos-sidebar-grid{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
}
.trabajos-thumb{
  aspect-ratio:1;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  background:#f0f0f0;
  transition:transform .2s,box-shadow .2s;
}
.trabajos-thumb:hover{
  transform:scale(1.04);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.trabajos-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.trabajos-ver-mas{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 14px;
  font-size:.78rem;font-weight:600;
  color:var(--accent,#00a650);
  text-decoration:none;
  transition:color .2s;
}
.trabajos-ver-mas:hover{color:#008f45;text-decoration:underline}

/* ── Mobile: accordion ── */
.trabajos-mobile{
  display:none;
  margin-bottom:20px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.trabajos-mobile-toggle{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  background:#fff;
  border:none;
  font-size:.92rem;font-weight:700;
  color:#212529;
  cursor:pointer;
}
.trabajos-mobile-toggle span{display:flex;align-items:center;gap:8px}
.trabajos-chevron{transition:transform .3s}
.trabajos-chevron.open{transform:rotate(180deg)}
.trabajos-mobile-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}
.trabajos-mobile-body.open{
  max-height:600px;
  overflow-y:auto;
}
.trabajos-mobile-scroll{
  display:flex;
  gap:8px;
  padding:4px 14px 8px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.trabajos-mobile-scroll::-webkit-scrollbar{display:none}
.trabajos-mobile-scroll .trabajos-thumb{
  flex:0 0 100px;
  height:100px;
  scroll-snap-align:start;
  border-radius:10px;
}
.trabajos-ver-mas-mobile{
  padding:8px 14px 14px;
  font-size:.8rem;
}

/* ── Trabajos Modal ── */
.tr-modal-bg{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:none;align-items:center;justify-content:center;
  z-index:1000000;
}
.tr-modal{
  width:min(92vw,900px);
  height:min(88vh,820px);
  background:#fff;
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.tr-modal-close{
  position:absolute;top:10px;right:10px;
  width:40px;height:40px;border-radius:10px;
  border:0;background:#fff;cursor:pointer;
  font-size:22px;font-weight:900;line-height:40px;
  z-index:1000001;box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.tr-modal-close:hover{background:#f5f5f5}
.tr-modal-body{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.tr-carousel{
  width:100%;height:100%;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tr-carousel::-webkit-scrollbar{display:none}
.tr-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;
  padding:10px;
}
.tr-slide img{
  max-width:100%;max-height:100%;
  object-fit:contain;display:block;
  border-radius:8px;
}
.tr-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:10px;
  background:#fff;border:0;
  font-size:24px;font-weight:900;
  cursor:pointer;z-index:1000001;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.tr-nav:hover{background:#f5f5f5}
.tr-nav-left{left:8px}
.tr-nav-right{right:8px}
.tr-dots{
  position:absolute;bottom:10px;left:0;right:0;
  display:flex;justify-content:center;gap:5px;
  z-index:1000001;
}
.tr-dot{
  width:7px;height:7px;border-radius:50%;
  background:#bbb;transition:background .2s;
}
.tr-dot.on{background:#333}

/* ── Responsive ── */

/* ═══ ML-STYLE PRODUCT GALLERY ═══ */
.ml-gallery{
  display:flex;gap:10px;align-items:flex-start;
}
.ml-thumbs{
  display:flex;flex-direction:column;gap:6px;
  width:64px;flex-shrink:0;
  max-height:60vh;overflow-y:auto;
  scrollbar-width:thin;
}
.ml-thumb{
  width:60px;height:60px;border-radius:6px;
  border:2px solid var(--border-light);
  cursor:pointer;overflow:hidden;
  transition:border-color .2s;
  background:#f8f8f8;
  flex-shrink:0;
}
.ml-thumb:hover,.ml-thumb.active{
  border-color:var(--accent);
}
.ml-thumb img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.ml-thumb video{
  width:100%;height:100%;object-fit:cover;
  display:block;pointer-events:none;
}
.ml-thumb .ml-thumb-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);
  color:#fff;font-size:18px;
  pointer-events:none;
}
.ml-thumb{position:relative;}
.ml-main-wrap{
  flex:1;min-width:0;position:relative;
}
.ml-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);border:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;font-size:16px;color:var(--text);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:var(--transition);
}
.ml-nav:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ml-nav-prev{left:8px}
.ml-nav-next{right:8px}
.ml-dots{
  display:none;
  justify-content:center;gap:6px;
  padding:8px 0;
}
.ml-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--border-light);
  transition:background .2s;
  cursor:pointer;
}
.ml-dot.active{background:var(--accent)}
/* Video in preview */
.garment-video{
  max-width:100%;max-height:60vh;object-fit:contain;
  display:block;padding:8px;margin:0 auto;
  border-radius:var(--radius);
}
/* Mobile gallery */
@media(max-width:768px){
  .ml-gallery{flex-direction:column;gap:0}
  .ml-thumbs{
    flex-direction:row;width:100%;
    max-height:none;overflow-x:auto;overflow-y:hidden;
    order:2;padding:6px 0;gap:6px;
  }
  .ml-thumb{width:52px;height:52px;min-width:52px;}
  .ml-main-wrap{order:1;width:100%}
  .ml-nav{display:flex!important}
  .ml-dots{display:flex}
  .garment-video{max-height:48vh}
}
@media(max-width:576px){
  .ml-thumb{width:46px;height:46px;min-width:46px}
}