/* COLORS */
:root {
  --color-black: #000000;
  --color-beige: #f0f0ea;
  --color-white: #ffffff;
  --color-red: #f71700;
  --color-darkred: #4e0100;
  --color-blue: #1e3388;
  --color-lightblue: #b7c8ff;
  --color-pink: #de95a7;
  --color-lightpink: #eee2e4;
  --color-lightgreen: #f0f0e4;
  --color-purple: #b7c8ff;
  --color-heading-primary: var(--color-white);
  --color-heading-secondary: var(--color-red);
  --color-heading-tertiary: var(--color-blue);
}

/* FONT SIZES */
:root {
  --size-120-60: clamp(
    3.75rem,
    2.787958115183246rem + 3.926701570680628vw,
    7.5rem
  );
  --size-90-45: clamp(
    2.8125rem,
    2.0909685863874348rem + 2.945026178010471vw,
    5.625rem
  );
  --size-90-35: clamp(
    2.1875rem,
    1.3056282722513088rem + 3.599476439790576vw,
    5.625rem
  );
  --size-60-45: clamp(
    2.8125rem,
    2.5719895287958114rem + 0.981675392670157vw,
    3.75rem
  );
  --size-20-20: clamp(1.25rem, 1.25rem, 1.25rem); /* fixed */
  --size-20-15: clamp(
    0.9375rem,
    0.8573298429319371rem + 0.32722513089005234vw,
    1.25rem
  );
  --size-40-30: clamp(
    1.875rem,
    1.7146596858638743rem + 0.6544502617801047vw,
    2.5rem
  );
  --size-18-15: clamp(
    0.9375rem,
    0.8893979057591623rem + 0.19633507853403143vw,
    1.125rem
  );
  --size-50-35: clamp(
    2.1875rem,
    1.9469895287958114rem + 0.981675392670157vw,
    3.125rem
  );
  --size-60-60: clamp(3.75rem, 3.75rem, 3.75rem); /* fixed */
  --size-50-30: clamp(
    1.875rem,
    1.5543193717277486rem + 1.3089005235602094vw,
    3.125rem
  );
  --size-60-30: clamp(1.875rem, 1.394056rem + 1.962534vw, 3.75rem);
  --size-50-45: clamp(2.8125rem, 2.73233rem + 0.327225vw, 3.125rem);
  --size-30-30: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
  --size-10-10: clamp(0.625rem, 0.625rem + 0vw, 0.625rem);
  --size-15-15: clamp(0.938rem, 0.938rem + 0vw, 0.938rem);
}

/* SPACINGS */
:root{
  --spacing-50-20: clamp(1.563rem, 1.16rem + 1.637vw, 3.125rem); /* 50px -> 25px */
  --spacing-80-60: clamp(3.75rem, 3.428rem + 1.31vw, 5rem); /* 80px -> 60px */
}


/* SECTION SPACINGS */
:root {
  --section-spacing-xs: 10px;
  --section-spacing-s:  clamp(1.563rem, 1.16rem + 1.637vw, 3.125rem); /* 50px -> 25px */;
  --section-spacing-m:  clamp(3.125rem, 2.321rem + 3.274vw, 6.25rem); /* 100px -> 50px */
  --section-spacing-l:  clamp(6.25rem, 4.641rem + 6.549vw, 12.5rem); /* 200px-> 100px */
  --section-spacing-xl: 150px;

  --section-spacing: var(--section-spacing-m);
  
}

:root {
  --section-vertical-spacing: 0;
}


.section-spacing {
  --section-spacing-start: var(--section-spacing);
  --section-spacing-end: var(--section-spacing);
  padding-block-start: var(--section-spacing-start);
  padding-block-end: var(--section-spacing-end);
}


/* STANDARD SPACING PER SECTION */


/* LOGO LIST */
.shopify-section--logo-list {
  --section-spacing: var(--section-spacing-s);
}

/* TEXT WITH MEDIA  */
@media screen and (max-width: 999px) {
    .section-split__column:where(:last-child) {
        padding-block-start: var(--section-stack-row-gap);
        padding-block-end: var(--section-stack-row-gap);
    }
  }

/* TIMELINE  */
:root{
  --timeline-inner-spacing: var(--spacing-50-20);
}

.timeline__nav{
  padding-top: var(--timeline-inner-spacing)!important;
}
.timeline__content-list{
  padding-bottom: var(--timeline-inner-spacing)!important;
}

/* SPLIT SECTIONS ( Text with Media, Multi Columns) */
:root{
  --container-gutter: var(--spacing-50-20);
} 

/* BLOG POSTS */
.shopify-section--main-blog{
  .blog-tags{ /* section padding top */
    padding-top: var(--section-spacing-s);
    padding-bottom: var(--section-spacing-m);
    border: none;
    
  }
  .container{ /* section padding bottom*/
    padding-bottom: var(--section-spacing);
  }
  .blog-post-card__image-container img{
    aspect-ratio: 560 / 705;
    border-radius: 20px;
    
  }
  .blog-post-card__image-container, .blog-post-list__newsletter-inner{
    border-radius: 20px;
  }
  .subheading{
    .shape{
      display: none;
    }
    font-size: var(--size-20-20);
  }
  .h2{ //highlighted post heading

  }
  .h5{ /* normal post heading */
    font-family: "Space Grotesk";
    font-size: var(--size-50-35);
  }
  p{ /* post details */
    font-size: var(--size-18-15);
  }
  .blog-post-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    @media (max-width: 999px){
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  .blog-post-list__newsletter-inner{ /* newsletter post heading */
    .h6{
      font-family:"Space Grotesk";
      font-weight: 400;
      font-size: var(--size-50-45);
      text-transform: uppercase;
    }
  }
  form#main-blog-newsletter-form{ /* newsletter subscribe button */
    button{
      background-color: var(--color-white);
      color: var(--color-darkred);
      svg{
        display: none;
      }
    }
  }

}

/* BLOG POST SECTION */
.shopify-section--blog-posts{
  .section-spacing {
  --section-spacing-end: var(--section-spacing-s);
}
h2 {
  font-size: var(--size-60-45);
}
.subheading + span, .h4, .h5 {
  font-size: var(--size-40-30);
  font-family: "Space Grotesk";
}
img {
  aspect-ratio: 452/569;
}
p,
.subheading span {
  font-size: var(--size-18-15);
}
.subheading .shape {
  display: none;
}
}

/* PRODUCT PAGE */
.shopify-section--main-product{
  .container{
    padding-bottom: 30px;
  }
  /*icons with text */
  .product-info__block-item .grid{
    row-gap: 0;
    .h-stack{
      font-size: var(--size-15-15);
    }
  }
  /*subheadline */
  .product-info__block-item[data-block-id="title"] + [data-block-type="text"]{
    margin-top: 15px;
    margin-bottom: 0;
    p{
      font-size: var(--size-20-20);
      line-height: 125%;
    }
    
  }
  /* custom badge */ 
  .product-info__block-item:has(.badge){
    margin-bottom: 0;
  }
  /* star widget */
  .product-info__block-item:has(.jdgm-widget){
    margin-bottom: 20px;
    .jdgm-prev-badge__stars{
      margin-right: 10px;
    }
  }
  .variant-picker__option{
    /* selected button */
    input[checked] + label{
      background-color: var(--color-red);
      border-color: var(--color-red);
      box-shadow: var(--color-red);
    }
    legend + span{
      font-size: var(--size-15-15);
    }
  }
  label{
    font-size: var(--size-15-15);
    width: 30%;
    min-width: 150px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-color: var(--color-darkred);
  }
  .product-title{
    font-weight: 600!important;
    font-size: var(--size-30-30);
  }
  .variant-picker__option{
    legend{
      font-size: var(--size-20-20);
      color: var(--color-darkred);
    }
    legend + span{
      display: none;
    }
  }
  .product-info__block-item[data-block-type="inventory"]{
    margin-bottom: 10px;
    .inventory__text{
      font-size: var(--size-10-10);
    }
  }

  /* buy button */
  .product-info__block-item[data-block-type="buy-buttons"]{
    margin-top: 0;
    margin-bottom: 15px;
  }
  .buy-buttons{
    max-width: 300px;
    button{
      background-color: var(--color-darkred);
      color: var(--color-white);
    }
  }
  more-payment-options-link a{
    text-align: left;
  }
  
  /* versand und garantie text */
  .product-info__block-item[data-block-type="buy-buttons"] + .product-info__block-item[data-block-type="text"]{
    margin-top: 15px;
    font-size: var(--size-15-15);
  }
  /* gynäkologen accordion*/
  .product-info__block-item[data-block-type="text"] + .product-info__block-item[data-block-type="accordion"]{
    margin-bottom: 50px;
    .accordion{
          box-shadow: unset;
    }
    summary span{
      font-size: var(--size-20-20);
    }
  }

  /* accordion group heading */
  .product-info__block-item[data-block-type="accordion"] + .product-info__block-item[data-block-type="text"]{
    font-family: "Red Rose";
    font-size: var(--size-20-20);
    line-height: 125%;
    text-transform: uppercase;
    margin-bottom: 5px;
  }

  /* accorion group */
  .accordion-group{
    margin-top: 5px!important;
    .product-info__block-item[data-block-type="accordion"]:first-child, .product-info__block-item[data-block-type="accordion"]:last-child{
      .accordion{
        summary{
          padding-top: 13px;
          padding-bottom: 13px;
        }
        box-shadow: unset;
      }
      
    }
    font-size: var(--size-15-15);
  }

  /* related products */
  .product-info__block-item[data-block-type="complementary-products"]{
    .h-stack p{
      font-size: var(--size-20-20);
    }
    a{
      font-size: var(--size-15-15);
      font-family: "Red Rose";
      text-transform: uppercase;
    }
    .subheading, .price-list{
      display: none;
    }
  }
  .product-cross-sell{
    row-gap: 0.25rem;
  }

  /* sticky add to cart */
  
.product-sticky-add-to-cart {
border-radius: 50px;
padding-left: 30px;
padding-right: 30px;
.button {
 background-color: var(--color-darkred);
color: var(--color-white);
}


.subheading:first-child {
font-weight: 500;
}

.subheading:not(price-list .subheading) {
color: var(--color-white);
}

img {
border-radius: 5px;
}
}

 

}

/* CART DRAWER */
#cart-drawer{
  .product-cross-sell, .line-item img{
    border-radius: 20px;
  }
  /* bold text for price and product title*/
  sale-price, compare-at-price, .line-item__line-price, .line-item__info a, .cart-drawer__cross-sell p, .cart-drawer__cross-sell a, .text-with-icon h2{
    font-weight: 500;
  }
  .text-subdued{
    color: inherit;
  }
  .line-item{
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 20px;
  }
}

/* ANNOUNCMENT BAR */
.shopify-section--announcement-bar{
    @media only screen and (min-width: 1260px){
        carousel-prev-button,
carousel-next-button {
  display: none;
}
.announcement-bar__message-list {
  grid-template-columns: repeat(4, 1fr);
  max-width: 85svw;
}
.announcement-bar__message-list .prose {
  visibility: visible;
  grid-area: unset;
  opacity: 1!important;
  transform: unset!important;
}
    }
}


/* FOOTER */
.footer{
  border: none;
  .separator{
    display: none;
  }
}