/* Restyling Artesanias - solo la seccion #complementos; no afecta al catalogo interior. */
#complementos {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 800px;
  height: auto !important;
  min-height: 0 !important;
  position: relative;
  float: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  padding: 17px !important;
  margin: 0 0 22px !important;
  background: #f5f7f4 !important;
  border-radius: 14px;
  overflow: visible !important;
}
#complementos *,#complementos *::before,#complementos *::after {box-sizing:border-box}
#complementos > div:first-child {
  grid-column:1/-1;
  float:none !important;
  width:100% !important;
  text-align:left !important;
  margin:0 !important;
  padding:0 0 13px;
  border-bottom:2px solid #28594c;
}
#complementos > div:first-child h1 {
  margin:0 !important;
  color:#28594c !important;
  font:700 25px/1.3 Arial,Helvetica,sans-serif !important;
  text-align:left !important;
}
#complementos > .box {
  float:none !important;
  clear:none !important;
  display:flex !important;
  flex-direction:column;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:270px !important;
  margin:0 !important;
  padding:12px !important;
  overflow:visible !important;
  background:#fff !important;
  border:1px solid #dbe8df !important;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(34,69,55,.07);
  transition:box-shadow .18s ease, transform .18s ease;
}
#complementos > .box:hover {
  box-shadow:0 7px 24px rgba(34,69,55,.14);
  transform:translateY(-2px);
}
#complementos > .box > a:first-child {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  height:135px;
  overflow:hidden;
  border-radius:8px;
  background:#f5f7f4;
}
#complementos > .box > a:first-child img,
#complementos > .box > a:first-child img[style] {
  display:block;
  float:none !important;
  max-width:100% !important;
  max-height:125px !important;
  width:auto !important;
  height:auto !important;
  margin:auto !important;
  object-fit:contain;
}
#complementos > .box .prTitle {
  float:none !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:12px 3px 3px !important;
}
#complementos > .box .prTitle a {
  display:block;
  text-decoration:none !important;
  color:#28594c !important;
}
#complementos > .box .prTitle h2 {
  float:none !important;
  height:auto !important;
  padding:0 !important;
  margin:0 0 8px !important;
  font:700 19px/1.28 Arial,Helvetica,sans-serif !important;
  color:#28594c !important;
}
#complementos > .box .prTitle h3,
#complementos > .box .prTitle h3[style] {
  float:none !important;
  width:100% !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  font:400 13px/1.55 Arial,Helvetica,sans-serif !important;
  color:#334740 !important;
  text-align:left !important;
}
@media (max-width:620px) {
  #complementos {grid-template-columns:1fr; gap:12px; padding:12px !important;}
  #complementos > .box {min-height:0 !important;}
  #complementos > div:first-child h1 {font-size:22px !important;}
}