/* Join the club popup and the cookie notice (inc/newsletter.php, assets/js/newsletter.js).
   The popup follows the Shopify theme's sections/newsletter-popup.liquid and the owner's
   reference (big offer, light email field, full-width button, "No, thanks", confetti), in
   Hagoma's tones: warm black, cream and the red accent. The sign-up form and the code panel
   it shares with the footer are styled in footer.css; the rules here adapt them. Printed at
   the end of the page: both stay hidden until the deferred script shows them. */

/* Popup: a centred card; a bottom sheet on phones. */
.hg-pop {
  --hg-pop-bg: var(--hg-text);
  --hg-pop-ink: var(--hg-footer-heading);
  --hg-pop-muted: #cfc6b8;
  --hg-pop-alert: #ef6b70;
  width: min(440px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--hg-pop-bg);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
  color: var(--hg-pop-muted);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.hg-pop::backdrop {
  background: rgb(11 11 11 / 0.55);
}
.hg-pop[open] {
  animation: hg-pop-in 0.35s ease both;
}
.hg-pop[open]::backdrop {
  animation: hg-pop-fade 0.35s ease both;
}
@keyframes hg-pop-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
@keyframes hg-pop-fade {
  from {
    opacity: 0;
  }
}
/* The content fills the box, so a click that lands on the dialog itself is on the backdrop. */
.hg-pop__inner {
  position: relative;
  isolation: isolate;
  padding: 44px 32px 26px;
  text-align: center;
}
.hg-pop :focus-visible {
  outline-color: var(--hg-pop-ink);
}

/* Confetti: small triangles scattered behind the text. */
.hg-pop__confetti {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hg-pop__bit--red {
  fill: var(--hg-header-hover);
}
.hg-pop__bit--cream {
  fill: #eae0d2;
}
.hg-pop__bit--muted {
  fill: var(--hg-footer-text);
  opacity: 0.7;
}

.hg-pop__close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--hg-pop-ink);
  cursor: pointer;
}
.hg-pop__close:hover {
  background: rgb(242 237 228 / 0.1);
  color: var(--hg-pop-ink);
}
.hg-pop__close .hg-icon {
  width: 20px;
  height: 20px;
}

.hg-pop__eyebrow {
  margin: 0;
  color: var(--hg-pop-alert);
  font-family: var(--hg-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hg-pop__title {
  margin: 10px 0 0;
  color: var(--hg-pop-ink);
  font-family: var(--hg-font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hg-pop__big {
  display: block;
  font-size: 76px;
  line-height: 0.95;
}
.hg-pop__sub {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.1;
}
.hg-pop__text {
  max-width: 34ch;
  margin: 14px auto 0;
  font-size: 14px;
  line-height: 1.5;
}
.hg-pop__text[hidden] {
  display: none;
}

/* The shared form, stacked: a light field over a full-width accent button. */
.hg-pop .hg-club-form__row {
  flex-direction: column;
  gap: 10px;
}
.hg-pop .hg-club-form .hg-club-form__input {
  flex: none;
  min-height: 50px;
  border-color: #fff;
  border-radius: 4px;
  background: #fff;
  color: var(--hg-text);
  font-size: 16px;
  text-align: center;
}
.hg-pop .hg-club-form .hg-club-form__input::placeholder {
  color: var(--hg-muted);
}
.hg-pop .hg-club-form .hg-club-form__input[aria-invalid="true"] {
  border-color: var(--hg-pop-alert);
  box-shadow: 0 0 0 1px var(--hg-pop-alert);
}
.hg-pop .hg-club-form__submit {
  flex: none;
  width: 100%;
  min-height: 52px;
  border-color: var(--hg-accent);
  background: var(--hg-accent);
  color: #fff;
  font-size: 15px;
}
.hg-pop .hg-club-form__submit:hover {
  border-color: #8f191e;
  background: #8f191e;
  color: #fff;
}
.hg-pop .hg-club-form__msg {
  color: var(--hg-pop-alert);
}
.hg-pop .hg-club-code {
  border-color: rgb(242 237 228 / 0.35);
}
.hg-pop .hg-club-code__row {
  justify-content: center;
}
.hg-pop .hg-club-code__lead {
  color: var(--hg-pop-ink);
}
.hg-pop .hg-club-code__value {
  background: #0b0b0b;
}

.hg-pop__decline {
  min-height: 0;
  margin: 14px 0 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--hg-pop-muted);
  font-family: var(--hg-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hg-pop__decline:hover {
  background: none;
  color: var(--hg-pop-ink);
}
.hg-pop__decline[hidden] {
  display: none;
}

/* Phones: a bottom sheet that leaves most of the page in view. */
@media (max-width: 599px) {
  .hg-pop {
    width: 100%;
    max-height: 85svh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }
  .hg-pop[open] {
    animation-name: hg-pop-up;
  }
  .hg-pop__inner {
    padding: 34px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .hg-pop__big {
    font-size: 52px;
  }
  .hg-pop__sub {
    font-size: 18px;
  }
  .hg-pop__text {
    margin-top: 10px;
  }
  .hg-pop .hg-club-form {
    margin-top: 16px;
  }
  .hg-pop__decline {
    margin-top: 8px;
  }
}
@keyframes hg-pop-up {
  from {
    transform: translateY(100%);
  }
}

/* Cookie notice: a small card in the bottom-start corner, above the mobile dock on phones. */
.hg-cookie {
  position: fixed;
  inset-inline-start: 20px;
  bottom: 20px;
  z-index: 45;
  width: min(400px, calc(100% - 40px));
  padding: 16px 18px;
  border: 1px solid var(--hg-line);
  border-radius: var(--hg-radius);
  background: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
  color: var(--hg-text);
  font-size: 13px;
  line-height: 1.5;
  animation: hg-pop-fade 0.3s ease both;
}
.hg-cookie[hidden] {
  display: none;
}
.hg-cookie__text {
  margin: 0;
  overflow-wrap: anywhere;
}
.hg-cookie__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hg-cookie__link:hover {
  color: var(--hg-accent-text);
}
.hg-cookie__accept {
  min-height: 40px;
  margin: 12px 0 0;
  padding: 8px 20px;
  border: 1px solid var(--hg-text);
  border-radius: 4px;
  background: var(--hg-text);
  box-shadow: none;
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.hg-cookie__accept:hover {
  border-color: var(--hg-accent);
  background: var(--hg-accent);
  color: #fff;
}
@media (max-width: 767px) {
  .hg-cookie {
    display: flex;
    align-items: center;
    gap: 12px;
    inset-inline-start: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 12px 14px;
  }
  .hg-cookie__accept {
    flex: none;
    margin: 0;
    padding-inline: 16px;
  }
  .ecomus-navigation-bar-show .hg-cookie {
    bottom: calc(67px + env(safe-area-inset-bottom) + 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-pop[open],
  .hg-pop[open]::backdrop,
  .hg-cookie {
    animation: none;
  }
  .hg-cookie__accept {
    transition: none;
  }
}