/* V97.1: professional responsive Shopify product catalogue. */
#page-products #shopify-products-page-list > div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

#page-products .shopify-product-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 11px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow: hidden !important;
  border: 1px solid #dce5f1 !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(15, 35, 58, .055) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#page-products .shopify-product-card:hover {
  border-color: #c6d6e8 !important;
  box-shadow: 0 8px 22px rgba(15, 35, 58, .09) !important;
  transform: translateY(-1px) !important;
}

#page-products .shopify-product-head {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: flex-start !important;
}

#page-products .shopify-product-head > :first-child {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px !important;
  padding: 5px !important;
  object-fit: contain !important;
  border: 1px solid #e2e9f2 !important;
  border-radius: 12px !important;
  background: #fff !important;
}

#page-products .shopify-product-head > :last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding-top: 1px !important;
}

#page-products .shopify-product-head > :last-child > :first-child {
  margin: 0 0 8px !important;
  color: #102a46 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

#page-products .shopify-product-head > :last-child > :last-child {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

#page-products .shopify-product-meta {
  display: grid !important;
  grid-template-columns: .85fr 1.35fr .8fr !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px !important;
  margin: 0 !important;
  border: 1px solid #e3eaf3 !important;
  border-radius: 10px !important;
  background: #f7f9fc !important;
  color: #7690ad !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#page-products .shopify-product-meta > div {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#page-products .shopify-product-meta strong {
  display: block !important;
  margin-bottom: 2px !important;
  color: #213d5b !important;
  font-size: 10px !important;
  letter-spacing: .02em !important;
}

#page-products .shopify-product-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: auto !important;
}

#page-products .shopify-product-actions .btn {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 39px !important;
  padding: 8px 9px !important;
  align-items: center !important;
  justify-content: center !important;
  border-color: #d7e2ef !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #183654 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
}

#page-products .shopify-product-actions .btn:hover {
  border-color: #f07d61 !important;
  background: #fff7f4 !important;
  color: #d95537 !important;
}

@media (min-width: 768px) and (max-width: 1399px) {
  #page-products #shopify-products-page-list > div {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  #page-products #shopify-products-page-list > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  #page-products .shopify-product-card {
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 35, 58, .05) !important;
  }

  #page-products .shopify-product-card:hover {
    transform: none !important;
  }

  #page-products .shopify-product-head {
    flex-direction: column !important;
    gap: 7px !important;
  }

  #page-products .shopify-product-head > :first-child {
    width: 68px !important;
    height: 68px !important;
    flex-basis: 68px !important;
    align-self: center !important;
    padding: 4px !important;
  }

  #page-products .shopify-product-head > :last-child {
    width: 100% !important;
    padding: 0 1px !important;
  }

  #page-products .shopify-product-head > :last-child > :first-child {
    min-height: 34px !important;
    margin-bottom: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.32 !important;
  }

  #page-products .shopify-product-head > :last-child > :last-child {
    gap: 5px !important;
    align-items: flex-start !important;
  }

  #page-products .shopify-product-head > :last-child > :last-child span {
    font-size: 10.5px !important;
  }

  #page-products .shopify-product-meta {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 7px !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
  }

  #page-products .shopify-product-meta strong {
    display: inline !important;
    margin: 0 !important;
    font-size: 10.5px !important;
  }

  #page-products .shopify-product-actions {
    gap: 5px !important;
  }

  #page-products .shopify-product-actions .btn {
    min-height: 37px !important;
    padding: 7px 4px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 359px) {
  #page-products #shopify-products-page-list > div {
    gap: 7px !important;
  }

  #page-products .shopify-product-card {
    padding: 8px !important;
  }

  #page-products .shopify-product-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

