/* products.css - styles for the two-column Consil products page.
  Loaded AFTER style.css. Every rule is scoped to new class names,
  so nothing here changes the live homepage. */
/* Trademark mark for Consil Matrix (style.css only has the (R) mark) */
.tm::after {
   content: "\2122";
   font-size: 60%;
   position: relative;
   top: -.6em;
   line-height: 0;
}
/* ---------- Two-column layout ---------- */
.product-columns {
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   max-width: 1200px;
   margin: 0 auto;
   padding: 2.5rem 0 3rem;
}
.product-column {
   display: flex;
   flex-direction: column;
   background-color: white;
   border-top: 6px solid #6ac8c8;
   padding: 1.5rem 1.5rem 2rem;
}
/* ---------- Lockup image ---------- */
.product-lockup {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 260px;
   margin-bottom: 1.5rem;
}
.product-lockup img {
   max-width: 100%;
   max-height: 100%;
   height: auto;
   object-fit: contain;
}
/* ---------- Text ---------- */
.product-column__title {
   font-size: 1.75rem;
   font-weight: 800;
   margin: 0 0 .25rem;
   text-align: center;
}
.product-column__species {
   font-family: 'Lato', sans-serif;
   font-style: italic;
   text-align: center;
   margin: 0 0 1.5rem;
}
.product-item {
   border-top: 1px solid #dcdcdc;
   padding-top: 1.25rem;
   margin-bottom: 1.5rem;
}
.product-item h3 {
   font-size: 1.2rem;
   font-weight: 700;
   margin: 0 0 .5rem;
}
.product-item p {
   font-family: 'Lato', sans-serif;
   line-height: 1.6;
   max-width: 65ch;
   margin: 0 0 1rem;
}
.product-list {
   font-family: 'Lato', sans-serif;
   line-height: 1.6;
   padding-left: 1.5rem;
   margin: 0 0 1.25rem;
   list-style-image: url('https://s3.amazonaws.com/static.consil.info/images/consil-bullet.png');
}
/* ---------- Button ---------- */
.product-button {
   display: inline-block;
   background-color: #6ac8c8;
   color: #1a1a1a;
   font-weight: 700;
   text-decoration: none;
   padding: .75rem 1.5rem;
   border: 2px solid #6ac8c8;
}
.product-button:hover {
   background-color: white;
}
.product-button:focus-visible {
   outline: 3px solid #1a1a1a;
   outline-offset: 3px;
}
/* Legal line sits at the bottom of the bone graft column */
.product-column__legal {
   margin-top: auto;
   width: auto;
}
/* ---------- Side by side on wider screens ---------- */
@media screen and (min-width: 900px) {
   .product-columns {
       grid-template-columns: repeat(2, 1fr);
       padding: 3rem 1rem 4rem;
   }
}