/* =========================
   Paleta y tokens básicos
   ========================= */
   :root{
    --brand-600:#2c5f41;
    --brand-700:#1e3e2f;
    --ink-900:#111827;
    --ink-700:#374151;
    --ink-500:#6b7280;
    --muted:#f3f4f6;
    --ring:#e5e7eb;
    --radius-lg:16px;
    --radius-xl:20px;
    --shadow-sm:0 4px 18px rgba(17,24,39,.06);
    --shadow-lg:0 12px 32px rgba(17,24,39,.10);
    --pattern-size: 120px;
    --gray-0: #f3f4f6;
    --gray-1: #e5e7eb;
  }
  
  /* =========================
     Layout detalle de producto
     ========================= */
  .product-container{
    max-width: 1230px;
    margin: 84px auto;
    padding: 20px;
/* Capa 1: patrón SVG (líneas diagonales) + Capa 2: gris degradado */
background-image:
url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-10 10 L40 50 M20 40 L70 80 M40 70 L90 110' stroke='%232f3b46' stroke-opacity='0.12' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
linear-gradient(180deg, var(--gray-0) 0%, var(--gray-1) 100%);
background-repeat: repeat, no-repeat;
background-size: var(--pattern-size) var(--pattern-size), cover;
background-position: 0 0, center;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border:1px solid var(--ring);
  }
  
  .product-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr; /* galería ligeramente más grande */
    gap: 48px;
    margin-top: 36px;
  }
  
  .product-gallery{ position: relative; }
  
  /* Imagen principal con proporción elegante y fondo neutro */
  .main-image{
    width:100%;
    aspect-ratio: 4 / 3;
    max-height: 560px;
    object-fit: contain;
    background:#fff;
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border:1px solid var(--ring);
  }
  
  /* Thumbnails compactas */
  .thumbnail-container{
    display:flex;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
  }
  .thumbnail{
    width:76px; height:76px;
    object-fit: contain;
    border-radius:12px;
    cursor:pointer;
    border:2px solid transparent;
    outline:1px solid var(--ring);
    transition: transform .2s ease, border-color .2s ease, outline-color .2s ease;
  }
  .thumbnail:hover,
  .thumbnail.active{
    border-color: var(--brand-600);
    outline-color: rgba(44,95,65,.25);
    transform: translateY(-2px);
  }
  
  /* Información */
  .product-info{ padding: 8px 0; }
  
  .product-category{
    color:var(--ink-500);
    text-transform:uppercase;
    font-size:.8rem;
    letter-spacing:.08em;
    margin-bottom:8px;
    display:block;
  }
  
  .product-title{
    font-size:24px !important;
    font-weight:800;
    color:var(--brand-600);
    line-height:1.15;
    margin: 6px 0 12px;
  }
  
  .product-price{
    font-size: 26px;
    font-weight:700;
    color:var(--brand-600);
    margin: 10px 0 18px;
  }
  
  .product-description{
    color:var(--ink-700);
    line-height:1.75;
    margin-bottom: 24px;
  }
  
  /* Meta en una sola fila */
.product-meta{
    display:flex;
    align-items:center;
    gap:10px;                 /* espacio entre items */
    margin:24px 0;
    padding:16px 0;
    border-top:1px solid var(--ring);
    border-bottom:1px solid var(--ring);
    flex-wrap:nowrap;         /* no se va a otra línea en desktop */
    overflow:auto;            /* evita que rompa el layout si hay poco espacio */
  }
  
  .meta-item{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ink-700);
    white-space:nowrap;       /* que el texto del item no haga salto */
  }
  
  .meta-item i{
    color:var(--brand-600);
    width:20px;
    text-align:center;
  }
  
  /* En móvil permitimos que baje a dos filas si hiciera falta */
  @media (max-width: 576px){
    .product-meta{ flex-wrap:wrap; }
  }
  
  /* Cantidad */
  .quantity-selector{ display:flex; align-items:center; gap:0; margin: 18px 0; }
  .quantity-btn{
    width:40px; height:40px;
    border:1px solid var(--ring);
    background:#fff; font-size:1.1rem; cursor:pointer;
    transition: background .2s ease, transform .06s ease;
    border-radius:10px;
  }
  .quantity-btn:active{ transform: scale(.98); }
  .quantity-input{
    width:68px; height:40px; text-align:center;
    border:1px solid var(--ring);
    margin: 0 8px;
    border-radius:10px;
    font-size:1rem;
  }
  
  /* Botón CTA */
  .btn-add-to-cart{
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
    color:#fff; border:none;
    padding: 12px 24px;
    font-size:.95rem; font-weight:700;
    border-radius: 12px;
    cursor:pointer; letter-spacing:.04em;
    display:inline-flex; align-items:center; gap:10px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  }
  .btn-add-to-cart:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .btn-add-to-cart:active{ transform: translateY(0); }

  .product-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    margin-top:24px;
  }

  .btn-favorite{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8.5px 20px;
    border-radius:12px;
    border:1px solid var(--ring);
    background:#fff;
    color:var(--ink-600);
    font-weight:600;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
    box-shadow: var(--shadow-xs);
  }

  .btn-favorite:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(239, 68, 68, 0.35);
    color:#b91c1c;
  }

  .btn-favorite.is-active,
  .btn-favorite.active{
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.12) 100%);
    border-color: rgba(220, 38, 38, 0.45);
    color:#b91c1c;
  }

  .btn-favorite .favorite-heart::before{
    content:"♡";
    font-size:1.2rem;
  }

  .btn-favorite.is-active .favorite-heart::before,
  .btn-favorite.active .favorite-heart::before{
    content:"♥";
  }
  
  /* Tabs (Bootstrap override suave) */
  .product-tabs{ margin: 48px 0; }
  .nav-tabs{ border:none; justify-content:center; gap:8px; margin-bottom:18px; }
  .nav-tabs .nav-link{
    border:none;
    color:var(--ink-500);
    font-weight:600;
    padding:10px 18px;
    border-radius: 999px;
    background: transparent;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .nav-tabs .nav-link.active{
    color: var(--brand-600);
    box-shadow: inset 0 0 0 1px var(--ring);
  }
  
  .tab-content{
    padding: 24px;
    background:#fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border:1px solid var(--ring);
  }
  
  /* =========================
     Sección relacionados (grid)
     ========================= */
  .related-products{ margin: 56px 0; }
  .related-title{
    text-align:center;
    font-size: clamp(1.3rem, 1.1rem + .6vw, 1.8rem);
    color: var(--brand-600);
    margin-bottom: 28px;
    position:relative;
    padding-bottom: 10px;
  }
  .related-title::after{
    content:"";
    position:absolute; inset:auto 0 0 0; margin:auto;
    width:96px; height:3px; background: var(--brand-600);
    border-radius: 3px;
  }
  
  /* Grid de similares: 4 por vista, responsivo */
  .products-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 18px;
  }
  
  /* ====== Card ====== */
.product-card{
  background:#fff;
  border-radius: var(--radius-xl);
  padding: 16px;
  border:1px solid var(--ring);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
  position: relative;
  overflow: visible;          /* permite el lift sin recortar sombras */

  /* >>> Alturas parejas */
  display:flex;
  flex-direction:column;
  height:100%;
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(44,95,65,.18);
}

/* Bisel superior sutil */
.product-card::before{
  content:"";
  position:absolute; top:0; left:10%;
  width:80%; height:3px;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .25s ease;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.product-card:hover::before{ transform: scaleX(1); }

/* Header e imagen */
.product-header{
  display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 12px;
}
.product-image{
  width:100%;
  height: 180px;              /* altura consistente */
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
}
.product-image img{ width:100%; height:100%; object-fit: contain; }

/* Favoritos */
.product-card .favorite-button{
  position:absolute; top:12px; right:12px;
  background:none; border:none; cursor:pointer;
  font-size:20px; color:#cbd5e1;
  transition: color .2s ease, transform .1s ease;
}
.product-card .favorite-button:hover{ color:#ef4444; transform: scale(1.1); }

/* Textos del card */
.brand{
  color:var(--ink-500); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:6px; font-weight:600;

  /* una sola línea para no estirar el card */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;
  overflow:hidden; line-height:1.2; min-height:1.2em;
}
.product-name{
  color:#1f2937; font-size:.98rem; font-weight:700; line-height:1.35; margin-bottom:6px;

  /* máximo 2 líneas + altura mínima exacta */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height: calc(1.35em * 2);
}

/* Precios (soporta .price y .price-section) */
.price{ color:#059669; font-size:1rem; font-weight:800; margin-bottom:8px; display:flex; align-items:center; }
.currency{ font-size:.95rem; margin-right: 3px; }

.price-section{
  display:flex; align-items:center; gap:8px;
  min-height:24px;        /* mantiene la fila aunque falte el tachado */
  margin-bottom:8px;
}
.price-section .current-price{ color:#2c5f41; font-weight:800; font-size:2rem; }
.price-section .original-price{ color:#9aa0a6; text-decoration:line-through; }

/* Chips: una sola fila para no romper altura */
.delivery-options{
  display:flex; gap:6px; margin-bottom:12px;
  flex-wrap:nowrap; white-space:nowrap; overflow:hidden;
  min-height:22px;          /* altura fija de la fila de chips */
}
.delivery-option{
  display:flex; align-items:center; gap:5px;
  color:#059669; font-size:.68rem;
  padding:4px 8px; background: rgba(5,150,105,.10);
  border-radius: 999px; font-weight:600;
}

/* Botón detalles: igual altura y pegado abajo */
.details-btn{
  margin-top:auto;                 /* >>> fija el botón al fondo */
  width:100%;
  height:46px; min-height:46px;   /* >>> misma altura en todos */
  display:flex; align-items:center; justify-content:center;

  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color:#fff; border:none; padding: 0 16px;
  border-radius:12px; font-size:.92rem; font-weight:700;
  cursor:pointer; text-transform:uppercase; letter-spacing:.03em;
  position:relative; overflow:hidden;
  transition: transform .12s ease, box-shadow .2s ease;
}
.details-btn::before{
  content:""; position:absolute; inset:0; left:-100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .5s;
}
.details-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(5,150,105,.28); }
.details-btn:hover::before{ left:100%; }

/* =========================
   Responsivo
   ========================= */
@media (max-width: 1200px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .products-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); }
  .product-image{ height: 170px; }
}
@media (max-width: 992px){
  .product-grid{ grid-template-columns: 1fr; gap:28px; }
  .main-image{ aspect-ratio: 3 / 2; }
  .products-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 576px){
  .product-container{ padding: 0 14px; }
  .main-image{ padding:18px; }
  .products-grid{ grid-template-columns: 1fr; gap:16px; }
  .product-image{ height: 180px; }

  /* en móvil permite 3 líneas del nombre sin romper la paridad */
  .product-name{ -webkit-line-clamp:3; min-height: calc(1.35em * 3); }

  .btn-favorite{
    padding:8.5px 14px;
    gap:6px;
  }

  .btn-favorite .favorite-label{
    display:none;
  }
}