/* Newsletter sign-up box, pop-up and confirmation page (public/js/newsletter.js). Used by the shop, the main
   website and the PuffiNova page, so it brings its own look; --nl-accent can be set by each site. */
.nl-box, .nl-pop { --nl-accent: #c2571a; --nl-accent-2: #e07a2f; --nl-ink: #2b241d; --nl-soft: #6b5f52; }
.nl-box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 20px 22px; border-radius: 18px; background: #fff7ec; color: var(--nl-ink); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .5); text-align: left; }
.nl-box__txt { flex: 1 1 260px; }
.nl-box__title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.nl-box__text { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--nl-soft); }
.nl-box .nl-form, .nl-box .nl-done { flex: 1 1 300px; }
.nl-form { margin: 0; }
.nl-form__row { display: flex; gap: 8px; }
.nl-form input[type=email] { flex: 1; min-width: 0; padding: 12px 14px; border: 1.5px solid #d9cbb6; border-radius: 999px; background: #fff; color: var(--nl-ink); font: inherit; font-size: 16px; }
.nl-form input[type=email]:focus { outline: none; border-color: var(--nl-accent); box-shadow: 0 0 0 3px rgba(194, 87, 26, .18); }
.nl-form__btn { flex: none; padding: 12px 22px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--nl-accent), var(--nl-accent-2)); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.nl-form__btn:hover { filter: brightness(1.08); }
.nl-form__btn:disabled { opacity: .6; cursor: wait; }
.nl-form__msg { min-height: 0; margin: 6px 4px 0; font-size: .88rem; font-weight: 700; color: #b3261e; }
.nl-form__msg:empty { display: none; }
.nl-form__small { margin: 8px 4px 0; font-size: .78rem; line-height: 1.4; color: var(--nl-soft); }
.nl-form__small a { text-decoration: none; }
.nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.nl-done { text-align: center; padding: 6px 0; animation: nl-in .5s ease; }
.nl-done__icon { margin: 0; font-size: 2rem; }
.nl-done__title { margin: 4px 0; font-weight: 700; font-size: 1.1rem; }
.nl-done__text { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--nl-soft); }
@keyframes nl-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* pop-up */
.nl-pop { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.nl-pop.is-in { opacity: 1; pointer-events: auto; }
.nl-pop__back { position: absolute; inset: 0; background: rgba(30, 20, 10, .38); }
.nl-pop__card { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px 24px 18px; border-radius: 24px; text-align: center; color: var(--nl-ink);
  background: radial-gradient(ellipse 80% 60% at 100% 0%, #ffe3c7, transparent 70%), radial-gradient(ellipse 70% 60% at 0% 100%, #e5f2df, transparent 70%), #fffaf3;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .55); transform: translateY(18px) scale(.97); transition: transform .45s cubic-bezier(.2, .9, .2, 1.1); }
.nl-pop.is-in .nl-pop__card { transform: none; }
.nl-pop__x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--nl-soft); font-size: 26px; line-height: 1; cursor: pointer; }
.nl-pop__x:hover { background: rgba(0, 0, 0, .06); }
.nl-pop__icon { margin: 0; font-size: 2.4rem; animation: nl-float 3s ease-in-out infinite; }
@keyframes nl-float { 50% { transform: translateY(-5px) rotate(-6deg); } }
.nl-pop__eyebrow { margin: 4px 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nl-accent); }
.nl-pop__title { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.2; color: var(--nl-ink); }
.nl-pop__text { margin: 0 0 16px; font-size: .98rem; line-height: 1.5; color: var(--nl-soft); }
.nl-pop .nl-form { text-align: left; }
.nl-pop__later { margin-top: 10px; border: 0; background: none; color: var(--nl-soft); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
@media (max-width: 480px) { .nl-form__row { flex-direction: column; } .nl-form__btn { width: 100%; } .nl-pop__title { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .nl-pop, .nl-pop__card, .nl-pop__icon, .nl-done { transition: none; animation: none; } }

/* confirmation page (shop) */
.nl-confirm { max-width: 560px; margin: 40px auto 60px; padding: 34px 26px; border-radius: 24px; text-align: center; background: radial-gradient(ellipse 80% 60% at 100% 0%, #ffe3c7, transparent 70%), #fffaf3; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); }
.nl-confirm__spark { margin: 0; font-size: 2.6rem; }
.nl-confirm h1 { margin: 6px 0 10px; }
.nl-code { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 18px 0 6px; }
.nl-code__value { padding: 12px 20px; border: 2px dashed #c2571a; border-radius: 14px; background: #fff; color: #c2571a; font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; user-select: all; }
.nl-confirm__how { color: #6b5f52; font-size: .95rem; }

/* tick box at checkout */
.checkout-newsletter { margin: 10px 0; }
/* shop footer */
.footer-newsletter { margin: 0 0 .8rem; }
.footer-freepages { margin: 0 0 1.6rem; font-size: .92rem; }
.footer-freepages a { color: inherit; opacity: .9; }