/* Size guide. Shared by the drawer (product page + Quick View) and the
   size guide page, so these rules cannot live in one page's inline <style>. */

/* ===== Chart + measure blocks — used in BOTH placements =================== */
.sg__note{font-family:var(--font-sans);font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 18px}
.sg__tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sg__table{border-collapse:collapse;width:100%;font-family:var(--font-sans)}
.sg__caption{text-align:left;font-size:12px;color:var(--muted);padding-bottom:10px}
.sg__table th,.sg__table td{font-size:13px;padding:12px 16px;border-bottom:1px solid var(--rule);
  text-align:left;white-space:nowrap}
.sg__table td{color:var(--muted)}
.sg__table thead th{background:var(--ink);color:var(--paper);border-bottom-color:var(--ink);
  font-size:12px;font-weight:600;letter-spacing:.04em}
/* Alternate fill = blush at 40% over white. Flattened, so the sticky column
   can carry the identical value without translucency stacking. */
.sg__table tbody tr:nth-child(even),
.sg__table tbody tr:nth-child(even) .sg__rowlabel{background:#FDF8F7}
/* Sticky first column — without it the labels scroll away and the numbers
   mean nothing. Units are part of the label, so the label must stay pinned. */
.sg__rowlabel{position:sticky;left:0;background:var(--paper);border-right:1px solid var(--rule);
  z-index:1;font-size:12px;font-weight:600;color:var(--ink)}
.sg__table thead .sg__rowlabel{background:var(--ink);color:var(--paper);border-right-color:var(--ink)}

.sg__measure-row{border-top:1px solid var(--bronze);padding:18px 0}
.sg__measure-t{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--ink);margin:0}
.sg__measure-d{font-family:var(--font-sans);font-size:13.5px;line-height:1.6;color:var(--muted);
  margin:6px 0 0;max-width:56ch}

/* ===== The size guide page =============================================== */
.sgp{background:var(--blush);padding:1px 0}   /* 1px keeps the card's margin inside the ground */
.sgp__card{position:relative;max-width:860px;margin:56px auto 96px;padding:72px 80px;
  background:var(--paper);border-radius:0}
.sgp__card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--bronze)}
.sgp__head{text-align:center}
.sgp__back{display:block;width:max-content;margin:0 auto 40px;font-family:var(--font-sans);font-size:11px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color .2s ease}
.sgp__back:hover{color:var(--ink)}
.sgp__eyebrow{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze);margin:0}
.sgp__h1{font-family:var(--font-display);font-size:clamp(40px,4.4vw,54px);font-weight:500;
  line-height:var(--leading-display);color:var(--ink);margin:14px 0 0}
.sgp__intro{font-family:var(--font-display);font-style:italic;font-size:16px;line-height:1.6;
  color:var(--muted);margin:18px auto 0;max-width:46ch}
.sgp__sec{margin-top:56px}
.sgp__sec h2{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.2;
  color:var(--ink);margin:0 0 20px}
.sgp__fit p{font-family:var(--font-sans);font-size:15px;line-height:1.7;color:var(--ink);
  margin:0 0 16px;max-width:62ch}
.sgp__fit p:last-of-type{margin-bottom:0}
.sgp__sign{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--bronze);
  margin:28px 0 0}

@media(max-width:768px){
  .sgp__card{margin:28px 16px 56px;padding:44px 24px}
  .sgp__h1{font-size:34px}
  .sgp__intro{font-size:17px}
}

/* ===== The drawer ======================================================== */
/* Above Quick View (.qvm is z-index 1000), or it opens behind the modal. */
.sg__scrim{position:fixed;inset:0;z-index:1090;background:rgba(20,28,30,.45);opacity:0;
  transition:opacity .3s ease}
.sg__scrim.is-open{opacity:1}
.sg__scrim[hidden]{display:none}

.sg{position:fixed;top:0;right:0;bottom:0;z-index:1100;width:100%;max-width:560px;
  background:var(--paper);border-radius:0;box-shadow:0 24px 60px -20px rgba(0,0,0,.25);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);transition:transform .42s cubic-bezier(.22,1,.36,1)}
.sg.is-open{transform:none}
.sg[hidden]{display:none}

.sg__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:28px 28px 0}
.sg__head h2{font-family:var(--font-serif);font-size:26px;font-weight:600;line-height:1.15;color:var(--ink);margin:0}
.sg__x{width:34px;height:34px;display:grid;place-items:center;padding:0;line-height:0;
  background:none;border:0;cursor:pointer;color:var(--ink);opacity:.5;transition:opacity .2s ease}
.sg__x:hover{opacity:1}
.sg__x svg{display:block;width:16px;height:16px}

.sg__body{flex:1 1 auto;overflow-y:auto;padding:24px 28px 40px}
.sg__h3{font-family:var(--font-serif);font-size:20px;font-weight:600;color:var(--ink);margin:36px 0 4px}

/* Loyalty capture — the hero card and first-visit popup wear the same face.
   Keep these three in step; they are the same offer in three placements. */
.sg__capture{margin:32px 0 0;padding-top:26px;border-top:1px solid var(--rule)}
.sg__capture-h{font-family:var(--font-sans);font-size:17px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);margin:0}
.sg__amt{color:var(--bronze)}
.sg__form{display:block;margin-top:20px}
/* Underline only: no box, no background, no side or top borders. */
.sg__form input{display:block;width:100%;height:44px;padding:0;font-family:var(--font-sans);font-size:14px;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  transition:border-bottom-color .2s ease}
.sg__form input::placeholder{color:var(--muted)}
.sg__form input:focus{outline:none;box-shadow:none;border-bottom-color:var(--ink)}
.sg__form input[aria-invalid="true"]{border-bottom-color:#A8342A}
.sg__form button{position:relative;overflow:hidden;display:block;width:100%;height:48px;margin-top:22px;
  padding:0;border:0;border-radius:0;cursor:pointer;background:var(--ink);color:var(--paper);
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase}
/* Fill wipes in from the left; the label rides above it. */
.sg__form button::before{content:"";position:absolute;inset:0;background:var(--bronze-dk);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.sg__form button:hover::before{transform:scaleX(1)}
.sg__form button span{position:relative;z-index:1}
.sg__form button[disabled]{opacity:.6;cursor:not-allowed}
.sg__form button[disabled]::before{transform:scaleX(0)}
.sg__err{font-family:var(--font-sans);font-size:11.5px;color:#A8342A;margin:10px 0 0}
.sg__err:empty{display:none}

.sg button:focus-visible,.sg a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Full-screen sheet under 768 — rises instead of sliding in. */
@media(max-width:768px){
  .sg{max-width:none;transform:translateY(100%);
    transition:transform .42s cubic-bezier(.22,1,.36,1)}
  .sg.is-open{transform:none}
  .sg__head{padding-left:22px;padding-right:22px}
  .sg__body{padding:24px 22px 40px}
}
@media (prefers-reduced-motion: reduce){
  .sg,.sg__scrim{transition:opacity .2s ease}
  .sg{transform:none}
  .sg__form button::before{transition:none}
}

/* Cup letters: a line under the conversion table, because cup is Option2 in
   Shopify and does not vary with the AUS size — it is not a column. */
.sg__cups{margin:14px 0 0;font-family:var(--font-sans);font-size:13px;color:var(--text-muted)}
.sg__cups .sg__rowlabel{margin-right:10px;color:var(--text-strong)}

/* One supporting line under the drawer's capture heading — same sentence the
   popup uses. The detail lives on /loyalty, not here. */
.sg__capture-p{margin:6px 0 0;font-family:var(--font-sans);font-size:14px;
  line-height:1.55;color:var(--text-muted)}