/** Shopify CDN: Minification failed

Line 556:18 Unexpected "{"
Line 556:27 Expected ":"
Line 556:33 Unexpected ","
Line 557:18 Unexpected "{"
Line 557:27 Expected ":"
Line 558:18 Unexpected "{"
Line 558:27 Expected ":"
Line 559:18 Unexpected "{"
Line 559:27 Expected ":"
Line 564:18 Unexpected "{"
... and 157 more hidden warnings

**/


/* CSS from section stylesheet tags */
.ctr-product-box {
    --color-primary: #275878;
    --color-primary-light: #5BADBD;
    --color-primary-dark: #124264;
    --color-secondary-dark: #242631;
    --color-secondary-light: #FCFAF8;
    --color-white: #FFF;
    --color-accent-green: #79AF36;

    --font-family: Inter, sans-serif;
    --section-gap: 32px;
    --section-radius: 8px;
    --bundle-gap: 16px;
    --container-width: 926px;
    --container-padding: 0 20px;
    --bundle-width: 686px;
    --transition: 0.1s ease;

    padding: 64px 0;
    font-family: var(--font-family);

    @media screen and (max-width: 768px) {
      --section-gap: 16px;
    }

    .ctr-product-box__container {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: var(--container-padding);
      display: flex;
      flex-direction: column;
      gap: var(--section-gap);
    }

    .ctr-product-box__header {
      display: flex;
      flex-direction: column;
    }

    .ctr-product-box__subtitle {
      color: var(--color-primary-light);
      margin: 0 0 .5rem;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1.6px;
      text-align: center;
      text-transform: uppercase;
    }

    .ctr-product-box__title {
      color: var(--color-primary-dark);
      font-size: 28px;
      font-weight: 400;      
      text-align: center;

      @media screen and (max-width: 768px) {
        font-size: 32px;
      }
    }
    .ctr-product-box__description,
    .ctr-product-box__description * {
      color: var(--color-primary-dark);
      font-size: 14px;
      line-height: 1.4;
      transition: all 5s;
    }

    .ctr-product-box__content {
      display: flex;
      flex-direction: column;
      gap: var(--section-gap);
    }

    .ctr-product-box__image-img {
      vertical-align: middle;
      width: 100%;
      height: auto;
    }
    .ctr-bundle {
      display: flex;
      flex-direction: column;
      gap: var(--bundle-gap);
      max-width: var(--bundle-width);
      width: 100%;
      margin: 0 auto;
    }

    .ctr-bundle__options {
      display: flex;
      justify-content: space-between;
      gap: var(--bundle-gap);

      &.m-otp-first {
        flex-direction: row-reverse;
      }

      @media screen and (max-width: 768px) {
        gap: 8px;
      }
    }
    .ctr-bundle__option {
      display: flex;
      align-items: center;
      gap: var(--section-gap);
      color: var(--color-primary);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.4px;
      border: 1px solid #D2D2D2;
      border-radius: var(--section-radius);
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px;
      transition: all var(--transition);

      @media screen and (max-width: 768px) {
        font-size: 15px;
        padding: 16px 4px;

      }
    }

    .ctr-bundle__option.m-active,
    .ctr-bundle__option:hover {
      cursor: pointer;
      background: var(--color-primary);
      color: var(--color-white);
      border-color: var(--color-primary);
    }

    .ctr-bundle__option-input {
      display: none;
    }

    .ctr-bundle__items {
      display: flex;
      flex-direction: column;
      gap: var(--bundle-gap);
    }

    .ctr-bundle__item {
      display: grid;
      grid-template-columns: 24px 1fr 0.8fr;
      grid-template-areas: "header content footer";
      gap: var(--bundle-gap);
      padding: 20px;
      opacity: 0.4;
      color: var(--color-secondary-dark);
      border: 1px solid var(--color-primary);
      border-radius: var(--section-radius);
      background: var(--color-secondary-light);
      transition: opacity var(--transition);

      @media screen and (max-width: 768px) {
        padding: 16px;
        display: grid;
        column-gap: 16px;
        row-gap: 0;
        grid-template-areas:
        "header title title"
        "header price price"
        "header benefits benefits"
        "header footer-text footer-text";
      }

      &.m-active {
        .ctr-bundle__item-list {
          display: flex;
        }
      }
    }

    .ctr-bundle__item-header {
      display: flex;
      justify-content: center;
      align-items: center;
      grid-area: header;
    }
    .ctr-bundle__item-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;

      @media screen and (max-width: 768px) {
        display: contents;
      }
    }

    .ctr-bundle__item-footer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      @media screen and (max-width: 768px) {
        display: contents;
      }
    }

    .ctr-bundle__item.m-active,
    .ctr-bundle__item:hover {
      cursor: pointer;
      opacity: 1;
    }

    .ctr-bundle__item-input {
      position: relative;
      /* hiding browser el */
      appearance: none;
      /* Safari support */
      -webkit-appearance: none;

      &:after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid var(--color-primary);
        z-index: 1;
      }
      &:before {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        /* background: var(--color-primary); */
        background: transparent;
        z-index: 2;
      }

      &:checked {
        &:before {
          background: var(--color-primary);
        }
      }
    }

    .ctr-bundle__item-title {
      grid-area: title;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.4px;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;

      @media screen and (max-width: 768px) {
        display: block;
        font-size: 18px;
        margin-bottom: 5px;
        min-height: auto;

        .ctr-bundle__item-badge {
          display: none;
        }
      }
    }

    .ctr-bundle__item-benefits {
      grid-area: benefits;

      @media screen and (max-width: 768px) {
        margin-bottom: 10px;
      }
    }

    .ctr-bundle__item-badge {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.3px;
      color: var(--color-secondary-dark);
      white-space: nowrap;
      background: var(--color-primary);
      color: var(--color-white);
      padding: 4px 8px;
      border-radius: var(--section-radius);

      @media screen and (max-width: 768px) {
        font-size: 14px;
      }
    }

    .ctr-bundle__item-list {
      display: none;
      flex-direction: column;
      margin: 0;
      padding: 0;
      list-style: circle;

      li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.3px;

        @media screen and (max-width: 768px) {
          font-size: 12px;
        }
      }
    }
    .ctr-bundle__item-footer-text-container {
      grid-area: footer-text;

      .ctr-bundle__item-badge {
        display: none;
      }

      @media screen and (max-width: 768px) {
        display: flex;
        gap: 16px;
        align-items: center;

        .ctr-bundle__item-badge {
          display: block;
        }
      }
    }
    .ctr-bundle__item-price {
      grid-area: price;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: 0.4px;
      color: var(--color-secondary-dark);

      @media screen and (max-width: 768px) {
        font-size: 16px;
        justify-content: flex-start;
        margin-bottom: 5px;
      }
    }

    .ctr-bundle__item-price-new {}

    .ctr-bundle__item-price-old {
      font-weight: 400;
      text-decoration: line-through;
    }

    .ctr-bundle__item-footer-text {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.3px;
      color: var(--color-secondary-dark);

      @media screen and (max-width: 768px) {
        font-size: 14px;
      }

      &.m-transparent {
        opacity: 0;
        visibility: hidden;
      }
    }
    .ctr-bundle__footer {
      display: flex;
      flex-direction: column;
      gap: var(--bundle-gap);
    }

    .ctr-bundle__footer-text {
      font-size: 20px;
      font-weight: 700;
      color: var(--color-secondary-dark);
      letter-spacing: 0.4px;

      strong {
        color: var(--color-accent-green);
      }

      &.m-transparent {
        opacity: 0;
        visibility: hidden;
      }
    }

    .ctr-bundle__button {
      font-size: 20px;
      font-weight: 700;
      padding: 24px;
      color: var(--color-white);
      background: var(--color-primary);
      border-radius: var(--section-radius);
      letter-spacing: 0.4px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid var(--color-primary);
      outline: none;
      width: 100%;
      cursor: pointer;
      transition: all var(--transition);
      font-family: var(--font-family);

      @media screen and (max-width: 768px) {
        font-size: 20px;
        padding: 18px;
        border: 1px solid var(--color-primary);
      }
    }

    .ctr-bundle__button:hover {
      background: var(--color-primary-dark);
      border-color: var(--color-primary-dark);
    }

    .ctr-bundle__guarantees {
      display: flex;
      justify-content: space-between;
      gap: var(--bundle-gap);
      list-style: none;
      padding: 0;
      margin: 0;

      @media screen and (max-width: 768px) {
        gap: 16px;
      }
    }

    .ctr-bundle__guarantee {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      font-size: 16px;
      padding: 16px;
      color: var(--color-secondary-dark);
      font-weight: 500;
      letter-spacing: 0.3px;
      text-align: center;
      border: 2px solid var(--color-primary);
      border-radius: var(--section-radius);
      width: 100%;
      line-height: 1.4;

      @media screen and (max-width: 768px) {
        font-size: 12px;
        padding: 5px;
      }
    }
    .ctr-bundle__guarantee-icon {
      font-size: 18px;
  
      @media screen and (max-width: 768px) {
        font-size: 18px;
      }
    }

    .ctr-bundle__est-time {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
      font-size: 20px;
      letter-spacing: 0.3px;
      width: 100%;

      @media screen and (max-width: 768px) {
        font-size: 18px;
      }
    }

    .ctr-bundle__est-time-text {
      font-weight: 700;
      color: var(--color-secondary-dark);
      background: #E4F0FE;
      padding: 20px;
      width: 100%;
      text-align: center;

    }

    .ctr-bundle__est-time-counter { 
      font-weight: 400;

      span {
        color: var(--color-accent-green);
      }
    }
  }
/* =========================================================
   CTR PDP Buy Box — cleaned + overflow-safe
   Key fix: ALL #shopify-section-{{ section.id }} rules are NOT nested
   ========================================================= */

/* Base variables + section shell */
.ctr-product-box{
  --color-primary: #275878;
  --color-primary-light: #5BADBD;
  --color-primary-dark: #124264;
  --color-secondary-dark: #242631;
  --color-secondary-light: #FCFAF8;
  --color-white: #FFF;
  --color-accent-green: #79AF36;

  --font-family: Inter, sans-serif;

  --section-gap: 32px;
  --section-radius: 8px;
  --bundle-gap: 16px;

  /* Defaults (overridden per-section below) */
  --container-width: 926px;
  --container-padding: 0 20px;
  --bundle-width: 686px;

  --transition: 0.1s ease;

  padding: 64px 0;
  font-family: var(--font-family);
}

@media screen and (max-width: 768px){
  .ctr-product-box{ --section-gap: 16px; }
}

/* =========================================================
   SECTION-SCOPED LAYOUT OVERRIDES (MUST NOT BE NESTED)
   ========================================================= */

/* 1) Make padding count toward width (prevents 430 + padding overflow) */
#shopify-section-{{ section.id }},
#shopify-section-{{ section.id }} *,
#shopify-section-{{ section.id }} *::before,
#shopify-section-{{ section.id }} *::after{
  box-sizing: border-box;
}

/* 2) Desktop sizing to match your current PDP */
#shopify-section-{{ section.id }} .ctr-product-box{
  --container-width: 1330px;     /* overall two-column section width */
  --container-padding: 0 20px;   /* gutters */
  --bundle-width: 100%;          /* IMPORTANT: stop buybox being artificially narrow */
}

/* 3) Mobile: match site gutters + prevent any bleed */
@media (max-width: 749px){
  #shopify-section-{{ section.id }} .ctr-product-box{
    --container-width: 100%;
    --container-padding: 0 16px;
    --bundle-width: 100%;
  }

  #shopify-section-{{ section.id }}{
    overflow-x: clip;
  }

  /* Allow children to shrink instead of forcing horizontal scroll */
  #shopify-section-{{ section.id }} .pdp-ctr-grid,
  #shopify-section-{{ section.id }} .pdp-ctr-grid__media,
  #shopify-section-{{ section.id }} .pdp-ctr-grid__buybox{
    min-width: 0;
  }

  #shopify-section-{{ section.id }} img{
    max-width: 100%;
    height: auto;
  }

  /* Prevent two 100%-width options / guarantees from overflowing */
  #shopify-section-{{ section.id }} .ctr-bundle__options,
  #shopify-section-{{ section.id }} .ctr-bundle__guarantees{
    flex-wrap: wrap;
  }

  #shopify-section-{{ section.id }} .ctr-bundle__option,
  #shopify-section-{{ section.id }} .ctr-bundle__guarantee{
    width: auto !important;
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }
}

/* 4) Two-column proportions on desktop */
@media (min-width: 990px){
  #shopify-section-{{ section.id }} .pdp-ctr-grid{
    grid-template-columns: 55% 45%;
    column-gap: 50px;
    align-items: start;
  }
}



/* PDP standard header above "PREVENTION + TREATMENT" */
#shopify-section-{{ section.id }} .ctr-pdp-standard-header{
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#shopify-section-{{ section.id }} .ctr-pdp-h1{
  margin: 0;
  line-height: 1.1;
}

#shopify-section-{{ section.id }} .ctr-pdp-reviews{
  margin: 0;
}

/* --- CTR PDP Buybox: keep page background white (prevent theme color-scheme bleed) --- */
#shopify-section-{{ section.id }},
#shopify-section-{{ section.id }} .ctr-product-box{
  background: #fff !important;
}

/* --- Frontrow: contain all blue styling inside the Frontrow box only --- */
#shopify-section-{{ section.id }} .ctr-pdp-frontrow{
  width: 100%;
  max-width: 520px;
  margin: 12px auto 18px;
}

#shopify-section-{{ section.id }} .ctr-frontrow-block{
  background: #F3FBFF;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px;
  padding: 18px 20px;
  overflow: hidden;
}

#shopify-section-{{ section.id }} .ctr-frontrow-block__inner{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Nuke any snippet-provided backgrounds/borders/shadows inside the Frontrow render */
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner *{
  box-shadow: none !important;
}
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner [style*="background"],
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .gradient,
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .color-background-1,
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .color-background-2{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner [style*="border"],
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .content-container,
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .rte{
  border: 0 !important;
}

/* If the snippet wraps in page-width/content-container, neutralize spacing so our box is the only container */
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .page-width,
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .page-width--narrow,
#shopify-section-{{ section.id }} .ctr-frontrow-block__inner .content-container{
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* Icon row (3-up) */
#shopify-section-{{ section.id }} .ctr-pdp-icons{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
}

#shopify-section-{{ section.id }} .ctr-pdp-icons .icon-with-text__item{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 18px;
}

#shopify-section-{{ section.id }} .ctr-pdp-icons .icon-with-text__item:not(:first-child){
  border-left: 1px solid rgba(39, 88, 120, .18);
}

#shopify-section-{{ section.id }} .ctr-pdp-icons .icon-with-text__icon{
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  display: block;
}

#shopify-section-{{ section.id }} .ctr-pdp-icons .h4{
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}

@media (max-width: 749px){
  #shopify-section-{{ section.id }} .ctr-pdp-icons .icon-with-text__item{
    padding: 10px 12px;
  }
  #shopify-section-{{ section.id }} .ctr-pdp-icons .icon-with-text__icon{
    width: 24px !important;
    height: 24px !important;
  }
  #shopify-section-{{ section.id }} .ctr-pdp-icons .h4{
    font-size: 11px;
  }
}

#shopify-section-{{ section.id }} .ctr-pdp-standard-header,
#shopify-section-{{ section.id }} .ctr-pdp-standard-header *{
  max-width: 100%;
}
/* 5) Spacing: subtitle → title → description → purchase buttons */
#shopify-section-{{ section.id }} .ctr-product-box__subtitle{ margin-bottom: 10px; }
#shopify-section-{{ section.id }} .ctr-product-box__title{ margin-top: 0; margin-bottom: 14px; }

#shopify-section-{{ section.id }} .ctr-product-box__content p,
#shopify-section-{{ section.id }} .ctr-product-box__content .rte,
#shopify-section-{{ section.id }} .ctr-product-box__description{
  margin-top: 0;
  margin-bottom: 18px;
}

#shopify-section-{{ section.id }} [x-ref="purchaseTypes"],
#shopify-section-{{ section.id }} .ctr-product-box__purchase-types,
#shopify-section-{{ section.id }} .ctr-product-box__purchase-type{
  margin-top: 18px;
}

/* =========================================================
   Core component styles (your existing structure)
   ========================================================= */

.ctr-product-box__container{
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.ctr-product-box__header{
  display: flex;
  flex-direction: column;
}

.ctr-product-box__subtitle{
  color: var(--color-primary-light);
  margin: 0 0 .5rem;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-align: center;
  text-transform: uppercase;
}

.ctr-product-box__title{
  color: var(--color-primary-dark);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
}

@media screen and (max-width: 768px){
  .ctr-product-box__title{ font-size: 32px; }
}

.ctr-product-box__description,
.ctr-product-box__description *{
  color: var(--color-primary-dark);
  font-size: 14px;
  line-height: 1.4;
}

.ctr-product-box__content{
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.ctr-product-box__image-img{
  vertical-align: middle;
  width: 100%;
  height: auto;
}

/* Bundle */
.ctr-bundle{
  display: flex;
  flex-direction: column;
  gap: var(--bundle-gap);
  max-width: var(--bundle-width);
  width: 100%;
  margin: 0 auto;
}

.ctr-bundle__options{
  display: flex;
  justify-content: space-between;
  gap: var(--bundle-gap);
}

.ctr-bundle__options.m-otp-first{ flex-direction: row-reverse; }

@media screen and (max-width: 768px){
  .ctr-bundle__options{ gap: 8px; }
}

.ctr-bundle__option{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--section-gap);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 1px solid #D2D2D2;
  border-radius: var(--section-radius);
  width: 100%;
  text-align: center;
  padding: 16px;
  transition: all var(--transition);
}

@media screen and (max-width: 768px){
  .ctr-bundle__option{
    font-size: 15px;
    padding: 16px 4px;
  }
}

.ctr-bundle__option.m-active,
.ctr-bundle__option:hover{
  cursor: pointer;
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.ctr-bundle__option-input{ display: none; }

.ctr-bundle__items{
  display: flex;
  flex-direction: column;
  gap: var(--bundle-gap);
}

/* Keep the rest of your bundle/item styling as-is below this point.
   (No overflow-specific changes needed there.) */


/* =========================================================
   PDP gallery layout (left column)
   ========================================================= */

.pdp-ctr-grid{
  display: grid;
  gap: var(--section-gap);
}

/* Hero + thumbs */
.pdp-ctr-hero{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--section-radius);
}

#shopify-section-{{ section.id }} .pdp-ctr-thumbs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 10px;
  overflow: visible;          /* stop horizontal scroll behavior */
  padding-bottom: 0;
  margin-top: 12px;
}

/* Make each thumb consistent, and avoid stretching */
#shopify-section-{{ section.id }} .pdp-ctr-thumb{
  flex: 0 0 69px;             /* fixed width */
  width: 69px;
  height: 69px;
}
@media (max-width: 749px){
  #shopify-section-{{ section.id }} .pdp-ctr-thumbs{
    max-width: 360px;         /* tweak: 320–380 */
    margin-left: auto;
    margin-right: auto;
  }
}

.pdp-ctr-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide the old in-buybox image (since gallery is now left column) */
.pdp-ctr-grid__buybox .ctr-product-box__image{
  display: none;
}
/* --- Mobile overflow fix: force media column to shrink to viewport --- */
@media (max-width: 749px){
  #shopify-section-{{ section.id }} .pdp-ctr-grid{
    grid-template-columns: 1fr !important; /* ensure single column */
    width: 100%;
    max-width: 100%;
  }

  #shopify-section-{{ section.id }} .pdp-ctr-grid__media,
  #shopify-section-{{ section.id }} .pdp-ctr-grid__buybox{
    min-width: 0 !important;   /* CRITICAL for grid shrink */
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden;          /* belt + suspenders */
  }

  #shopify-section-{{ section.id }} .pdp-ctr-grid__media img,
  #shopify-section-{{ section.id }} .pdp-ctr-grid__media picture,
  #shopify-section-{{ section.id }} .pdp-ctr-grid__media svg{
    display: block;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}


#shopify-section-{{ section.id }} .pdp-ctr-accordions .accordion__title{
  font-size: 2rem;
}

/* summary layout */
#shopify-section-{{ section.id }} .pdp-ctr-accordions summary.accordion__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

/* blue chip behind caret */
#shopify-section-{{ section.id }} .pdp-ctr-accordions .icon-collapse{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(95, 171, 192, 0.2);
  border-radius: 8px;
  flex: 0 0 36px;
}

/* rotate caret when open */
#shopify-section-{{ section.id }} .pdp-ctr-accordions .icon-caret{
  transition: transform 150ms ease;
  transform-origin: 50% 50%;
}

#shopify-section-{{ section.id }} .pdp-ctr-accordions details[open] .icon-caret{
  transform: rotate(180deg);
}

/* Make the caret chip a true square + dead-center contents */
#shopify-section-{{ section.id }} .pdp-ctr-accordions .icon-collapse{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
  flex: 0 0 auto;
}

/* Center the SVG box and remove baseline behavior */
#shopify-section-{{ section.id }} .pdp-ctr-accordions .icon-collapse svg{
  display: block;
  width: 10px;
  height: 6px;
  margin: 0;
  transform: translate(1px, -1px); /* right, up */
}

/* =========================================================
   Mobile: gallery arrows + thumbnail suppression + accordion caret sizing
   (Layout reordering is handled by the script below for maximum browser reliability.)
   ========================================================= */

/* Hero wrap is the positioning context for arrows */
#shopify-section-{{ section.id }} .pdp-ctr-hero-wrap{
  position: relative;
}

/* Default: arrows hidden (desktop uses thumbs) */
#shopify-section-{{ section.id }} .pdp-ctr-arrow{
  display: none;
}

@media (max-width: 749px){
  /* Thumbnails off on mobile */
  #shopify-section-{{ section.id }} .pdp-ctr-thumbs{
    display: none !important;
  }

  /* Overlay arrows on mobile */
  #shopify-section-{{ section.id }} .pdp-ctr-arrow{
    display: inline-flex !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.12);
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 26px;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #shopify-section-{{ section.id }} .pdp-ctr-arrow--prev{ left: 10px; }
  #shopify-section-{{ section.id }} .pdp-ctr-arrow--next{ right: 10px; }

  /* Kill any theme-provided chevron so only our chip + caret shows */
  #shopify-section-{{ section.id }} .pdp-ctr-accordions summary.accordion__summary::after{
    content: none !important;
  }
  #shopify-section-{{ section.id }} .pdp-ctr-accordions summary.accordion__summary::-webkit-details-marker{
    display: none !important;
  }

  /* Accordion caret chip: smaller + dead-centered */
  #shopify-section-{{ section.id }} .pdp-ctr-accordions summary.accordion__summary .icon-collapse{
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 0 !important;
    border-radius: 8px !important;
    background: rgba(95, 171, 192, 0.2) !important;
  }
  /* Force true visual centering (some themes offset SVG baseline) */
  #shopify-section-{{ section.id }} .pdp-ctr-accordions summary.accordion__summary .icon-collapse{
    position: relative !important;
  }
  #shopify-section-{{ section.id }} .pdp-ctr-accordions summary.accordion__summary .icon-collapse svg{
    display: block !important;
    width: 10px !important;
    height: 6px !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  #shopify-section-{{ section.id }} .pdp-ctr-accordions details[open] summary.accordion__summary .icon-collapse svg{
    transform: translate(-50%, -50%) rotate(180deg) !important;
  }
  /* Neutralize earlier rotate rule that would otherwise overwrite translate() */
  #shopify-section-{{ section.id }} .pdp-ctr-accordions .icon-caret{
    transform: none !important;
  }
}