.imf-pgl-wrap { font-family: 'Inter', sans-serif; }

.imf-pgl-main {
  position: relative;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.imf-pgl-main-img {
  width: 100% !important; height: 100% !important; max-width: 100% !important;
  object-fit: contain; object-position: center center; padding: 0; display: block;
  margin: 0 !important; box-sizing: border-box;
}
.imf-pgl-no-img {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient( 160deg, #F7F7F5, #ECECE8 );
}
.imf-pgl-no-img svg { width: 30%; height: 30%; color: #C9C9C3; }

.imf-pgl-off {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  background: #E94E1B !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.imf-pgl-thumbs { margin-top: 12px; display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 12px; }
.imf-pgl-thumb {
  background: #F5F5F5 !important; border: 1px solid #E5E5E5 !important; border-radius: 8px;
  aspect-ratio: 1 / 1; overflow: hidden; padding: 0; cursor: pointer; transition: border-color .2s;
  box-shadow: none !important; color: inherit !important; text-decoration: none !important;
}
/* El tema pinta cualquier <button> con su propio color de fondo/texto en
   hover/focus — se anula en todos los estados, igual que ya nos pasó con
   el resto de los widgets de este proyecto. */
.imf-pgl-thumb:hover, .imf-pgl-thumb:focus,
.imf-pgl-thumb.imf-pgl-thumb--active {
  border-color: #E94E1B !important;
  background: #F5F5F5 !important;
  color: inherit !important;
}
.imf-pgl-thumb img {
  width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important;
  box-sizing: border-box; object-fit: contain; object-position: center center; padding: 8px; display: block;
}

.imf-pgl-caption { margin-top: 12px; font-size: 12px; color: #5A5A5A !important; line-height: 1.5; }

@media (max-width: 600px) {
  .imf-pgl-thumbs { gap: 8px; }
  .imf-pgl-off { font-size: 14px; padding: 5px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Precio + Cotizar
   ══════════════════════════════════════════════════════════════════════ */
.imf-pcl-wrap {
  font-family: 'Inter', sans-serif;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  padding: 24px;
}

.imf-pcl-top { display: flex; align-items: center; gap: 10px; }
.imf-pcl-old { font-size: 15px; color: #5A5A5A !important; text-decoration: line-through; text-decoration-color: #B9B9B3; }
.imf-pcl-off {
  background: #E94E1B !important; color: #fff !important; font-size: 12px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums;
}

.imf-pcl-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.imf-pcl-price { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #1A1A1A !important; font-variant-numeric: tabular-nums; }
.imf-pcl-saved { font-size: 14px; font-weight: 600; color: #E94E1B !important; }

.imf-pcl-iva { font-size: 12.5px; color: #5A5A5A !important; margin: 8px 0 0; }

.imf-pcl-divider { height: 1px; background: #E5E5E5; margin: 20px 0; }
.imf-pcl-note { font-size: 12.5px; color: #5A5A5A !important; margin: 0; line-height: 1.5; }

.imf-pcl-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

.imf-pcl-qty {
  display: flex; align-items: center; height: 48px; border: 1px solid #E5E5E5; border-radius: 10px;
  background: #fff; overflow: hidden; flex-shrink: 0;
}
.imf-pcl-qty-btn {
  width: 44px; height: 100%; background: #fff !important; border: none !important; box-shadow: none !important;
  font-size: 18px; color: #1A1A1A !important; cursor: pointer; transition: background .15s, color .15s;
}
.imf-pcl-qty-btn:hover { background: #1A1A1A !important; color: #fff !important; }
.imf-pcl-qty-input {
  width: 48px; height: 100%; border: none !important; border-left: 1px solid #E5E5E5 !important; border-right: 1px solid #E5E5E5 !important;
  text-align: center; font-size: 15px; font-weight: 700; color: #1A1A1A !important; outline: none; font-family: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}
.imf-pcl-qty-input::-webkit-outer-spin-button, .imf-pcl-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.imf-pcl-add {
  flex: 1; display: flex !important; align-items: center; justify-content: center; gap: 8px; min-width: 200px;
  height: 48px; background: #E94E1B !important; color: #fff !important; font-weight: 700; font-size: 15px;
  border-radius: 10px; border: none !important; box-shadow: none !important; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.imf-pcl-add:hover { background: #C8401A !important; }
.imf-pcl-add svg { width: 16px; height: 16px; }

.imf-pcl-buy-now {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 10px;
  background: #1A1A1A !important; color: #fff !important; font-weight: 600; font-size: 14.5px;
  border-radius: 10px; border: none !important; box-shadow: none !important; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.imf-pcl-buy-now:hover { background: #0E0E0E !important; }
.imf-pcl-buy-now svg { width: 16px; height: 16px; }

.imf-pcl-whatsapp {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 10px;
  font-size: 13.5px; color: #5A5A5A !important; text-decoration: none !important; transition: color .15s;
}
.imf-pcl-whatsapp:hover { color: #E94E1B !important; }

/* ══════════════════════════════════════════════════════════════════════
   Confianza
   ══════════════════════════════════════════════════════════════════════ */
.imf-pcf-grid {
  font-family: 'Inter', sans-serif;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 480px) { .imf-pcf-grid { grid-template-columns: 1fr; } }
.imf-pcf-item {
  display: flex; align-items: flex-start; gap: 10px; border: 1px solid #E5E5E5; border-radius: 10px;
  padding: 14px; font-size: 13px; color: #1A1A1A;
}
.imf-pcf-item svg { width: 16px; height: 16px; color: #E94E1B; flex-shrink: 0; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   Pestañas
   ══════════════════════════════════════════════════════════════════════ */
.imf-ptb-wrap { font-family: 'Inter', sans-serif; }
.imf-ptb-nav { display: flex; gap: 24px; border-bottom: 1px solid #E5E5E5; }

@media (max-width: 600px) {
  /* En mobile no hay pestañas — se muestran las 3 secciones apiladas,
     cada una con su propio título, sin nada que pueda desbordar de lado. */
  .imf-ptb-nav { display: none; }

  .imf-ptb-panel[hidden] { display: block !important; }
  .imf-ptb-panel {
    border-top: 1px solid #E5E5E5;
    padding-top: 20px;
    margin-top: 20px;
  }
  .imf-ptb-panel:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

  .imf-ptb-panel::before {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 12px;
  }
  .imf-ptb-panel[data-panel="0"]::before { content: "Descripción"; }
  .imf-ptb-panel[data-panel="1"]::before { content: "Especificaciones"; }
  .imf-ptb-panel[data-panel="2"]::before { content: "Despacho y garantía"; }
}
.imf-ptb-btn {
  padding-bottom: 12px; font-size: 14px; font-weight: 600; background: none !important; border: none !important;
  box-shadow: none !important; cursor: pointer; font-family: inherit; color: #5A5A5A !important;
  border-bottom: 2px solid transparent !important; transition: color .15s, border-color .15s;
}
.imf-ptb-btn:hover { color: #1A1A1A !important; }
.imf-ptb-btn--on, .imf-ptb-btn--on:hover { color: #1A1A1A !important; border-bottom-color: #E94E1B !important; }

.imf-ptb-panel { padding-top: 20px; font-size: 14.5px; line-height: 1.7; color: #5A5A5A; }
.imf-ptb-panel[hidden] { display: none; }
.imf-ptb-panel p { margin: 0 0 14px; }
.imf-ptb-panel b { color: #1A1A1A; }
.imf-ptb-panel a { color: #E94E1B; text-decoration: none; }
.imf-ptb-panel a:hover { text-decoration: underline; }

.imf-ptb-specs { border-top: 1px solid #E5E5E5; }
.imf-ptb-specs > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid #E5E5E5; }
.imf-ptb-specs dt { font-size: 13px; color: #5A5A5A; margin: 0; }
.imf-ptb-specs dd { font-size: 14px; font-weight: 500; color: #1A1A1A; margin: 0; }
@media (max-width: 480px) { .imf-ptb-specs > div { grid-template-columns: 130px 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   Relacionados
   ══════════════════════════════════════════════════════════════════════ */
.imf-pr-wrap { font-family: 'Inter', sans-serif; }
.imf-pr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.imf-pr-eyebrow { color: #E94E1B; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 8px; }
.imf-pr-titulo { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: #1A1A1A; }
@media (min-width: 768px) { .imf-pr-titulo { font-size: 32px; } }
.imf-pr-ver {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
  color: #1A1A1A !important; text-decoration: none !important; flex-shrink: 0; transition: color .15s;
}
.imf-pr-ver:hover { color: #E94E1B !important; }
.imf-pr-ver svg { width: 14px; height: 14px; }

.imf-pr-grid { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 16px; }
@media (min-width: 768px) { .imf-pr-grid { grid-template-columns: repeat( 4, 1fr ); gap: 20px; } }

.imf-pr-card {
  display: block; background: #fff; border: 1px solid #E5E5E5; border-radius: 12px; overflow: hidden;
  text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.imf-pr-card:hover { transform: translateY( -3px ); box-shadow: 0 16px 32px -16px rgba( 26, 26, 26, .25 ); border-color: #1A1A1A; }

.imf-pr-card-img { position: relative; aspect-ratio: 4 / 3; background: #F5F5F5; }
.imf-pr-card-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.imf-pr-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient( 160deg, #F7F7F5, #ECECE8 ); }
.imf-pr-no-img svg { width: 34%; height: 34%; color: #C9C9C3; }
.imf-pr-off {
  position: absolute; top: 10px; left: 10px; z-index: 2; background: #E94E1B !important; color: #fff !important;
  font-size: 12.5px; font-weight: 800; padding: 4px 9px; border-radius: 8px; font-variant-numeric: tabular-nums;
}

.imf-pr-card-body { padding: 14px; }
.imf-pr-name {
  font-size: 13px; font-weight: 600; color: #1A1A1A; line-height: 1.35; min-height: 36px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.imf-pr-old { font-size: 12px; color: #5A5A5A; text-decoration: line-through; margin-top: 8px; }
.imf-pr-sale { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #1A1A1A; }