/* Atelier Set Inventory 2.1.0 — clean PDP-native Mix Sizes UI. */
.atsi-set-form .atsi-set-tools{
  display:flex;
  align-items:center;
  width:100%;
  margin:8px 0 0;
  padding:0;
  border:0;
}

.atsi-set-form .atsi-mix-toggle,
.atsi-set-form .atsi-try-mix{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--ecpdp-ink,#422F23)!important;
  font-family:var(--ecpdp-font-ui,inherit)!important;
  font-weight:400!important;
  text-transform:uppercase;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Visually compact. The transparent vertical padding keeps a reliable mobile hit area. */
.atsi-set-form .atsi-mix-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto!important;
  min-width:0!important;
  min-height:34px;
  margin:0;
  padding:7px 0!important;
  border:0!important;
  font-size:10px!important;
  line-height:1.15!important;
  letter-spacing:.075em!important;
  opacity:1!important;
}
.atsi-set-form .atsi-mix-toggle::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  height:1px;
  background:currentColor;
  opacity:.38;
  transition:opacity .16s ease,transform .16s ease;
  transform-origin:left center;
}
.atsi-set-form .atsi-mix-toggle::after{
  content:"+";
  display:inline-block;
  margin-left:1px;
  font-size:11px;
  line-height:1;
  color:currentColor;
}
.atsi-set-form .atsi-mix-toggle[aria-pressed="true"]::after{content:"−"}
.atsi-set-form .atsi-mix-toggle:is(:hover,:focus-visible,:active),
.atsi-set-form .atsi-mix-toggle[aria-pressed="true"]{
  background:transparent!important;
  color:var(--ecpdp-ink,#422F23)!important;
  outline:none!important;
  opacity:1!important;
}
.atsi-set-form .atsi-mix-toggle:is(:hover,:focus-visible,:active)::before,
.atsi-set-form .atsi-mix-toggle[aria-pressed="true"]::before{
  opacity:1;
}

.atsi-set-form .atsi-set-note{
  margin:8px 0 0;
  color:var(--ecpdp-ink,#422F23);
  font-size:10px;
  line-height:1.5;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.atsi-set-form .atsi-set-note[hidden],
.atsi-set-form .atsi-mix-wrap[hidden]{display:none!important}
.atsi-set-form .atsi-set-note span{display:block}
.atsi-set-form .atsi-set-note__title{margin-bottom:2px}

.atsi-set-form .atsi-try-mix{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  margin:4px 0 0;
  padding:6px 0!important;
  border:0!important;
  border-bottom:1px solid rgba(66,47,35,.42)!important;
  font-size:10px!important;
  line-height:1.1!important;
  letter-spacing:.05em!important;
}
.atsi-set-form .atsi-try-mix:is(:hover,:focus-visible,:active){
  background:transparent!important;
  color:var(--ecpdp-ink,#422F23)!important;
  border-bottom-color:currentColor!important;
  outline:none!important;
  opacity:1!important;
}

.atsi-set-form .atsi-mix-wrap{margin-top:10px}
.atsi-set-form .atsi-mix-group+.atsi-mix-group{margin-top:12px}
.atsi-set-form .atsi-native-size-hidden{display:none!important}
.atsi-set-form .atsi-hard-disabled{opacity:.32!important;pointer-events:none!important;cursor:not-allowed!important}
.atsi-set-form .ecpdp-notify-link{display:none!important}

/* Keep Mix rows fully inside the PDP's own size-option visual system. */
.atsi-set-form .atsi-mix-group .ecpdp-option-group__head{margin-bottom:8px!important}
.atsi-set-form .atsi-mix-group .ecpdp-size-options{margin-bottom:0!important}

@media (min-width:768px){
  .atsi-set-form .atsi-set-note{font-size:11px}
}

@media (max-width:767px){
  .atsi-set-form .atsi-set-tools{margin-top:6px}
  .atsi-set-form .atsi-mix-toggle{
    min-height:40px;
    padding:10px 0!important;
    font-size:10px!important;
  }
  .atsi-set-form .atsi-mix-toggle::before{bottom:7px}
  .atsi-set-form .atsi-mix-wrap{margin-top:8px}
  .atsi-set-form .atsi-mix-group+.atsi-mix-group{margin-top:10px}
  .atsi-set-form .atsi-try-mix{min-height:38px;padding:9px 0!important}
}

/* Native Set backorder notice, shown only for selected backorder components. */
.atsi-set-form .atsi-preorder-notice{margin:12px 0;padding:12px 0;border-top:1px solid rgba(0,0,0,.16);border-bottom:1px solid rgba(0,0,0,.16);background:transparent;color:inherit;font-family:inherit;font-size:11px;letter-spacing:.035em;line-height:1.5}
.atsi-set-form .atsi-preorder-notice[hidden]{display:none}
@media(max-width:767px){.atsi-set-form .atsi-preorder-notice{font-size:10px}}
