/* fix6181 — Newsletter labels + one baseline (after 6.14.18 / fix6180)
   Fixes dark labels and uneven First name / Email / Subscribe alignment
   on the "Be the First to Hear About New Instruments & Offers" block.
   White labels on plum; labels, inputs and Subscribe share one baseline
   on desktop; stacked full-width on phone. Form fields, action and
   BigCommerce subscribe wiring are unchanged.

   Load after assets/companions/fix6180.css from layout/base.html:
     <link rel="stylesheet" href="{{cdn 'assets/companions/fix6181.css'}}">
*/

/* Hidden subscribe fields must not occupy a grid cell */
html body.dtc-c .newsletter-section .form-fieldset > input[type=hidden]{
  display:none!important;
}

html body.dtc-c .newsletter-section .form-fieldset:not(#a){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
  align-items:end!important;
  justify-items:stretch!important;
  gap:16px!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
  box-sizing:border-box!important;
  float:none!important;
  flex-flow:unset!important;
}

html body.dtc-c .newsletter-section .form-field:not(#a){
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  float:none!important;
  position:static!important;
  top:auto!important;
  right:auto!important;
}

/* Theme .form-field::before/::after clearfix become flex items, so the
   6px gap also appears above the labels and below the inputs and Subscribe
   sits lower than the fields. Drop those pseudos so label + 6px + 48px
   input pack flush; fieldset align-items:end then gives the inputs and
   button one shared top edge and one shared bottom edge. */
html body.dtc-c .newsletter-section .form-field:not(#a)::before,
html body.dtc-c .newsletter-section .form-field:not(#a)::after{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

/* White labels, equal height, no wrap on desktop so First name and Email
   stay the same height. Overrides fix6160's dark #241A2B and the theme
   form-label-font-color (#666 / #333). */
html body.dtc-c .newsletter-section .c10-nl-label:not(#a),
html body.dtc-c .newsletter-section .form-label:not(#a){
  display:block!important;
  position:static!important;
  clip:auto!important;
  clip-path:none!important;
  width:auto!important;
  min-width:0!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  overflow:visible!important;
  margin:0!important;
  padding:0!important;
  font:500 16px/24px Jost,var(--f-body),sans-serif!important;
  color:#FFFFFF!important;
  text-align:left!important;
  text-transform:none!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  float:none!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Email is required; a <small>, asterisk or ::after on that label only
   would make it taller and drop the Email box below First name. The
   required attribute and accessible name stay on the input. */
html body.dtc-c .newsletter-section .form-label small:not(#a),
html body.dtc-c .newsletter-section .form-label .required:not(#a){
  display:none!important;
  float:none!important;
  content:none!important;
}
html body.dtc-c .newsletter-section .c10-nl-label::before:not(#a),
html body.dtc-c .newsletter-section .c10-nl-label::after:not(#a),
html body.dtc-c .newsletter-section .form-label::before:not(#a),
html body.dtc-c .newsletter-section .form-label::after:not(#a){
  display:none!important;
  content:none!important;
}

html body.dtc-c .newsletter-section .form-input:not(#a),
html body.dtc-c .newsletter-section input.form-input:not(#a){
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 14px!important;
  box-sizing:border-box!important;
  border:1.5px solid #C9B8A8!important;
  border-radius:8px!important;
  background:#FFFFFF!important;
  color:#1D1524!important;
  font:400 16px/1 Jost,var(--f-body),sans-serif!important;
  -webkit-text-fill-color:#1D1524!important;
  float:none!important;
  display:block!important;
  position:static!important;
}
html body.dtc-c .newsletter-section .form-input:not(#a)::placeholder,
html body.dtc-c .newsletter-section input.form-input:not(#a)::placeholder{
  color:#5E5763!important;
  opacity:1!important;
  -webkit-text-fill-color:#5E5763;
}

/* Focus is an outline plus offset, not a colour-only change (Jeff is colourblind). */
html body.dtc-c .newsletter-section .form-input:focus:not(#a),
html body.dtc-c .newsletter-section .form-input:focus-visible:not(#a){
  outline:2px solid #F6F1EA!important;
  outline-offset:2px!important;
  box-shadow:none!important;
  border-color:#1D1524!important;
}

/* Reset leftover theme / prefixPostfix margins that sit the button lower
   than the inputs. Gold fill, ink text, gold border — 7.3:1 contrast. */
html body.dtc-c .newsletter-section button[type=submit]:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a),
html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  width:auto!important;
  min-width:44px!important;
  max-width:none!important;
  margin:0!important;
  padding:0 28px!important;
  box-sizing:border-box!important;
  border:2px solid #A98A45!important;
  border-radius:8px!important;
  background:#C4A25A!important;
  color:#1D1524!important;
  -webkit-text-fill-color:#1D1524!important;
  font:600 16px/1 Jost,var(--f-body),sans-serif!important;
  letter-spacing:0!important;
  text-transform:none!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  align-self:end!important;
  position:static!important;
  top:auto!important;
  right:auto!important;
  float:none!important;
  order:0!important;
  cursor:pointer;
}
html body.dtc-c .newsletter-section button[type=submit]:hover:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:hover:not(#a){
  background:#B3914E!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}
html body.dtc-c .newsletter-section button[type=submit]:focus-visible:not(#a),
html body.dtc-c .newsletter-section .button[type=submit]:focus-visible:not(#a){
  outline:2px solid #F6F1EA!important;
  outline-offset:2px!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

/* Error: thicker ink border plus a text message — not colour alone. */
html body.dtc-c .newsletter-section .form-field--error .form-input:not(#a){
  border:2px solid #1D1524!important;
}
html body.dtc-c .newsletter-section .form-inlineMessage:not(#a){
  display:block!important;
  margin:4px 0 0!important;
  color:#F6F1EA!important;
  font:500 14px/1.3 Jost,var(--f-body),sans-serif!important;
}

@media (max-width:800px){
  html body.dtc-c .newsletter-section .form-fieldset:not(#a){
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  html body.dtc-c .newsletter-section .form-field:not(#a),
  html body.dtc-c .newsletter-section .form-input:not(#a),
  html body.dtc-c .newsletter-section button[type=submit]:not(#a),
  html body.dtc-c .newsletter-section .button[type=submit]:not(#a),
  html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a){
    width:100%!important;
    max-width:100%!important;
  }
  html body.dtc-c .newsletter-section .c10-nl-label:not(#a),
  html body.dtc-c .newsletter-section .form-label:not(#a){
    white-space:nowrap!important;
  }
}




/* ------------------------------------------------------------------
   6.14.27 — Structural two-row grid (labels row, controls row).
   ------------------------------------------------------------------ */

html body.dtc-c .newsletter-section .form-fieldset > input[type=hidden]{
  display:none!important;
  position:absolute!important;
  width:0!important;
  height:0!important;
}

html body.dtc-c .newsletter-section .c10-nl-label:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-label:not(#a):not(#b){
  display:block!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  line-height:24px!important;
  font-size:16px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
}

html body.dtc-c .newsletter-section .form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section input.form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .button[type=submit]:not(#a):not(#b),
html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a):not(#b){
  box-sizing:border-box!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  margin:0!important;
  border-width:2px!important;
  border-style:solid!important;
  border-radius:8px!important;
  align-self:stretch!important;
}

html body.dtc-c .newsletter-section .form-input:not(#a):not(#b),
html body.dtc-c .newsletter-section input.form-input:not(#a):not(#b){
  border-color:#C9B8A8!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  justify-self:stretch!important;
}

html body.dtc-c .newsletter-section #nl_first_name:not(#a):not(#b){
  padding-right:40px!important;
}

html body.dtc-c .newsletter-section input.form-input:-webkit-autofill,
html body.dtc-c .newsletter-section input.form-input:-webkit-autofill:hover,
html body.dtc-c .newsletter-section input.form-input:-webkit-autofill:focus{
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  box-sizing:border-box!important;
  border:2px solid #C9B8A8!important;
  -webkit-box-shadow:0 0 0 48px #FFFFFF inset!important;
  box-shadow:0 0 0 48px #FFFFFF inset!important;
  -webkit-text-fill-color:#1D1524!important;
  caret-color:#1D1524!important;
  transition:background-color 9999s ease-out 0s;
}
html body.dtc-c .newsletter-section input.form-input::-ms-reveal,
html body.dtc-c .newsletter-section input.form-input::-ms-clear,
html body.dtc-c .newsletter-section input.form-input::-webkit-contacts-auto-fill-button,
html body.dtc-c .newsletter-section input.form-input::-webkit-credentials-auto-fill-button{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Desktop and tablet: 2 rows x 3 columns. min-width keeps these
   placements from leaking into the phone stack. */
@media (min-width:801px){
  html body.dtc-c .newsletter-section .form-fieldset:not(#a):not(#b){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;
    grid-template-rows:24px 48px!important;
    column-gap:16px!important;
    row-gap:6px!important;
    gap:6px 16px!important;
    align-items:stretch!important;
    justify-items:stretch!important;
  }

  @supports (grid-template-rows: subgrid){
    html body.dtc-c .newsletter-section .form-field:not(#a):not(#b){
      display:grid!important;
      grid-template-rows:subgrid!important;
      grid-row:1 / span 2!important;
      margin:0!important;
      padding:0!important;
      /* Inherit the parent 6px row-gap. gap:0 packed the input 3px
         above the button (input centered in the leftover space). */
      row-gap:6px!important;
      column-gap:0!important;
      position:relative!important;
      /* Beat leftover fix10 width:auto!important which shrinks the
         1fr column item to the placeholder's intrinsic width. */
      width:100%!important;
      max-width:100%!important;
      min-width:0!important;
      justify-self:stretch!important;
      /* A row-only subgrid sizes its implicit column to the input's
         intrinsic width; force one full-width column so both inputs
         fill the 1fr tracks. */
      grid-template-columns:minmax(0,1fr)!important;
      justify-items:stretch!important;
    }
    html body.dtc-c .newsletter-section .form-field:nth-of-type(1):not(#a):not(#b){grid-column:1!important;}
    html body.dtc-c .newsletter-section .form-field:nth-of-type(2):not(#a):not(#b){grid-column:2!important;}
    html body.dtc-c .newsletter-section .form-field .form-label:not(#a):not(#b),
    html body.dtc-c .newsletter-section .form-field .c10-nl-label:not(#a):not(#b){grid-row:1!important;}
    html body.dtc-c .newsletter-section .form-field .form-input:not(#a):not(#b){grid-row:2!important;}
  }
  @supports not (grid-template-rows: subgrid){
    html body.dtc-c .newsletter-section .form-field:not(#a):not(#b){
      display:contents!important;
      margin:0!important;
      padding:0!important;
    }
    html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-label:not(#a):not(#b),
    html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .c10-nl-label:not(#a):not(#b){grid-column:1!important;grid-row:1!important;}
    html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-input:not(#a):not(#b){grid-column:1!important;grid-row:2!important;}
    html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-label:not(#a):not(#b),
    html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .c10-nl-label:not(#a):not(#b){grid-column:2!important;grid-row:1!important;}
    html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-input:not(#a):not(#b){grid-column:2!important;grid-row:2!important;}
  }

  html body.dtc-c .newsletter-section button[type=submit]:not(#a):not(#b),
  html body.dtc-c .newsletter-section .button[type=submit]:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-fieldset > *:last-child:not(#a):not(#b){
    grid-column:3!important;
    grid-row:2!important;
    width:auto!important;
    min-width:44px!important;
    max-width:none!important;
    border-color:#A98A45!important;
    justify-self:start!important;
  }
}

/* Phone: one column, fields stacked, full-width Subscribe. */
@media (max-width:800px){
  html body.dtc-c .newsletter-section .form-fieldset:not(#a):not(#b){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:none!important;
    row-gap:16px!important;
    column-gap:0!important;
    gap:16px!important;
  }
  html body.dtc-c .newsletter-section .form-field:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(1):not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(2):not(#a):not(#b){
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    grid-column:1 / -1!important;
    grid-row:auto!important;
  }
  html body.dtc-c .newsletter-section .form-field .form-label:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field .c10-nl-label:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field .form-input:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-label:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .c10-nl-label:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(1) .form-input:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-label:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .c10-nl-label:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-field:nth-of-type(2) .form-input:not(#a):not(#b){
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
  }
  html body.dtc-c .newsletter-section button[type=submit]:not(#a):not(#b),
  html body.dtc-c .newsletter-section .button[type=submit]:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-prefixPostfix-button--postfix:not(#a):not(#b),
  html body.dtc-c .newsletter-section .form-fieldset > *:last-child:not(#a):not(#b){
    grid-column:1 / -1!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    justify-self:stretch!important;
    border-color:#A98A45!important;
  }
}