/* Mio&Gem PDP v14 — compact purchase controls + DOM-agnostic Section 05 reset. */

/* 02 · Your bracelet — small selectors, not cards. */
body.single-product.mio-v2 .mio-purchase-stage .mio-size-picker,
body.single-product.mio-v2 .mio-purchase-grid > .mio-size-picker{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:10px 12px!important;
  align-self:start!important;
  justify-self:stretch!important;
}
body.single-product.mio-v2 .mio-size-picker__head{
  margin:0 0 6px!important;
  min-height:0!important;
  align-items:center!important;
}
body.single-product.mio-v2 .mio-size-options{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  height:auto!important;
  min-height:0!important;
  align-items:start!important;
}
body.single-product.mio-v2 .mio-size-option{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  margin:0!important;
  padding:8px 12px!important;
  border-radius:12px!important;
}
body.single-product.mio-v2 .mio-size-option b{
  margin:0!important;
  font-size:12px!important;
  line-height:1.05!important;
}
body.single-product.mio-v2 .mio-size-option small{
  margin:3px 0 0!important;
  font-size:7.5px!important;
  line-height:1.1!important;
}

/*
 * 05 · Before you buy
 * Do not depend on the section being a direct child. Earlier PDP JS can wrap,
 * reorder or inject headers, so this reset targets the class itself and clears
 * every legacy sizing constraint before rebuilding the layout.
 */
html body.single-product.mio-v2 .mio-product-care{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:auto!important;
  grid-auto-rows:max-content!important;
  align-items:start!important;
  align-content:start!important;
  justify-items:stretch!important;
  justify-content:stretch!important;
  gap:10px!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  block-size:auto!important;
  min-block-size:0!important;
  max-block-size:none!important;
  margin:10px 0 0!important;
  padding:24px!important;
  overflow:visible!important;
  aspect-ratio:auto!important;
}
html body.single-product.mio-v2 .mio-product-care::before,
html body.single-product.mio-v2 .mio-product-care::after{
  display:none!important;
  content:none!important;
}
html body.single-product.mio-v2 .mio-product-care > *{
  box-sizing:border-box!important;
  margin-block-start:0!important;
  margin-block-end:0!important;
}
html body.single-product.mio-v2 .mio-product-care > header,
html body.single-product.mio-v2 .mio-product-care > .mio-section-header{
  display:block!important;
  grid-column:1/-1!important;
  grid-row:auto!important;
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 0 12px!important;
  padding:0!important;
  transform:none!important;
}
html body.single-product.mio-v2 .mio-product-care > header .mio-eyebrow,
html body.single-product.mio-v2 .mio-product-care > .mio-section-header .mio-eyebrow{
  margin:0 0 7px!important;
}
html body.single-product.mio-v2 .mio-product-care > header h2,
html body.single-product.mio-v2 .mio-product-care > .mio-section-header h2{
  margin:0!important;
  line-height:1.03!important;
}
html body.single-product.mio-v2 .mio-product-care > header .mio-section-intro,
html body.single-product.mio-v2 .mio-product-care > .mio-section-header .mio-section-intro{
  margin:9px 0 0!important;
}
html body.single-product.mio-v2 .mio-product-care > article{
  display:block!important;
  grid-column:auto!important;
  grid-row:auto!important;
  position:static!important;
  align-self:start!important;
  justify-self:stretch!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  block-size:auto!important;
  min-block-size:0!important;
  max-block-size:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:16px 18px!important;
  border-radius:16px!important;
  overflow:visible!important;
  transform:none!important;
}
html body.single-product.mio-v2 .mio-product-care > article .mio-eyebrow{
  position:static!important;
  margin:0 0 6px!important;
  padding:0!important;
  font-size:8px!important;
  line-height:1.2!important;
}
html body.single-product.mio-v2 .mio-product-care > article h3{
  position:static!important;
  margin:0 0 7px!important;
  padding:0!important;
  font:500 20px/1.08 var(--mg-serif)!important;
}
html body.single-product.mio-v2 .mio-product-care > article > p:not(.mio-eyebrow){
  position:static!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  font-size:10px!important;
  line-height:1.5!important;
}
html body.single-product.mio-v2 .mio-product-care > article a{
  position:static!important;
  display:inline-block!important;
  margin:9px 0 0!important;
  padding:0!important;
  font-size:9px!important;
  line-height:1.2!important;
}

/* Any wrapper around the editorial flow must size to its actual content. */
html body.single-product.mio-v2 .mio-product-editorial{
  align-items:start!important;
  align-content:start!important;
  grid-auto-rows:max-content!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
html body.single-product.mio-v2 .mio-product-editorial .mio-product-section{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  block-size:auto!important;
  min-block-size:0!important;
  max-block-size:none!important;
}

/* Tablet and mobile: one natural vertical flow, no spare grid tracks. */
@media(max-width:1023px){
  html body.single-product.mio-v2 .mio-product-care{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    block-size:auto!important;
    min-block-size:0!important;
    max-block-size:none!important;
    margin:8px 0 0!important;
    padding:20px!important;
  }
  html body.single-product.mio-v2 .mio-product-care > header,
  html body.single-product.mio-v2 .mio-product-care > .mio-section-header{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 0 12px!important;
    padding:0!important;
  }
  html body.single-product.mio-v2 .mio-product-care > article{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:15px 16px!important;
  }
  html body.single-product.mio-v2 .mio-product-care > article + article{
    margin-top:8px!important;
  }
}

@media(max-width:767px){
  body.single-product.mio-v2 .mio-purchase-stage .mio-size-picker,
  body.single-product.mio-v2 .mio-purchase-grid > .mio-size-picker{
    padding:8px 10px!important;
  }
  body.single-product.mio-v2 .mio-size-picker__head{margin-bottom:5px!important}
  body.single-product.mio-v2 .mio-size-options{gap:5px!important}
  body.single-product.mio-v2 .mio-size-option{
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    padding:7px 10px!important;
    border-radius:11px!important;
  }
  body.single-product.mio-v2 .mio-size-option b{font-size:11.5px!important}
  body.single-product.mio-v2 .mio-size-option small{font-size:7px!important;margin-top:2px!important}

  html body.single-product.mio-v2 .mio-product-care{
    padding:18px!important;
  }
  html body.single-product.mio-v2 .mio-product-care > header,
  html body.single-product.mio-v2 .mio-product-care > .mio-section-header{
    margin-bottom:10px!important;
  }
  html body.single-product.mio-v2 .mio-product-care > article{
    padding:14px 15px!important;
    border-radius:14px!important;
  }
  html body.single-product.mio-v2 .mio-product-care > article h3{font-size:19px!important}
  html body.single-product.mio-v2 .mio-product-care > article > p:not(.mio-eyebrow){font-size:10px!important}
  html body.single-product.mio-v2 .mio-product-care > article a{margin-top:8px!important}
}


/* v21 — final PDP layout ownership across mobile, tablet, desktop.
 * Removes legacy sticky-summary overlap and explicitly places the three
 * top-level product regions: gallery, summary, then full-width editorial.
 */
html body.single-product.mio-v2 div.product{
  box-sizing:border-box!important;
  position:relative!important;
  align-items:start!important;
  align-content:start!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
html body.single-product.mio-v2 div.product>.woocommerce-product-gallery,
html body.single-product.mio-v2 div.product>.summary,
html body.single-product.mio-v2 div.product>.mio-product-editorial{
  box-sizing:border-box!important;
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  float:none!important;
  transform:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  opacity:1!important;
  visibility:visible!important;
}
html body.single-product.mio-v2 div.product>.summary{
  position:static!important;
  inset:auto!important;
  align-self:start!important;
  z-index:auto!important;
}
html body.single-product.mio-v2 div.product>.mio-product-editorial{
  display:block!important;
  width:100%!important;
  margin:0!important;
  clear:both!important;
  z-index:1!important;
}
html body.single-product.mio-v2 .mio-product-editorial>.mio-product-section,
html body.single-product.mio-v2 .mio-product-editorial>.mio-purchase-stage{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  clear:both!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
}
html body.single-product.mio-v2 .mio-match-hero,
html body.single-product.mio-v2 .mio-product-position{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
}
html body.single-product.mio-v2 .mio-mobile-buy{
  display:none!important;
}

/* Phone */
@media(max-width:767px){
  html body.single-product.mio-v2 div.product{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    margin:10px auto 0!important;
    padding:0 0 84px!important;
  }
  html body.single-product.mio-v2 div.product>.woocommerce-product-gallery{
    order:1!important;
    width:100%!important;
    margin:0!important;
  }
  html body.single-product.mio-v2 div.product>.summary{
    order:2!important;
    width:100%!important;
    margin:0!important;
    padding:16px!important;
  }
  html body.single-product.mio-v2 div.product>.mio-product-editorial{
    order:3!important;
    width:100%!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main,
  html body.single-product.mio-v2 .woocommerce-product-gallery .flex-viewport{
    width:100%!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main img,
  html body.single-product.mio-v2 .woocommerce-product-gallery__image img{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    aspect-ratio:1/1!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  html body.single-product.mio-v2 .summary .product_title{
    font-size:clamp(32px,9vw,38px)!important;
  }
  html body.single-product.mio-v2 .mio-product-section,
  html body.single-product.mio-v2 .mio-purchase-stage{
    width:100%!important;
    margin-top:8px!important;
  }
  html body.single-product.mio-v2 .mio-mobile-buy{
    display:flex!important;
  }
}

/* Tablet / narrow desktop: single column below 960px keeps controls readable. */
@media(min-width:768px) and (max-width:959px){
  html body.single-product.mio-v2 div.product{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:calc(100vw - 32px)!important;
    max-width:none!important;
    margin:16px auto 0!important;
    padding:0 0 44px!important;
  }
  html body.single-product.mio-v2 div.product>.woocommerce-product-gallery{
    order:1!important;
    width:100%!important;
  }
  html body.single-product.mio-v2 div.product>.summary{
    order:2!important;
    width:100%!important;
    margin:0!important;
    padding:22px!important;
  }
  html body.single-product.mio-v2 div.product>.mio-product-editorial{
    order:3!important;
    width:100%!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main,
  html body.single-product.mio-v2 .woocommerce-product-gallery .flex-viewport{
    aspect-ratio:1/1!important;
    height:auto!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main img,
  html body.single-product.mio-v2 .woocommerce-product-gallery__image img{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  html body.single-product.mio-v2 .summary .product_title{
    font-size:clamp(38px,6vw,46px)!important;
  }
  html body.single-product.mio-v2 .mio-product-design.is-prototype-enhanced{
    grid-template-columns:1fr!important;
  }
}

/* Landscape tablet / standard desktop */
@media(min-width:960px) and (max-width:1199px){
  html body.single-product.mio-v2 div.product{
    display:grid!important;
    grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr)!important;
    grid-template-rows:auto auto!important;
    gap:16px!important;
    width:min(1180px,calc(100vw - 40px))!important;
    margin:18px auto 0!important;
    padding:0 0 48px!important;
  }
  html body.single-product.mio-v2 div.product>.woocommerce-product-gallery{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    margin:0!important;
  }
  html body.single-product.mio-v2 div.product>.summary{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    margin:0!important;
    padding:22px!important;
  }
  html body.single-product.mio-v2 div.product>.mio-product-editorial{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    margin:0!important;
  }
  html body.single-product.mio-v2 .summary .product_title{
    font-size:clamp(38px,4.2vw,48px)!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main,
  html body.single-product.mio-v2 .woocommerce-product-gallery .flex-viewport{
    aspect-ratio:1/1!important;
    height:auto!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main img,
  html body.single-product.mio-v2 .woocommerce-product-gallery__image img{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  html body.single-product.mio-v2 .mio-product-design.is-prototype-enhanced{
    grid-template-columns:1fr 1fr!important;
  }
}

/* Desktop / large screens */
@media(min-width:1200px){
  html body.single-product.mio-v2 div.product{
    display:grid!important;
    grid-template-columns:minmax(0,1.06fr) minmax(400px,.94fr)!important;
    grid-template-rows:auto auto!important;
    gap:20px 24px!important;
    width:min(1320px,calc(100vw - 64px))!important;
    margin:22px auto 0!important;
    padding:0 0 56px!important;
  }
  html body.single-product.mio-v2 div.product>.woocommerce-product-gallery{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    margin:0!important;
  }
  html body.single-product.mio-v2 div.product>.summary{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    margin:0!important;
    padding:28px!important;
  }
  html body.single-product.mio-v2 div.product>.mio-product-editorial{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    margin:0!important;
  }
  html body.single-product.mio-v2 .summary .product_title{
    font-size:clamp(44px,4vw,58px)!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main,
  html body.single-product.mio-v2 .woocommerce-product-gallery .flex-viewport{
    aspect-ratio:1/1!important;
    height:auto!important;
  }
  html body.single-product.mio-v2 .mio-custom-gallery__main img,
  html body.single-product.mio-v2 .woocommerce-product-gallery__image img{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  html body.single-product.mio-v2 .mio-product-design.is-prototype-enhanced{
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;
  }
}
