/* Yourself Apparel - popup newsletter (estética do site: preto, branco, futura-pt) */
.yw[hidden] { display: none !important; }
.yw {
  --yw-ink: #161615;
  --yw-grey: #5c5c5c;
  --yw-soft: #8a8580;
  --yw-line: #dcdad6;
  --yw-bg: #ffffff;
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: "futura-pt", "Futura", "Century Gothic", Arial, sans-serif;
  color: var(--yw-ink);
}
.yw__overlay { position: absolute; inset: 0; background: rgba(22, 22, 21, .55); opacity: 0; transition: opacity .3s ease; }
.yw__dialog {
  position: relative; display: grid; grid-template-columns: 42% 1fr;
  width: 100%; max-width: 760px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--yw-bg); box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease;
}
.yw.is-open .yw__overlay { opacity: 1; }
.yw.is-open .yw__dialog { opacity: 1; transform: none; }
.yw__media { background: #f3f3f3 center 25% / cover no-repeat; min-height: 440px; }
.yw__body { padding: 44px 40px 32px; display: flex; flex-direction: column; justify-content: center; }
.yw__step[hidden] { display: none; }
.yw__close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
  font-size: 30px; line-height: 40px; color: var(--yw-ink);
}
.yw__eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--yw-soft); }
.yw__title { margin: 0 0 12px; font-size: 30px; line-height: 1.12; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--yw-ink); }
.yw__text { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--yw-grey); }
.yw__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.yw__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--yw-soft); margin: 0; }
.yw__input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--yw-ink); border-radius: 0;
  font: inherit; font-size: 16px; color: var(--yw-ink); background: #fff; box-shadow: none;
}
.yw__input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--yw-ink); }
.yw__body, .yw__label, .yw__check, .yw__check span, .yw__text, .yw__small, .yw__error { text-align: left !important; }
.yw__label { display: block; width: auto; float: none; padding: 0; }
.yw__check span { flex: 1 1 auto; }
.yw__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--yw-grey); cursor: pointer; margin: 2px 0 0; }
.yw__check input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--yw-ink); }
.yw__check a { color: var(--yw-ink); text-decoration: underline; }
.yw__error { margin: 0; font-size: 13px; line-height: 1.4; color: #b3402f; }
.yw__error[hidden] { display: none; }
.yw__submit {
  height: 50px; border: 0; border-radius: 0; background: var(--yw-ink); color: #fff; cursor: pointer;
  font: inherit; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; transition: opacity .2s;
}
.yw__submit:hover { opacity: .85; }
.yw__submit[disabled] { opacity: .5; cursor: wait; }
.yw__submit:focus-visible, .yw__dismiss:focus-visible, .yw__close:focus-visible { outline: 2px solid var(--yw-ink); outline-offset: 2px; }
.yw__dismiss { border: 0; background: none; padding: 4px; font: inherit; font-size: 13px; color: var(--yw-soft); text-decoration: underline; cursor: pointer; align-self: center; }
.yw__small { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--yw-line); font-size: 12px; line-height: 1.45; color: var(--yw-soft); }
.yw__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
body.yw-lock { overflow: hidden; }

@media (max-width: 640px) {
  .yw { align-items: flex-end; padding: 0; }
  .yw__dialog { grid-template-columns: 1fr; max-height: 92vh; }
  .yw__media { min-height: 150px; height: 150px; background-position: center 30%; }
  .yw__body { padding: 26px 20px 22px; }
  .yw__title { font-size: 25px; }
  .yw__text { font-size: 14px; margin-bottom: 16px; }
  .yw__close { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
}
@media (prefers-reduced-motion: reduce) {
  .yw__overlay, .yw__dialog { transition: none; }
}
