/**
 * Product Promotional Callouts Section
 */

/* Hide the original section since content will be moved by JavaScript */
section[id*="__product-promotional-callouts"].product-promotional-callouts-section {
  display: none;
}

/* Styles for the moved content (no longer under section) */
.product-promotional-callouts {
  display: block;
  margin-top: var(--promotional-callout-margin-top, 0px);
  margin-bottom: var(--promotional-callout-margin-bottom, 20px);
  order: 2;
  h3 {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }  
  .promotional-callouts-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .promotional-callout-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    border-radius: var(--promotional-callout-border-radius, 8px);
    background-color: var(--promotional-callout-bg, #ffffff);
    transition: box-shadow 0.2s ease;
    
  }

  .promotional-callout__image {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--promotional-callout-image-width, 60px);

    img {
      width: 100%;
      height: -webkit-fill-available;
      object-fit: cover;
    }
  }

  /* Image position: right */
  .promotional-callout-block[data-image-position="right"] {
    flex-direction: row-reverse;
  }

  /* Image aspect ratio: square */
  .promotional-callout-block[data-image-aspect-ratio="square"] .promotional-callout__image {
    height: var(--promotional-callout-image-width, 60px);

    img {
      height: 100%;
      object-fit: cover;
    }
  }

  .promotional-callout__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--promotional-callout-text-gap, 4px);
    
    @media screen and (min-width: 767px) {
        .title-wrap{
            display: flex;
            justify-content: space-between;
        }
    }

  }

  .promotional-callout__title {
    font-size: var(--promotional-callout-title-font-size, 14px);
    color: var(--promotional-callout-title-color, #401e17);
    margin: 0;
    text-transform: capitalize;
    font-family: var(--font-ivy-mode);
    letter-spacing: 1px;

    p {
      margin: 0;
      font-size: inherit;
      color: inherit;
    }
  }

  .promotional-callout__subtitle {
    font-size: var(--promotional-callout-subtitle-font-size, 14px);
    color: var(--promotional-callout-subtitle-color, #401e17);
    margin: 0.4rem 0 0 0;
    line-height: 24px;

    @media screen and (min-width: 767px) {
        margin: 0.8rem 0 0 0;
    }

  }

  .promotional-callout__price{
    font-family: var(--font-futura-heavy);
    font-size: 16px;
    letter-spacing: 2.5px;
    margin-top: 0.5rem;
    
    @media screen and (min-width: 767px) {
        margin-top: 0;
    }

  }

  .promotional-callout__atc-form{
    margin-top: 1rem;
    
    @media screen and (min-width: 767px) {
        margin-top: 1.3rem;
    }
  }

  .promotional-callout__description {
    p {
      font-size: var(--promotional-callout-description-font-size, 12px);
      color: var(--promotional-callout-description-color, #401e17);
      margin: 0;
    }
  }

  .promotional-callout__atc-btn{
    background: transparent;
    width: 100%;
    padding: 0.875rem 0;
  }
  .promotional-callout__atc-btn:hover{
    background-color: rgb(var(--color-brown));
    color: rgb(var(--color-white));
  }
}