/* src/styles/main.scss */
.co-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.co-products .product {
  transition: all 0.3s;
}
.co-products .product:hover {
  transform: scale(1.025);
  box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.2);
}
.co-products .product a {
  text-decoration: none;
}
.co-products .product picture,
.co-products .product img {
  width: 100%;
  height: auto;
}
.co-product-list-header {
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.co-product .title a {
  display: flex;
  align-items: center;
}
.co-product .title a svg {
  height: 1rem;
}
.co-product .content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .co-product .content {
    grid-template-columns: 1fr 1fr;
  }
}
.co-product .content .images {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.co-product .content .images h2 {
  align-self: flex-start;
}
.co-product .content .images picture,
.co-product .content .images img {
  width: 100%;
}
.co-product .content .images .coGallery {
  margin: 1rem auto;
}
.co-product .content .images .coGallery .grid-item {
  width: 120px;
  margin-bottom: 10px;
}
.co-product .content .info .details .details-grid {
  display: grid;
  grid-template-columns: 1fr 4fr;
}
.co-product .content .info .details .details-grid label {
  font-weight: bold;
  text-align: right;
  margin-right: 0.5rem;
}
.co-product .swatches {
  display: grid;
  grid-template-columns: repeat(var(--columns, 5), 1fr);
  gap: 0.5rem;
}
.co-product .swatches .swatch picture,
.co-product .swatches .swatch img {
  width: 100%;
  height: auto;
}
.co-product .drawings {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.co-product .drawings .drawing {
  display: flex;
  gap: 0.5rem;
  border: 1px solid #193f87;
  background-color: white;
  color: #193f87;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  text-decoration: none;
  align-items: center;
}
.co-product .drawings .drawing:hover {
  background-color: #8ca4d1;
  border-color: #8ca4d1;
  color: white;
}
.co-product .drawings .drawing:hover svg {
  fill: white;
}
.co-product .drawings .drawing svg {
  height: 1.5rem;
  fill: #193f87;
}
.co-product .drawings .drawing span {
  white-space: nowrap;
}
.co-product .ctas {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.co-product .ctas a {
  white-space: nowrap;
  background-color: #193f87;
  border: 3px solid #193f87;
  color: white;
  padding: 0.5rem;
  text-decoration: none;
}
.co-product .ctas a:hover {
  background-color: #102d64;
  border-color: #102d64;
}
.co-product dialog {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.co-product dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.co-product dialog.coSwiper {
  position: fixed;
  max-width: 90%;
  height: 90%;
  top: 5%;
  margin: 0 auto;
  display: block;
  z-index: 9999;
}
.co-product dialog.coSwiper:not([open]) {
  display: none;
}
.co-product dialog.coSwiper swiper-container {
  width: 100%;
  height: 100%;
}
.co-product dialog.coSwiper swiper-container swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.co-product dialog button.close {
  z-index: 2;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.co-product dialog button.close svg {
  width: 3rem;
  height: 3rem;
  fill: black;
}
/*# sourceMappingURL=main.css.map */