/* GNL · Producto terminado · tarjetas (2026-10-21)
   Solo afecta a .gnl-pt-* (snipplets/gnl-pt/card.tpl). Tipografía: la del sitio. */
.gnl-pt-col{display:flex;margin-bottom:22px}
.gnl-pt-card,.gnl-pt-card *,.gnl-pt-card *::before,.gnl-pt-card *::after{box-sizing:border-box}
.gnl-pt-card{--pt-blue:#104aa6;--pt-royal:#2e6dcc;--pt-green:#51AB44;--pt-ink:#0b1424;--pt-muted:#667286;--pt-line:#dde4ee;
  position:relative;display:flex;flex:1 1 auto;flex-direction:column;width:100%;min-width:0;margin:0!important;padding:0!important;overflow:hidden;
  background:#fff;border:1px solid rgba(15,52,101,.09);border-radius:22px;box-shadow:0 18px 55px rgba(15,42,82,.10);
  color:var(--pt-ink);font-family:inherit;transition:transform .25s ease,box-shadow .25s ease}
.gnl-pt-card:hover{transform:translateY(-5px);box-shadow:0 24px 65px rgba(15,42,82,.16)}
.gnl-pt-media{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;margin:8px;border-radius:17px;background:#edf2f7}
.gnl-pt-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gnl-pt-card:hover .gnl-pt-media img{transform:scale(1.035)}
.gnl-pt-details{display:flex;flex:1;flex-direction:column;padding:12px 19px 19px}
.gnl-pt-name{min-height:44px;margin:0 0 14px;font-size:16px;font-weight:700;line-height:1.38;letter-spacing:-.015em}
.gnl-pt-name a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gnl-pt-name a:hover{color:var(--pt-blue)}
.gnl-pt-qwrap[hidden]{display:none!important}
.gnl-pt-qlabel{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:9px;color:var(--pt-muted);font-size:11px;font-weight:700}
.gnl-pt-qlabel em{color:var(--pt-blue);font-style:normal;font-weight:800;text-align:right}
.gnl-pt-qty{display:grid;grid-template-columns:repeat(var(--gnl-pt-cols,3),minmax(0,1fr));gap:7px;margin-bottom:16px;padding-top:4px}
.gnl-pt-q{position:relative;min-height:44px;padding:11px 5px 8px;color:#314057;background:#fff;border:1px solid var(--pt-line);border-radius:11px;font:inherit;font-weight:800;font-size:13px;line-height:1.2;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.gnl-pt-q:hover{border-color:var(--pt-royal)}
.gnl-pt-q.active{color:#fff;background:var(--pt-blue);border-color:var(--pt-blue)}
.gnl-pt-q.is-out{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.gnl-pt-q small{position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:max-content;max-width:calc(100% + 14px);padding:2px 6px;color:#fff;background:var(--pt-green);border-radius:99px;font-size:7px;font-weight:800;letter-spacing:.05em;line-height:1.3;text-transform:uppercase;text-decoration:none;box-shadow:0 3px 9px rgba(81,171,68,.24)}
.gnl-pt-price{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-bottom:17px}
.gnl-pt-now{font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.1;color:var(--pt-ink)}
.gnl-pt-was{margin-left:5px;color:#8b96a8;font-size:11px}
.gnl-pt-was[hidden],.gnl-pt-save[hidden],.gnl-pt-unit[hidden]{display:none}
.gnl-pt-save{display:block;margin-top:2px;color:#19835b;font-size:10px;font-weight:800}
.gnl-pt-unit{color:#7a8798;font-size:10px;text-align:right;white-space:nowrap}
.gnl-pt-actions{display:grid;grid-template-columns:1.06fr .94fr;gap:8px;margin-top:auto}
.gnl-pt-actions.gnl-pt-one{grid-template-columns:1fr}
.gnl-pt-btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px;border-radius:11px;font:inherit;font-size:12px;font-weight:800;line-height:1.1;text-decoration:none!important;cursor:pointer;transition:transform .2s ease,filter .2s ease}
.gnl-pt-btn[hidden]{display:none}
.gnl-pt-btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.gnl-pt-custom{color:#fff!important;background:var(--pt-blue);border:1px solid var(--pt-blue)}
.gnl-pt-add{color:#fff!important;background:var(--pt-green);border:1px solid var(--pt-green);box-shadow:0 7px 18px rgba(81,171,68,.18)}
.gnl-pt-add:disabled{background:#a9b3c2;border-color:#a9b3c2;box-shadow:none;cursor:not-allowed;transform:none}
.gnl-pt-micro{margin:12px 0 0;color:#7a8798;font-size:9px;text-align:center}
/* Franja "Más de N clientes": mismo diseño, pero dentro del flujo de la tarjeta (nunca tapa los botones) */
.gnl-pt-card .js-gnl-sales-proof{position:static!important;flex:none;border-radius:0}
.gnl-pt-card button:focus-visible,.gnl-pt-card a:focus-visible{outline:3px solid rgba(46,109,204,.35);outline-offset:3px}
.gnl-pt-toast{position:fixed;z-index:10060;left:50%;bottom:22px;transform:translate(-50%,28px);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 30px);padding:13px 18px;color:#fff;background:#0a1629;border-radius:99px;box-shadow:0 14px 40px rgba(0,0,0,.24);font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:.25s ease}
.gnl-pt-toast.show{transform:translate(-50%,0);opacity:1}
.gnl-pt-toast i{display:grid;place-items:center;width:23px;height:23px;background:#2e6dcc;border-radius:50%;font-style:normal}
@media (max-width:767px){
  .gnl-pt-col{margin-bottom:12px;padding-left:5px;padding-right:5px}
  .gnl-pt-card{border-radius:16px}
  .gnl-pt-media{margin:6px;border-radius:12px}
  .gnl-pt-details{padding:10px 11px 13px}
  .gnl-pt-name{min-height:50px;margin-bottom:10px;font-size:12.5px}
  .gnl-pt-name a{-webkit-line-clamp:3}
  .gnl-pt-qlabel{font-size:9px}
  .gnl-pt-qlabel em{display:none}
  .gnl-pt-qty{gap:4px;margin-bottom:12px}
  .gnl-pt-q{min-height:39px;padding:10px 2px 7px;border-radius:8px;font-size:11px}
  .gnl-pt-q small{font-size:6px;padding:2px 4px}
  .gnl-pt-price{align-items:flex-start;flex-direction:column;gap:2px;margin-bottom:12px}
  .gnl-pt-now{font-size:18px}
  .gnl-pt-unit{text-align:left}
  .gnl-pt-actions{grid-template-columns:1fr}
  .gnl-pt-btn{min-height:39px;font-size:11px;border-radius:9px}
  .gnl-pt-micro{display:none}
}
@media (prefers-reduced-motion:reduce){.gnl-pt-card,.gnl-pt-card:hover,.gnl-pt-media img,.gnl-pt-btn{transition:none;transform:none!important}}

/* Productos que llegan con "Mostrar más productos": la tienda manda la tarjeta normal y, dentro,
   la tarjeta nueva oculta (.gnl-pt-alt). En esta página se muestra la nueva y se oculta la normal. */
html.gnl-pt-on .js-item-product > .gnl-pt-alt{display:flex!important}
html.gnl-pt-on .js-item-product > .gnl-pt-alt ~ .item,html.gnl-pt-on .js-item-product > .gnl-pt-alt ~ .js-gnl-ins-row{display:none!important}

/* 5 o 6 productos por fila en computadora: tarjeta compacta */
@media (min-width:768px){
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-details,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-details{padding:10px 13px 14px}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-name,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-name{font-size:14px;min-height:40px;margin-bottom:10px}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-actions,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-actions{grid-template-columns:1fr;gap:6px}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-btn,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-btn{min-height:40px}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-now,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-now{font-size:19px}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-price,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-price{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:12px}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-unit,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-unit{text-align:left}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-qlabel em,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-qlabel em{display:none}
  html.gnl-pt-cols-5 .gnl-pt-card .gnl-pt-q small,html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-q small{white-space:nowrap;max-width:none;font-size:6.5px;padding:2px 5px}
  html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-q{font-size:12px;padding:10px 2px 7px}
  html.gnl-pt-cols-6 .gnl-pt-card .gnl-pt-media{margin:6px;border-radius:13px}
}

/* Alineación: los botones quedan a la misma altura en toda la fila.
   La franja "Más de N clientes" siempre ocupa el mismo alto (vacía = espacio en blanco). */
.gnl-pt-card .js-gnl-sales-proof{display:flex!important;height:44px;min-height:0!important;overflow:hidden;font-size:11px!important}
.gnl-pt-card .js-gnl-sales-proof:empty{background:transparent!important}
.gnl-pt-card .js-gnl-sales-proof > span{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Estrellas de reseñas (app externa): compactas, debajo del precio */
.gnl-pt-card .cont-star-revie{margin:-2px 0 8px!important;line-height:1;text-align:left!important}
.gnl-pt-card .cont-star-revie .revieStar,.gnl-pt-card .cont-star-revie .revieStar > div{justify-content:flex-start!important;text-align:left!important;margin:0!important}
.gnl-pt-card .cont-star-revie .revieStar > div{display:flex!important;align-items:center;gap:4px}
.gnl-pt-card .cont-star-revie i{font-size:17px!important;line-height:1!important;height:auto!important}
.gnl-pt-card .cont-star-revie span{font-size:11px!important;color:#667286}
@media (max-width:767px){.gnl-pt-card .js-gnl-sales-proof{height:52px;font-size:10.5px!important;padding:6px 10px!important}}

/* Columnas por fila en computadora según la configuración actual del tema (clase en <html>) */
@media (min-width:768px){
  html.gnl-pt-cols-2 .js-product-table > .js-item-product{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
  html.gnl-pt-cols-3 .js-product-table > .js-item-product{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
  html.gnl-pt-cols-4 .js-product-table > .js-item-product{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
  html.gnl-pt-cols-5 .js-product-table > .js-item-product{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}
  html.gnl-pt-cols-6 .js-product-table > .js-item-product{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
}

/* Tarjeta compacta en vertical (2026-10-21): mismo acomodo y elementos, menos aire.
   Imagen 10:9, botones y cantidades de 36px, menos separación entre filas. */
html.gnl-pt-on .products-grid > .item-product{margin-bottom:16px}
@media (min-width:768px){
  .gnl-pt-card .gnl-pt-media{aspect-ratio:10/9}
  .gnl-pt-card .gnl-pt-details,html[class*=gnl-pt-cols] .gnl-pt-card .gnl-pt-details{padding:8px 13px 10px}
  .gnl-pt-card .gnl-pt-name,html[class*=gnl-pt-cols] .gnl-pt-card .gnl-pt-name{margin-bottom:6px}
  .gnl-pt-card .gnl-pt-qlabel{margin-bottom:5px}
  .gnl-pt-card .gnl-pt-qty{margin-bottom:10px}
  .gnl-pt-card .gnl-pt-q,html[class*=gnl-pt-cols] .gnl-pt-card .gnl-pt-q{min-height:36px;padding:9px 3px 5px}
  .gnl-pt-card .gnl-pt-price,html[class*=gnl-pt-cols] .gnl-pt-card .gnl-pt-price{margin-bottom:6px}
  .gnl-pt-card .gnl-pt-actions,html[class*=gnl-pt-cols] .gnl-pt-card .gnl-pt-actions{gap:5px}
  .gnl-pt-card .gnl-pt-btn,html[class*=gnl-pt-cols] .gnl-pt-card .gnl-pt-btn{min-height:36px;padding:8px}
  .gnl-pt-card .gnl-pt-micro{margin-top:7px}
  .gnl-pt-card .js-gnl-sales-proof{height:38px;padding:5px 12px!important}
}