/* custom-sizing.css: the product page's "Sizing: Standard size / Custom size" section
   (garments). Markup in shop/_custom_sizing.php, behaviour in custom-sizing.js.
   Loaded only on a product page that offers custom measurements, so style.css is
   not touched; it uses the theme's own colour variables, so it follows the shop's
   colour. */

.cs-heading{
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .55rem;
}

/* ---- Standard / Custom: two cards, one under the other on a narrow phone ---- */
.cs-choices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
@media (max-width:440px){ .cs-choices{grid-template-columns:1fr;} }

.cs-choice{
  position:relative;display:flex;align-items:flex-start;gap:.65rem;margin:0;
  padding:.75rem .85rem;background:#fff;cursor:pointer;
  border:1px solid rgba(31,27,46,.16);border-radius:.9rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cs-choice input{position:absolute;opacity:0;pointer-events:none;}
/* The radio dot, drawn here since the input itself is hidden. */
.cs-choice::before{
  content:"";flex:none;width:1.05rem;height:1.05rem;margin-top:.14rem;border-radius:50%;
  border:2px solid rgba(31,27,46,.3);background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.cs-choice:hover{border-color:var(--violet);}
.cs-choice.is-on{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet);}
.cs-choice.is-on::before{border-color:var(--violet);background:radial-gradient(circle,var(--violet) 0 42%,#fff 46%);}
.cs-choice:focus-within{outline:2px solid var(--violet);outline-offset:2px;}
.cs-choice-title{display:block;font-weight:700;font-size:.92rem;color:var(--ink);}
.cs-fee{margin-left:.25rem;font-weight:700;color:var(--violet);white-space:nowrap;}
.cs-choice-sub{display:block;margin-top:.1rem;font-size:.78rem;line-height:1.35;color:var(--muted);}

/* ---- the measurement form ---- */
.cs-panel{
  margin-top:.8rem;padding:1rem;background:#fff;
  border:1px solid rgba(31,27,46,.1);border-radius:1rem;
}
.cs-panel[hidden]{display:none;}
.cs-price{
  margin-bottom:.8rem;padding:.55rem .75rem;border-radius:.7rem;
  background:var(--mist);font-size:.88rem;color:var(--ink);
}
.cs-price:empty{display:none;}
.cs-price span{font-size:.78rem;color:var(--muted);}
.cs-intro{margin:0 0 .9rem;font-size:.85rem;color:var(--muted);}
.cs-size-note{
  display:flex;gap:.5rem;align-items:flex-start;margin:-.3rem 0 .9rem;
  font-size:.8rem;line-height:1.4;color:var(--muted);
}
.cs-size-note[hidden]{display:none;}
.cs-size-note .bi{flex:none;margin-top:.1rem;color:var(--violet);}

.cs-group{min-width:0;margin:0 0 1rem;padding:0;border:0;}
.cs-group legend{
  float:none;width:auto;margin:0 0 .55rem;padding:0;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);
}
.cs-label{display:block;margin:0 0 .25rem;font-size:.82rem;font-weight:600;color:var(--ink);}
.cs-req{margin-left:.1rem;color:#b3261e;}
.cs-opt{margin-left:.3rem;font-size:.72rem;font-weight:400;color:var(--muted);}
.cs-hint{margin-top:.2rem;font-size:.72rem;line-height:1.35;color:var(--muted);}
.cs-err{margin-top:.15rem;font-size:.78rem;line-height:1.35;color:#b3261e;}
.cs-err:empty{display:none;}
.cs-panel .input-group-text{font-size:.82rem;color:var(--muted);background:var(--mist);}
.cs-panel .form-control.is-invalid{border-color:#b3261e;background-image:none;}
.cs-panel .form-control:focus{border-color:var(--violet);box-shadow:0 0 0 .2rem rgba(31,27,46,.08);}

/* ---- neck style ---- */
.cs-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem;}
.cs-chip{position:relative;margin:0;}
.cs-chip input{position:absolute;opacity:0;pointer-events:none;}
.cs-chip span{
  display:inline-block;padding:.35rem .75rem;background:#fff;cursor:pointer;
  border:1px solid rgba(31,27,46,.2);border-radius:999px;
  font-size:.82rem;font-weight:600;color:var(--ink);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.cs-chip:hover span{border-color:var(--violet);}

/* A small picture of the style inside its chip, when the shop has a neckline picture: cut out of it
   as one sprite (three rows of four), shown at --cs-ico, set on the section; custom-sizing.js
   gives it the sprite's address the first time the form is shown. */
.cs-has-ico .cs-chip span{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .85rem .2rem .25rem;}
.cs-ico{
  flex:none;display:inline-block;width:var(--cs-ico,32px);height:var(--cs-ico,32px);border-radius:.55rem;
  background-color:#fbf5ea;background-image:var(--cs-sprite,none);background-repeat:no-repeat;
  background-size:calc(var(--cs-ico,32px) * var(--cs-cols,4)) calc(var(--cs-ico,32px) * var(--cs-rows,3));
  background-position:calc(var(--c,0) * var(--cs-ico,32px) * -1) calc(var(--r,0) * var(--cs-ico,32px) * -1);
}
.cs-ico-other{
  display:inline-flex;align-items:center;justify-content:center;background:var(--mist);color:var(--muted);
  font-size:.85rem;background-image:none;
}
.cs-chip input:checked + span .cs-ico{box-shadow:0 0 0 2px rgba(255,255,255,.92);}
.cs-chip input:checked + span{background:var(--violet);border-color:var(--violet);color:var(--on-violet,#fff);}
.cs-chip input:focus-visible + span{outline:2px solid var(--violet);outline-offset:2px;}
.cs-neck.has-error .cs-chips{padding:.4rem;border-radius:.8rem;outline:1px solid #b3261e;}
.cs-guide-img{display:block;max-width:100%;max-height:75vh;height:auto;margin:0 auto;border-radius:.6rem;}

.cs-notes textarea{resize:vertical;}
.cs-count{flex:none;margin-top:.15rem;font-size:.72rem;color:var(--muted);}

.cs-check{
  display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.9rem;padding:.7rem .85rem;
  background:#fff8e1;border:1px solid #e0c46c;border-radius:.8rem;
  font-size:.82rem;line-height:1.4;color:#5b4a00;
}
.cs-check .bi{flex:none;margin-top:.1rem;}

.cs-link{
  display:inline-flex;align-items:center;gap:.4rem;padding:0;border:0;background:none;cursor:pointer;
  font-size:.82rem;font-weight:600;color:var(--violet);
  text-decoration:underline;text-underline-offset:3px;
}
.cs-link:hover{color:var(--violet-dark);}
.cs-back{font-size:.85rem;}

@media (prefers-reduced-motion:reduce){
  .cs-choice,.cs-choice::before,.cs-chip span{transition:none;}
}