/* =============== CATALOG & PRODUCT GRID/LIST =============== */
.main-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto 40px auto;
  padding: 0 2vw;
  gap: 3vw;
  box-sizing: border-box;
}

.catalog-layout {
  display: flex;
  gap: 2vw;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
}

#sidebar {
  width: 270px;
  min-width: 200px;
  max-width: 340px;
  background: #f7fafd;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(23, 80, 156, 0.05);
  padding: 1.7em 1.2em 1.3em 1.2em;
  margin-top: 8px;
  margin-bottom: 16px;
}

#catalog-container.catalog.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 1600px;
  margin: 5px auto 0 auto;
}

#catalog-container.catalog.list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}


/* Product card styles - grid */
#catalog-container.catalog.grid .product-item {
  width: 500px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  margin-bottom: 10px;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
  transition: box-shadow 0.18s, transform 0.18s;
  position: relative;
  cursor: pointer;
}
#catalog-container.catalog.grid .product-item:hover {
  box-shadow: 0 8px 32px rgba(40,80,140,0.19);
  transform: translateY(-2px) scale(1.013);
}

/* Product card styles - list */
.list-view #catalog-container .product-item {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 16px auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 18px 16px;
  border: 1.5px solid #e0e7ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(40,80,140,0.09);
  gap: 32px;
  text-align: left;
}

.product-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-img-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}
.product-img {
  max-width: 120px;
  max-height: 95px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e4eaf5;
  background: #f3f7fa;
  transition: opacity 0.2s;
}
.product-title {
  font-size: 1.09em;
  font-weight: 600;
  color: #21293b;
  text-align: center;
  margin: 6px 0 4px 0;
}
.product-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.2em;
  font-size: 0.99em;
  color: #444a58;
  margin-bottom: 5px;
}
.sku, .brand, .price, .voltaje, .capacidad, .quimica {
  margin-right: 9px;
  color: #68708c;
}
.price {
  color: #169f5c;
  font-weight: 700;
}
.ver-detalles-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.ver-detalles-link {
  color: #38d5ff;
  font-weight: 600;
  text-decoration: none;
  padding: 3px 16px;
  border-radius: 7px;
  background: #f2f9ff;
  border: 1px solid #38d5ff;
  transition: background 0.13s, color 0.13s;
  cursor: pointer;
}
.ver-detalles-link:hover,
.ver-detalles-link:focus {
  background: #38d5ff;
  color: #fff;
}

/* =============== CATEGORY GRID =============== */
.catalog .category-item {
  align-items: center;
  justify-content: center;
  min-height: 170px;
  text-align: center;
  background: #f2f7fd;
  border: 1.5px solid #e3e6eb;
  cursor: pointer;
}
.catalog .category-item:hover {
  border-color: #38d5ff;
  background: #e3f3fd;
  transform: scale(1.015);
}

.catalog .category-item img {
  display: block;
  margin: 0 auto 12px auto;
  max-width: 150px;
  max-height: 70px;
  border-radius: 1px;
  padding: 2px 4px;
}

.catalog .category-item h3 {
  font-size: 1.18rem;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: #1d263b;
}
.catalog .category-item p {
  font-size: 0.98rem;
  color: #606e7e;
  margin: 0;
}
/* ===== Breadcrumb Bar ===== */
.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 18px;
  background-color: #f6f6f7;
  font-size: 1.10rem;
  font-weight: 500;
  color: #23272f;
  border-bottom: 1px solid #ebebee;
  min-height: 32px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.breadcrumb-bar a {
  color: #38d5ff;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.breadcrumb-bar a:hover {
  text-decoration: underline;
  color: #005bb5;
}
.breadcrumb-separator {
  color: #b0b8c1;
  font-size: 1.15em;
  user-select: none;
}
.breadcrumb-icon {
  margin-right: 2px;
  font-size: 1.17em;
  vertical-align: middle;
}
.breadcrumb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* =============== PRODUCT DETAIL =============== */
#detail-view {
  /* width: 100%; */ /* width: 100% removed as per instruction */
  max-width: none;
  margin: 0 auto 24px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(40,80,140,0.11);
  padding: 2.2em 2.2em 2em 2.2em;
  display: none;
  flex-direction: row;
  gap: 2.5vw;
  align-items: flex-start;
  position: relative;
}
#detail-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #f2f7fd;
  border: 1px solid #e4eaf5;
  margin-right: 18px;
  box-shadow: 0 2px 12px rgba(40,80,140,0.07);
}
#detail-main {
  flex: 1;
}
#detail-name {
  font-size: 1.31em;
  font-weight: 700;
  color: #23272f;
  margin: 0 0 8px 0;
}
#detail-description {
  font-size: 1.05em;
  color: #3d4a5c;
  margin: 0 0 13px 0;
}
.detail-specs {
  margin-top: 9px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 2em;
}
.detail-spec {
  font-size: 1em;
  color: #68708c;
  margin-bottom: 2px;
}
.stock-status {
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 9px;
  margin-left: 7px;
}
.stock-status.in-stock { color: #21b569;}
.stock-status.out-stock { color: #cf2828;}

#spec-datasheet {
  display: inline-block;
  margin-top: 4px;
  color: #38d5ff;
  background: #f2f9ff;
  border: 1px solid #38d5ff;
  border-radius: 7px;
  padding: 3px 13px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.13s, color 0.13s;
}
#spec-datasheet:hover { background: #38d5ff; color: #fff; }

#spec-precio {
  font-size: 1.17em;
  font-weight: 700;
  margin-left: 8px;
}
#quote-notification {
  display: none;
  margin-top: 9px;
  color: #006bcf;
  background: #e6f3fd;
  border-radius: 7px;
  padding: 6px 14px;
  font-weight: 600;
}

/* =============== FEATURED SECTION =============== */
#featured-section {
  margin: 35px auto 40px auto;
  width: 100%;
  max-width: 1320px;
  padding: 2.3em 2vw 1.5em 2vw;
  background: #f8fbff;
  border-radius: 15px;
  box-shadow: 0 4px 24px rgba(40,80,140,0.07);
  text-align: center;
}
#featured-section h2 {
  font-size: 1.35em;
  font-weight: 700;
  color: #26324a;
  margin-bottom: 0.5em;
}
#featured-section .featured-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  justify-content: center;
}
#featured-section .featured-item {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(40,80,140,0.07);
  padding: 1.3em 2em;
  min-width: 200px;
  margin-bottom: 1.4em;
}
#featured-section .featured-title {
  font-weight: 600;
  font-size: 1.12em;
  color: #2b4865;
  margin-bottom: 0.45em;
}
#featured-section .featured-desc {
  color: #496989;
  font-size: 1em;
  margin-bottom: 0.2em;
}

/* =============== CONTROLS & TOGGLE BUTTONS =============== */
.toggle-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 13px;
}
.toggle-button {
  background: #e6eef9;
  color: #38d5ff;
  border: none;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  transition: background 0.14s, color 0.14s;
  cursor: pointer;
}
.toggle-button:hover,
.toggle-button.active {
  background: #38d5ff;
  color: #fff;
}

/* =============== RESPONSIVE: MAIN CONTENT =============== */
@media (max-width: 1200px) {
  .main-content, .catalog-layout {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  #sidebar {
    width: 100%;
    max-width: 100%;
    min-width: unset;
    margin-bottom: 18px;
  }
  #catalog-container.catalog.grid,
  #catalog-container.catalog.list {
    width: 100%;
    margin: 0;
  }
}
@media (max-width: 900px) {
  #catalog-container.catalog.grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .main-content,
  .catalog-layout {
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    padding: 0 1vw;
  }
}
@media (max-width: 700px) {
  #sidebar {
    display: none;
  }
  .main-content,
  .catalog-layout {
    flex-direction: column;
    gap: 12px;
    padding: 0 0.5vw;
  }
  #catalog-container.catalog.grid,
  #catalog-container.catalog.list {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  #detail-view {
    flex-direction: column;
    align-items: center;
    padding: 1.3em 0.5em 1em 0.5em;
  }
  #detail-img {
    margin: 0 0 14px 0;
  }
  #breadcrumb-bar {
    font-size: 0.95em;
    gap: 7px;
  }
}

/* =============== NO RESULTS MESSAGE =============== */
#no-results {
  text-align: center;
  color: #cb1c1c;
  font-weight: 700;
  background: #f8e8e8;
  border-radius: 12px;
  padding: 25px 15px;
  font-size: 1.14em;
  display: none;
  margin: 45px 0 0 0;
}

/* =============== PRINT STYLES =============== */
@media print {
  .main-content,
  #sidebar,
  .toggle-buttons,
  #breadcrumb-bar,
  #featured-section {
    display: none !important;
  }
  #catalog-container {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }
  .catalog .product-item {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    margin: 0 !important;
  }
}

/* ==============================
   CATEGORY‐PAGE LAYOUT (2‐column)
   ============================== */

.category-page {
  display: flex;
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ----- 1) FILTER SIDEBAR ----- */
.filter-sidebar {
  flex: 0 0 260px;           /* fixed width for the filter panel */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Category title/description at top of filter sidebar */
.category-info h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #23272f;
}
.category-info p {
  font-size: 0.94rem;
  color: #444c5b;
  line-height: 1.6;
}

/* Each filter section */
.filter-section {
  border: 1px solid #e3e6eb;
  border-radius: 6px;
  overflow: hidden;
}
.filter-section + .filter-section {
  margin-top: 12px;
}
.filter-section .filter-header {
  width: 100%;
  background: #f7f8fa;
  border: none;
  padding: 10px 14px;
  font-size: 1.03rem;
  font-weight: 500;
  text-align: left;
  color: #23272f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; /* if you add a caret on the right */
}
.filter-section .filter-body {
  padding: 10px 14px;
  background: #ffffff;
  display: none; /* hidden by default; toggle via JS */
}
.filter-section .filter-body label {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: #333f53;
  cursor: pointer;
}
.filter-section .filter-body label input {
  margin-right: 8px;
  accent-color: #38d5ff;
}

/* “Apply” button in the Price section */
.btn-apply-price {
  margin-top: 8px;
  background: #38d5ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.94rem;
  cursor: pointer;
}
.btn-apply-price:hover {
  background: #005bb5;
}

/* “Show more” button if you have many checkboxes */
.btn-show-more {
  background: none;
  border: none;
  color: #38d5ff;
  font-size: 0.94rem;
  cursor: pointer;
  margin-top: 4px;
}
.btn-show-more:hover {
  text-decoration: underline;
}

/* ----- 2) PRODUCTS COLUMN ----- */
.products-column {
  flex: 1;                   /* fill the remaining width */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* -- 2A) Products Header Bar (inside products column) -- */
.products-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  background: #ffffff;
  border: 1px solid #e3e6eb;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Header: left side (Item count + “Show per page”) */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  color: #23272f;
}
.header-left .item-count {
  font-weight: 600;
}
.header-left select#items-per-page {
  padding: 4px 8px;
  border: 1px solid #c3c8d0;
  border-radius: 6px;
  font-size: 0.95rem;
  outline: none;
  appearance: none;
  background: #fff url('data:image/svg+xml;utf8,<svg fill="gray" height="8" viewBox="0 0 20 20" width="8" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l10 10 10-10z"/></svg>') no-repeat right 8px center;
  background-size: 8px 8px;
  cursor: pointer;
}

/* Header: right side (Grid/List toggles + Sort) */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-right .toggle-button {
  background: #38d5ff;
  border: none;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s;
}
.header-right .toggle-button svg {
  fill: #fff;
}
.header-right .toggle-button:hover,
.header-right .toggle-button.active {
  background: #005bb5;
}
.header-right select#sort-select {
  padding: 4px 8px;
  border: 1px solid #c3c8d0;
  border-radius: 6px;
  font-size: 0.95rem;
  outline: none;
  appearance: none;
  background: #fff url('data:image/svg+xml;utf8,<svg fill="gray" height="8" viewBox="0 0 20 20" width="8" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l10 10 10-10z"/></svg>') no-repeat right 8px center;
  background-size: 8px 8px;
  cursor: pointer;
}
/* ===== CATEGORY OVERVIEW LAYOUT ===== */
/* When in “categories” view (body has .categories-view), display categories in a flexible wrap layout rather than grid */
.categories-view #catalog-container.catalog.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  box-sizing: border-box;
}

/* Style each category card */
.categories-view .category-item {
  width: 220px;
  height: 180px;
  margin-bottom: 16px;
  background: #fff;
  border: 1.5px solid #e0e7ef;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.14s, border 0.14s, transform 0.14s;
}
.filter-select {
  min-width: 120px;
  background: #fff;
  color: #32425a;
  border: 1.5px solid #d0d7de;
  border-radius: 8px;
  padding: 0 14px;
  height: 44px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  transition: border 0.18s, box-shadow 0.18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.filter-select:focus, .filter-select:hover {
  border: 1.5px solid #38d5ff;
  background: #f4faff;
  box-shadow: 0 2px 8px rgba(0,115,230,0.08);
}
.product-detail-container {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 2rem;
  align-items: start;
  max-width: 1100px;
  margin: 2rem auto;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .product-detail-container {
    grid-template-columns: 1fr;
  }
}

.purchase-section {
  width: 350px;
  margin-left: auto;
  background-color: #f5faff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-top: 1.5rem;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* “Disponible” text */
.purchase-section .availability-badge {
  display: block;
  background: none;
  color: #1ebf68;            /* green */
  font-size: 2rem !important;
  font-weight: 700;
  margin-bottom: 1rem;
  padding: 0;
}

/* Price: large, bold, orange */
.purchase-section .price-tag {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d35400;            /* orange */
  margin-bottom: 1rem;
  display: block;
  background: none;
  padding: 0;
}

/* Quantity input and “Cotizar” button */
.purchase-section .product-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.purchase-section .quantity-input {
  width: 50px;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}
.purchase-section .btn-quote {
  background-color: #87cefa; /* light blue */
  color: #000;               /* black text */
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.purchase-section .btn-quote:hover {
  background-color: #6bb9e7;
}

/* “Imprimir” button: outlined */
.purchase-section .btn-print {
  background: none;
  color: #2f3a4a;
  border: 1.5px solid #7f8c8d;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}
.purchase-section .btn-print:hover {
  background-color: #ecf0f1;
}

/* Optional: adjust icon inside “Imprimir” */
.purchase-section .btn-print svg,
.purchase-section .btn-print i {
  font-size: 1.2rem;
}
.product-detail-container {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 2rem;
  align-items: start;
  max-width: 1100px;
  margin: 2rem auto;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .product-detail-container {
    grid-template-columns: 1fr;
  }
}

.purchase-section {
  width: 350px;
  margin-left: auto;
  background-color: #f5faff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-top: 1.5rem;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* “Disponible” text */
.purchase-section .availability-badge {
  display: block;
  background: none;
  color: #1ebf68;            /* green */
  font-size: 2rem !important;
  font-weight: 700;
  margin-bottom: 1rem;
  padding: 0;
}

/* Price: large, bold, orange */
.purchase-section .price-tag {
  font-size: 2.5rem;
  font-weight: 700;
  color: #d35400;            /* orange */
  margin-bottom: 1rem;
  display: block;
  background: none;
  padding: 0;
}

/* Quantity input and “Cotizar” button */
.purchase-section .product-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.purchase-section .quantity-input {
  width: 50px;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}
.purchase-section .btn-quote {
  background-color: #87cefa; /* light blue */
  color: #000;               /* black text */
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.purchase-section .btn-quote:hover {
  background-color: #6bb9e7;
}

/* “Imprimir” button: outlined */
.purchase-section .btn-print {
  background: none;
  color: #2f3a4a;
  border: 1.5px solid #7f8c8d;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}
.purchase-section .btn-print:hover {
  background-color: #ecf0f1;
}

/* Optional: adjust icon inside “Imprimir” */
.purchase-section .btn-print svg,
.purchase-section .btn-print i {
  font-size: 1.2rem;
}

/* ------------------------------------------------------------------
   Hide Voltaje / Capacidad / Química in Products View Cards
   ------------------------------------------------------------------ */
#catalog-container.catalog.grid .product-details .voltaje,
#catalog-container.catalog.grid .product-details .capacidad,
#catalog-container.catalog.grid .product-details .quimica {
  display: none !important;
}
.list-view #catalog-container .product-details .voltaje,
.list-view #catalog-container .product-details .capacidad,
.list-view #catalog-container .product-details .quimica {
  display: none !important;
}

/* ----------------------------------------------
   Tighten Up Remaining Specs Typography
   ---------------------------------------------- */
#catalog-container.catalog.grid .product-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2em 2em;
  font-size: 0.95em;
  color: #555;
  margin-bottom: 0.5em;
}
#catalog-container.catalog.grid .product-details .sku,
#catalog-container.catalog.grid .product-details .brand {
  font-weight: 600;
  color: #333;
}
#catalog-container.catalog.grid .product-details .price {
  color: #169f5c;
  font-weight: 700;
}

/* Center the price line in product cards */
#catalog-container.catalog.grid .price {
  display: block;
  text-align: center;
  margin: 8px 0;
}

/* ----------------------------------------------
   Uniform Image Container (120×120px)
   ---------------------------------------------- */
.product-img-wrapper {
  width: 120px;
  height: 120px;
  background: #f3f7fa;
  border: 1px solid #e4eaf5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.product-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ----------------------------------------------
   Simplify Card Padding & Shadows
   ---------------------------------------------- */
#catalog-container.catalog.grid .product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 500px;
  min-height: 300px;
  padding: 8px;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.18s, transform 0.18s;
  cursor: pointer;
}
#catalog-container.catalog.grid .product-item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ----------------------------------------------
   Space Out “Ver detalles” Button
   ---------------------------------------------- */
.ver-detalles-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.ver-detalles-link {
  color: #38d5ff;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 18px;
  border-radius: 8px;
  background: #f2f9ff;
  border: 1px solid #38d5ff;
  transition: background 0.13s, color 0.13s;
  cursor: pointer;
}
.ver-detalles-link:hover,
.ver-detalles-link:focus {
  background: #38d5ff;
  color: #fff;
}
.home-intro {
  background: #f6f9fc;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(60,90,130,0.05);
  padding: 16px 36px;
  margin: 28px auto 10px auto;
  max-width: 1400px;
  font-size: 1.04rem;
  color: #34405e;
  text-align: center;
}

.home-intro h2 {
  font-family: 'Gill Sans', 'Segoe UI', Arial, sans-serif;
  color: #1976d2;
  font-size: 1.18rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 11px;
  text-align: center;
}
.home-intro ul {
  padding-left: 22px;
  margin: 6px 0 8px 0;
  color: #295299;
}
.home-intro li {
  margin-bottom: 2px;
  line-height: 1.35;
}
.home-intro strong {
  color: #1976d2;
  font-weight: 600;
}