@layer sections{
  [ui-section=single-product]{
    display:flex;
    gap:var(--spacing-24);
    flex-direction:column;
    padding:var(--top-spacing) 8% var(--bottom-spacing) !important;
  }
  [ui-section=single-product] .core{
    display:grid;
    grid-template-columns:50% auto;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
    overflow:hidden;
  }
  [ui-section=single-product] .core .media[data-layout=carousel]{
    display:flex;
    position:relative;
    flex-direction:column;
    height:-moz-fit-content;
    height:fit-content;
    gap:var(--spacing-24);
  }
  [ui-section=single-product] .core .media[data-layout=carousel] .arrow{
    position:absolute;
    top:40%;
    transform:translateY(-50%);
    border-color:transparent !important;
    background-color:var(--color-on-primary);
    color:var(--color-primary);
  }
  [ui-section=single-product] .core .media[data-layout=carousel] .arrow:disabled{
    opacity:0.5;
    pointer-events:none;
  }
  [ui-section=single-product] .core .media[data-layout=carousel] .arrow:first-of-type{
    inset-inline-start:var(--spacing-12);
  }
  [ui-section=single-product] .core .media[data-layout=carousel] .arrow:last-of-type{
    inset-inline-end:var(--spacing-12);
  }
  [ui-section=single-product] .core .media[data-layout=carousel] [ui-slot=carousel]{
    height:100%;
  }
  [ui-section=single-product] .core .media[data-layout=carousel] [ui-slot=carousel].main-media{
    --per-page:1;
    height:100%;
    aspect-ratio:1/1;
    overflow-y:hidden;
    border-radius:var(--radius-16);
  }
  [ui-section=single-product] .core .media[data-layout=carousel] [ui-slot=carousel].markers{
    --per-page:4;
    --item-size:85%;
    --gap:var(--spacing-8);
  }
  [ui-section=single-product] .core .media[data-layout=carousel] [ui-slot=carousel].markers .marker{
    height:100%;
    overflow:hidden;
    transition:var(--transition-standard-default-spatial);
    border-radius:var(--radius-8);
    opacity:1;
    aspect-ratio:1/1;
  }
  [ui-section=single-product] .core .media[data-layout=carousel] [ui-slot=carousel].markers .marker:hover, [ui-section=single-product] .core .media[data-layout=carousel] [ui-slot=carousel].markers .marker[aria-selected=true]{
    opacity:0.5;
  }
  [ui-section=single-product] .core .media[data-layout=grid]{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    height:-moz-fit-content;
    height:fit-content;
    grid-gap:var(--spacing-12);
    gap:var(--spacing-12);
  }
  [ui-section=single-product] .core .media[data-layout=grid] .image{
    height:100%;
    overflow:hidden;
    aspect-ratio:1/1;
    border-radius:var(--radius-16);
  }
  [ui-section=single-product] .core .media[data-layout=grid] .image:nth-child(3n+1){
    grid-column:1/3;
  }
  [ui-section=single-product] .core .media[data-layout=grid] .image > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=single-product] .core .content{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-16);
  }
  [ui-section=single-product] .core .content [ui-block=title][data-size=xl]{
    font:var(--font-display-md);
  }
  [ui-section=single-product] .core .content [ui-block=title][data-size=lg]{
    font:var(--font-headline-lg);
  }
  [ui-section=single-product] .core .content [ui-block=title][data-size=md]{
    font:var(--font-title-lg);
  }
  [ui-section=single-product] .core .content [ui-block=title][data-size=sm]{
    font:var(--font-title-md);
  }
  [ui-section=single-product] .core .content [ui-block=title][data-size=xs]{
    font:var(--font-title-sm);
  }
  [ui-section=single-product] .core .content [ui-block=rating]{
    display:flex;
    align-items:center;
    gap:var(--spacing-8);
  }
  [ui-section=single-product] .core .content [ui-block=price]{
    display:flex;
    align-items:center;
    justify-content:var(--product-price-justify, flex-start);
    gap:var(--product-price-gap, var(--spacing-8));
    margin-block-start:var(--product-price-margin-top, 0px);
    margin-block-end:var(--product-price-margin-bottom, 0px);
  }
  [ui-section=single-product] .core .content [ui-block=price] .original-price{
    display:inline-block;
    font-size:var(--product-price-font-size, 22px);
    font-weight:var(--product-price-font-weight, 400);
    color:var(--product-price-color, currentColor);
    line-height:1.25;
    text-align:var(--product-price-alignment, left);
  }
  [ui-section=single-product] .core .content [ui-block=price] .compare-at-price{
    display:inline-block;
    font-size:var(--product-compare-font-size, 22px);
    font-weight:var(--product-compare-font-weight, 400);
    color:var(--product-compare-color, currentColor);
    line-height:1.25;
    text-align:var(--product-compare-alignment, left);
    opacity:1;
    -webkit-text-decoration:line-through;
    text-decoration:line-through;
  }
  [ui-section=single-product] .core .content [ui-block=controller]{
    display:grid;
    grid-gap:var(--spacing-12);
    gap:var(--spacing-12);
    grid-template-columns:min-content auto;
  }
  [ui-section=single-product] .core .content [ui-block=controller] > ui-shop-button:nth-of-type(2){
    grid-column:1/3;
  }
  [ui-section=single-product] .core .content [ui-block=feature-list]{
    display:flex;
    gap:var(--spacing-24);
    flex-wrap:wrap;
    margin-block-start:var(--spacing-24);
  }
  [ui-section=single-product] .core .content [ui-block=feature-list] .feature-item{
    display:flex;
    align-items:center;
    gap:var(--spacing-12);
    overflow:hidden;
  }
  [ui-section=single-product] .core .content [ui-block=feature-list] .feature-item .icon{
    display:flex;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    width:calc(var(--spacing-32) + var(--spacing-8));
    height:calc(var(--spacing-32) + var(--spacing-8));
    border-radius:var(--radius-feature-item);
    background-color:var(--color-surface-container-low);
  }
  [ui-section=single-product] .core .content [ui-block=feature-list] .feature-item .label{
    overflow:hidden;
    font:var(--font-body-lg);
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  [ui-section=single-product] .core .content img,
  [ui-section=single-product] .core .content iframe{
    max-width:100%;
  }
  [ui-section=single-product][data-media-width-desktop=sm] .core{
    grid-template-columns:40% auto;
  }
  [ui-section=single-product][data-media-width-desktop=md] .core{
    grid-template-columns:50% auto;
  }
  [ui-section=single-product][data-media-width-desktop=lg] .core{
    grid-template-columns:auto 40%;
  }
  @media (min-width: 769.02px){
    [ui-section=single-product]:has(.media[data-layout=grid]) [data-layout=carousel]{
      display:none;
    }
  }
  @media (max-width: 769px){
    [ui-section=single-product][data-media-width-desktop] .core{
      grid-template-columns:1fr;
    }
    [ui-section=single-product] .core:has(.media[data-layout=grid]) [data-layout=grid]{
      display:none;
    }
    [ui-section=single-product] .core .media[data-layout=carousel] .arrow{
      display:none;
    }
    [ui-section=single-product] .core .content [ui-block=title][data-size]{
      font:var(--font-headline-sm);
    }
  }
}

[ui-block=controller]:not(:has(> ui-quantity)) {
  grid-template-columns:1fr;
}

[ui-block=controller]:not(:has(> ui-quantity)) > ui-shop-button {
  width:100%;
  grid-column:auto;
}


/* Shipping checkpoints block */
[ui-section=single-product] .core .content [ui-block=shipping-checkpoints]{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--shipping-checkpoint-count), minmax(0, 1fr));
  gap:0;
  width:100%;
  margin-top:var(--shipping-margin-top);
  margin-bottom:var(--shipping-margin-bottom);
  padding-block:0;
}

[ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoints__bar{
  position:absolute;
  top:calc(var(--shipping-icon-size) / 2);
  inset-inline:calc(100% / (var(--shipping-checkpoint-count) * 2));
  height:var(--shipping-line-width);
  background:currentColor;
  opacity:.9;
  transform:translateY(-50%);
}

[ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint{
  position:relative;
  z-index:1;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

[ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--shipping-icon-size);
  height:var(--shipping-icon-size);
  flex:0 0 var(--shipping-icon-size);
  border-radius:50%;
  background:var(--color-primary);
  color:var(--color-on-primary);
}

[ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__top,
[ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__bottom{
  margin:0;
}

[ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__top{
  margin-top:8px;
  font-size:var(--shipping-top-size);
  font-weight:700;
  line-height:1.25;
  white-space:normal;
  width:min(100%, 85px);
  max-width:85px;
  margin-left:auto;
  margin-right:auto;
  overflow-wrap:anywhere;
}

[ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__bottom{
  margin-top:3px;
  font-size:var(--shipping-bottom-size);
  line-height:1.25;
  width:min(100%, 85px);
  max-width:85px;
  margin-left:auto;
  margin-right:auto;
  overflow-wrap:anywhere;
}

@media (max-width: 480px){
  [ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__top,
  [ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__bottom{
    width:min(100%, 85px);
    max-width:85px;
  }

  [ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__top{
    font-size:max(11px, calc(var(--shipping-top-size) - 2px));
  }

  [ui-section=single-product] .core .content [ui-block=shipping-checkpoints] .shipping-checkpoint__bottom{
    font-size:max(10px, calc(var(--shipping-bottom-size) - 2px));
  }
}