/* ========================================
   PRODUCT PAGE MASTER LAYOUT
======================================== */

.path-product article{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:520px 1fr;
  grid-template-areas:
    "gallery title"
    "gallery price"
    "gallery cart"
    "gallery features"
    "gallery contents"
    "desc desc";
  gap:20px 60px;
  align-items:start;
  background: #ffffff;
}

.path-product .layout-content,
.path-product .region-content,
.path-product .block-system-main-block {
  width: 100%;
}

/* title */

.path-product .block-page-title-block{
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 25px;
}

.path-product .block-page-title-block h1{
  font-size:32px;
}

.field--name-field-scent-name {
  grid-area: scent;
  width: 100%;
  font: normal 28px "Ultra";
  padding-left: 2rem;
  display: none;
}


/* gallery */

.path-product .field--name-field-images{
  grid-area: gallery;
}


/* price */

.path-product .field--name-price{
  height: auto;
  grid-area: price;
}

.path-product .field--name-price .field__label{
  display:none;
}

.path-product .field--name-price .field__item{
  font-size:32px;
  font-weight:700;
  color:#1e7a1e;
}


/* add to cart */

.path-product .field--name-variations{
  grid-area:cart;
}


/* features */

.path-product .field--name-field-features{
  min-width: 250px;
  grid-area:features;
}


/* contents */

.path-product .field--name-field-contents{
  min-width: 250px;
  grid-area:contents;
}


/* description */

.path-product .field--name-field-description{
  grid-area:desc;
  width: 80%;
  margin: 0 auto;
}

/* ========================================
   PRODUCT GALLERY
======================================== */

.path-product .field--name-field-images .field__item:first-child{
  margin-bottom:12px;
}

.path-product .field--name-field-images img{
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* thumbnails */

.path-product .field--name-field-images .field__item:not(:first-child){
  display:inline-block;
  margin-right:8px;
}

.path-product .field--name-field-images .field__item:not(:first-child) img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:6px;
  border:2px solid transparent;
  cursor:pointer;
  transition:.2s;
}

.path-product .field--name-field-images .field__item:not(:first-child) img:hover{
  border-color:#000;
}

/* ========================================
   BUY BOX
======================================== */

.path-product .field--name-price,
.path-product .field--name-variations{
    padding: 15px;
    text-align: right;
}

.path-product .field--name-variations{
    background:#eee;
    border-radius: 6px;
}

.path-product .button--add-to-cart{
  background: #D42F27;
  background: linear-gradient(360deg, rgba(212, 47, 39, 1) 75%, rgba(244, 136, 97, 1) 100%);
  color:white;
  border:none;
  padding:14px 26px;
  font-size:16px;
  font-weight:600;
  border-radius:1px;
  cursor:pointer;
  transition:.2s;
}

.path-product .button--add-to-cart:hover{
  background:#333;
}

/* ========================================
   FEATURES
======================================== */

.path-product .field--name-field-features,
.path-product .field--name-field-contents {
  margin-top:10px;
}

.path-product .field--name-field-features .field__label{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
}

.path-product .field--name-field-contents .field__label{
  font-size:14px;
  font-weight:bold;
  margin-bottom:10px;
}

.path-product .field--name-field-features .field__item,
.path-product .field--name-field-contents .field__item {
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
}

.path-product .field--name-field-features .field__item::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#1e7a1e;
  font-weight:bold;
}

.path-product .page-title,
.path-product .field--name-price,
.path-product .field--name-variations,
.path-product .field--name-field-features,
.path-product .field--name-field-contents {
  align-self:start;
}

/* ========================================
   DESCRIPTION
======================================== */

.path-product .field--name-field-description{
  margin-top:50px;
  border-top:1px solid #eee;
  padding-top:30px;
}

.path-product .field--name-field-description .field__label{
  font-size:26px;
  font-weight:700;
  margin-bottom:15px;
}

.path-product .field--name-field-description p{
  font-size:17px;
  line-height:1.7;
  margin-bottom:16px;
}

.form--inline .form-actions {
  margin-top: auto;
  clear: none;
}

.form--inline .form-actions input {
  background: #C20F2D;
  color: #fff;
  padding: 0.2rem .6rem;
  text-decoration: none;
}

/* Move exposed filters to the right */
.view-filters .form--inline {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Prevent Drupal's default float behavior */
.view-filters .form--inline .form-item,
.view-filters .form--inline .form-actions {
  float: none;
}

/* Keep labels stacked nicely */
.view-filters .form--inline .form-item {
  display: flex;
  flex-direction: column;
}

.field--name-field-images .colorbox-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
}

.field--name-field-images .colorbox-gallery .field__item {
  flex: 0 0 auto;
}

.field--name-field-images .colorbox-gallery img {
  height: 70px;
  width: auto;
}

.field--name-field-images .colorbox-gallery {
  white-space: nowrap;
}

.field--name-field-images .colorbox-gallery .field__item {
  display: inline-block;
}

.field--name-field-availability-message {
  font: bold 20px sans-serif;
  color: #C20F2D;
  background: #1A1717;
  border: 1px solid #C20F2D;
  padding: 0 15px;
}





@media (max-width:992px){

  /* ===== MAIN LAYOUT ===== */
  .path-product article{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 14px;
  }

  /* ===== TITLE ===== */
  .path-product .block-page-title-block h1{
    font-size: 24px;
    text-align: center;
  }

  /* ===== GALLERY ===== */
  .path-product .field--name-field-images{
    width: 100%;
  }

  .path-product .field--name-field-images img{
    height: auto;
  }

  .cpig__main-item.is-active img {
    width: 70%;
    display: block;
    margin: 0 auto;
  }

  /* ===== THUMBNAILS ===== */
  .field--name-field-images .colorbox-gallery{
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
  }

  .field--name-field-images .colorbox-gallery img{
    height: 60px;
  }

  /* ===== PRICE ===== */
  .path-product .field--name-price{
    text-align: center;
    padding: 10px 0;
  }

  .path-product .field--name-price .field__item{
    font-size: 26px;
  }

  /* ===== CART / BUY BOX ===== */
  .path-product .field--name-variations{
    text-align: center;
    padding: 16px;
  }

  .path-product .button--add-to-cart{
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  /* ===== FEATURES ===== */
  .path-product .field--name-field-features,
  .path-product .field--name-field-contents {
    width: 100%;
  }

  /* ===== DESCRIPTION ===== */
  .path-product .field--name-field-description{
    width: 100%;
    margin: 20px 0 0;
    padding-top: 20px;
  }

  .path-product .field--name-field-description .field__label{
    font-size: 22px;
    text-align: center;
  }

}