/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

@font-face {
  font-family: 'FontAwesome';
  src: url('../public/fonts/fontawesome.ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.grid-container{
  display: grid;
}

#specification {
  display: block;
}

.specifications {
  grid-template-columns:1fr;
}*/
.informationContent{
  padding-top:30px;
}

 /*
---------------- SECTIONS ----------------
*/


.section-container {
  margin: 0 auto;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
  padding-top: 40px;
  display: block;
  max-width: 1600px;
}

@media screen and (min-width: 1280px) {
  .section-container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

 /*
---------------- BOAT-BLOCK ----------------
*/

.boat-block {
  display: grid;
  grid-template-columns: auto;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .boat-block {
    grid-template-columns: 50% auto;
  }
}

@media screen and (min-width: 1280px) {
  .boat-block {
    grid-column-gap: 20px;
    grid-template-columns: 60% auto;
  }
}

@media screen and (min-width: 1600px) {
  .boat-block {
    grid-column-gap: 40px;
    grid-template-columns: 55% auto;
    margin: 0 -20px;
  }
}

/* Gallery */

.gallery {
  max-width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: inherit;
  padding: 0 20px;
}

.lSSlideOuter li {
  background: black;
}

.gallery-wrapper {
  max-width: 990px;
}

.gallery li img{
  max-width: 100%;
  max-height: 100%;
  width:auto;
  height: auto;
  display: block;
  position: relative;
  border: 0;
  /* object-fit: contain;*/
  object-fit: cover;
  width: 100%; /* Make the image take 100% of the parent's width */
  height: 100%; /* Make the image take 100% of the parent's height */

}

.preferredHeight {
  max-height:auto;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

/* Sidebar */

#boat-block-sidebar {
  color: #444;
  padding: 40px 20px 0px 20px;  
}

@media screen and (min-width: 1024px) {
  #boat-block-sidebar {
    padding: 0px 20px;
  }
}

#mainSpecs {
  width: 100%;
  padding: 0px 40px 30px 0px;
  border: 0;
  overflow: hidden;
}

#mainSpecsTitle{
  display: inline-block;
  width:100%;
}

#mainSpecsPrice{
  width: 100%;
  box-sizing: border-box;
  color: #444;
  float: left;
  font-size: 48px;
  font-weight: bold;
}

#mainSpecsPriceBlock{
  padding-top: 40px;
}

#mainSpecsTitleDescription {
  float: left;
}

#pdf-export {
  float: right;
}



 /*
---------------- OTHER ----------------
*/



.informationTabs {
  grid-template-columns: 1fr;
  align-items: flex-start;
  display: grid;
  grid-column-gap: 64px;
}

@media screen and (min-width: 800px) {
  .informationTabs {
    grid-template-columns: 1fr 1fr;
  }
}

/*.specificationListTitle:not(:last-of-type)::after {
    border-top: 1px solid var(--dtc-blocks-canvas-light);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    width: 300%
  }
*/

  .specificationGroupTitle {
    border-left: 3px solid black;
    padding-left: 10px;
    margin: 10px 0px;
    float:left;

    font-weight: 500;
    font-size: 1.25rem;
    color: inherit;
    margin-top: 20px;
  }

.specificationList{
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: 1fr 1fr;
    overflow: hidden
}

 /*
---------------- ACCESOIRES ----------------
*/

.accessoires-list {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: 1fr;
  padding: 0px;
}

@media screen and (min-width: 640px) {
  .accessoires-list {
    grid-template-columns: 1fr 1fr
  }
}

@media screen and (min-width: 1280px) {
  .accessoires-list {
    grid-template-columns: 1fr 1fr 1fr
  }
}

.accessoires-list__item {
  align-items: center;
  border: solid #E7E7E7;
  border-width: 1px 0;
  display: flex;
  gap: 10px;
  margin-top: -1px;
  padding: 10px 0
}

#specification {
  display: block;
}

.specificationList{
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: 1fr 1fr;
    overflow: hidden
}

.specificationListTitle{
    font-weight: 700;
    position: relative;
}

dt.specificationListTitle, dt.specificationListDefinition, dd.specificationListDefinition {
  padding: 5px 0 !important;
}

.specificationListTitle:not(:last-of-type)::after{
  /*var(--dtc-blocks-canvas-light);*/
  border-top: 1px solid #ccc;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  width: 300%
}

section.specifications{
  background-color: #F5F5F5;
}

 /*
---------------- SLIDESHOW ----------------
*/
ul.lightSlider {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom:0;
}
li.slide {
  display: block;
  float: left;
  margin-right: 0px;
  cursor:pointer;
}

ul.lSPager.lSpg {
  display: none;
}

a.lSPrev {
  transform: scale(1.5);
  left: 20px;
}

a.lSNext{
  transform: scale(1.5);
}

ul.lSPager.lSGallery {
  margin-top:20px;
}

/* Styles for screen display */
/* ... */

/* Styles specifically for PDF export */
.pdf-print #primary {
    font-size: 0.85em; /* Smaller text for PDF */
    line-height: 1.2; /* Tighter line spacing */
    padding: 10mm; /* Adjust padding for PDF */
    /* Other PDF-specific layout adjustments */
    width: 640px;
}

.pdf-print .no-pdf-export {
    display: none !important; /* Hide elements you don't want in the PDF */
}

/* If you want to simulate @media print for general page elements too */
.pdf-print .site-header,
.pdf-print .site-footer,
.pdf-print .sidebar {
    display: none !important;
}

/* Any other specific print adjustments */
.pdf-print table {
    width: 100% !important; /* Ensure tables fill width */
    font-size: 0.9em;
}
.pdf-print img {
    max-width: 100%; /* Prevent images from overflowing */
    height: auto;
}

 /*
---------------- PDF PRINT ----------------
*/

img#pdf-image {
  display: none;
}

.pdf-print {
    display: block; /* Force stacking like a mobile layout at 600px */
    width: 100%; /* Ensure it fills the desired width */
    max-width: 640px; /* Optional: Constrain if needed */
    margin: 0 auto; /* Center if you use max-width */
}

.pdf-print .informationTabs {
  grid-template-columns: 1fr;
}

.pdf-print section.specifications {
  padding: 0px 20px;
}

.pdf-print .section-container {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.pdf-print .boat-block {
  display: grid;
  grid-template-columns: auto;
}

.pdf-print #export-pdf-button,  .pdf-print #return-link {
  display: none;
}

.pdf-print img#gallery-placeholder {
  width: 600px;
  display: none;
}

.pdf-print .gallery {
  width: 600px;
  display: none;
}

.pdf-print img#pdf-image {
  display: inline-block;
}