/* Hagoma footer, converted from the Shopify theme's sections/footer.liquid and its
   footer rules in assets/theme.css and assets/chrome.css: the brand column (logo, about line
   and contact details; owner, 2026-10-19), the Shop menu in two columns, Information and Join
   the club (the Shopify newsletter block), then a bottom bar with the copyright line, the
   policy links and the payment icons. The popup and the cookie notice are styled in
   newsletter.css. */

#site-footer.site-footer {
  border: 0;
  background: var(--hg-footer-bg);
  color: var(--hg-footer-text);
}

.hg-footer {
  padding-top: 50px;
  font-size: 14px;
  line-height: 22.4px;
}

.hg-footer__grid {
  display: grid;
  gap: 28px 20px;
  width: min(1680px, calc(100% - 32px));
  margin-inline: auto;
}
.hg-footer__block {
  min-width: 0;
}

.hg-footer__title {
  margin: 0;
  padding-bottom: 20px;
  color: var(--hg-footer-heading);
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
}
/* The heading is a button only while the columns collapse (small screens). */
.hg-footer .hg-footer__acc {
  display: none;
}
/* No Ecomus button shine sweeping across the heading when it is tapped. */
.hg-footer .hg-footer__acc::after {
  display: none;
}

/* Brand column: the logo (130px, the width of its smallest file, so it stays sharp), the about
   line, then the address, email and phone, each after a small icon. */
.hg-footer .hg-logo {
  justify-content: flex-start;
  width: fit-content;
  margin-bottom: 16px;
}
.hg-footer .hg-logo__img {
  width: 130px;
  height: auto;
}
.hg-footer__about {
  max-width: 38ch;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.hg-footer__contact {
  margin: 0;
  font-style: normal;
}
.hg-footer__contact-list,
.hg-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hg-footer__contact-list {
  display: grid;
  gap: 10px;
}
.hg-footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Two even lines rather than a lone "States" or "19806, United States" under a long one. */
.hg-footer__contact-list li > span {
  text-wrap: balance;
}
.hg-footer__contact .hg-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--hg-footer-heading);
}
.hg-footer a {
  color: inherit;
  overflow-wrap: anywhere;
}
.hg-footer a:hover {
  color: var(--hg-footer-hover);
}
/* Ecomus's a:focus { outline: 0 } outranks the :where() focus ring in base.css, so footer
   links restate it: 2px in the link colour, 7.4:1 on the black footer. */
.hg-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.hg-footer__links a {
  display: block;
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
}
.hg-footer__links .current-menu-item > a {
  color: var(--hg-footer-hover);
}

/* Shop links fill two columns, down then across, so the column is half as tall. The template
   sets --hg-footer-rows to half the links, rounded up. Each column is as wide as its longest
   link, and a long link wraps when the panel is narrower than both. On the narrowest phones
   the list stays in one column. */
@media (min-width: 340px) {
  .hg-footer__block--shop .hg-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    grid-template-rows: repeat(var(--hg-footer-rows, 4), auto);
    grid-auto-flow: column;
    column-gap: 20px;
  }
}

/* Menu links slide toward the reading end on hover while a short rule draws in behind them. */
@media (min-width: 990px) and (hover: hover) {
  .hg-footer__links a {
    position: relative;
    width: fit-content;
    max-width: 100%;
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .hg-footer__links a::before {
    content: "";
    position: absolute;
    inset-inline-start: -15px;
    top: 50%;
    width: 10px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  .hg-footer__links a:hover {
    transform: translateX(15px);
  }
  .hg-footer__links a:hover::before {
    transform: scaleX(1);
  }
  [dir="rtl"] .hg-footer__links a::before {
    transform-origin: right;
  }
  [dir="rtl"] .hg-footer__links a:hover {
    transform: translateX(-15px);
  }
}

/* Join the club, the last column: heading and a one-line intro, a pill email field that
   fills the column with the outlined button beside it, then a row of round social icons. */
.hg-club__text {
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* The sign-up form, shared with the popup (inc/newsletter.php hg_club_form()). The field
   takes nearly all the free space in the row; when the column is too narrow for both, the
   button wraps under it at full width. Two classes outrank Ecomus's input[type] rules. */
.hg-club-form {
  margin-top: 20px;
}
.hg-club-form[hidden] {
  display: none;
}
.hg-club-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hg-club-form .hg-club-form__input {
  flex: 999 1 200px;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid #6f6e6e;
  border-radius: 40px;
  background: #181818;
  color: var(--hg-footer-heading);
  font-family: var(--hg-font-body);
  font-size: 14px;
  line-height: normal;
  transition: border-color 0.3s ease;
}
.hg-club-form .hg-club-form__input:focus {
  border-color: var(--hg-footer-heading);
}
.hg-club-form .hg-club-form__input:focus-visible {
  outline: 2px solid var(--hg-footer-heading);
  outline-offset: 2px;
}
/* In the footer column the field may shrink to 150px before the button wraps under it, so the
   form keeps one row at 1280px, where the club column shares the width with the brand column. */
.hg-footer .hg-club-form__input {
  flex-basis: 150px;
}
.hg-club-form .hg-club-form__input::placeholder {
  color: var(--hg-footer-text);
  opacity: 1;
}
.hg-club-form .hg-club-form__input[aria-invalid="true"] {
  border-color: #ef6b70;
}
.hg-club-form__submit {
  flex: 1 0 auto;
  min-height: 50px;
  margin: 0;
  padding: 10px 24px;
  border: 1px solid #6f6e6e;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.hg-club-form__submit:hover {
  border-color: #fff;
  background: #fff;
  color: #000;
}
.hg-club-form__submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}
/* Errors: the accent lightened to keep 5.9:1 on the black footer and the popup. */
.hg-club-form__msg {
  margin: 8px 0 0;
  color: #ef6b70;
  font-size: 13px;
  line-height: 1.5;
}
.hg-club-form__msg:empty {
  margin: 0;
}
/* Honeypot: present for bots, out of sight and out of the tab order for people. */
.hg-club-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* After signing up: the code, a Copy button and where to use it. */
.hg-club-code {
  margin-top: 20px;
  padding: 18px 16px;
  border: 1px dashed #6f6e6e;
  border-radius: var(--hg-radius);
}
.hg-club-code[hidden] {
  display: none;
}
.hg-club-code:focus {
  outline: none;
}
.hg-club-code:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.hg-club-code__lead {
  margin: 0 0 12px;
  color: var(--hg-footer-heading);
}
.hg-club-code__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hg-club-code__value {
  padding: 10px 16px;
  border-radius: 4px;
  background: #181818;
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  user-select: all;
}
.hg-club-code__copy {
  min-height: 40px;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid #6f6e6e;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.hg-club-code__copy:hover {
  border-color: #fff;
  background: #fff;
  color: #000;
}
.hg-club-code__copy[hidden] {
  display: none;
}
.hg-club-code__note {
  margin: 12px 0 0;
  font-size: 13px;
}

/* Social icons: decorative rings, no links (the owner's choice), so no hover state. */
.hg-club__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.hg-club__social-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(242 237 228 / 0.35);
  border-radius: 50%;
  color: var(--hg-footer-heading);
}
.hg-club__social-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* A plugin form set in Customizer > Hagoma theme > Newsletter form shortcode takes the
   theme form's place in the club column. */
.hg-club .hg-footer__form {
  margin-top: 20px;
}

/* Newsletter form (Mailchimp for WP markup or any shortcode form). */
.hg-footer__form form p {
  margin: 0;
}
.hg-footer__form .mc4wp-form-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 5px;
}
.hg-footer__form input[type="email"],
.hg-footer__form input[type="text"] {
  flex: 1 1 160px;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 40px;
  background: #181818;
  color: var(--hg-footer-text);
  font-family: var(--hg-font-body);
  font-size: 14px;
}
.hg-footer__form input::placeholder {
  color: inherit;
  opacity: 1;
}
.hg-footer__form input[type="submit"],
.hg-footer__form button {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid #6f6e6e;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.hg-footer__form input[type="submit"]:hover,
.hg-footer__form button:hover {
  border-color: #fff;
  background: #fff;
  color: #000;
}
.hg-footer__form .mc4wp-response {
  flex-basis: 100%;
  margin-top: 8px;
}

/* Bottom bar: full-width divider, then the copyright line, the policy links and the payment
   icons. Phones stack them centred with the icons on top; wider screens put them in one row
   (see the 750px query below). */
.hg-footer__bottom {
  margin-top: 50px;
  padding-block: 15px;
  border-top: 1px solid var(--hg-footer-line);
}
.hg-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1680px, calc(100% - 32px));
  margin-inline: auto;
  font-size: 14px;
  text-align: center;
}
.hg-footer__legal {
  min-width: 0;
}
.hg-footer__copyright {
  margin: 10px 0 0;
  line-height: 1.6;
}
.hg-footer__copyright small {
  font-size: 0.95em;
}
/* Centred lines of links set apart by space alone: a dot between them would start a line
   whenever they wrap. */
.hg-footer__policies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.hg-footer__policies a {
  display: inline-block;
  line-height: 1.6;
}
.hg-footer__pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  order: -1;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 4px apart at the sides, not the Shopify footer's 5px, so all eight icons fit one row of
   the 1280px layout. */
.hg-footer__pay li {
  padding: 5px 4px;
  line-height: 0;
}
/* The marks are drawn left to right; on right-to-left pages their text would anchor at x from
   the other end and slide off the card. */
.hg-footer__pay-icon {
  display: block;
  width: 28px;
  height: 24px;
  direction: ltr;
}

/* Back to top: a round button in the corner, shown once the page is scrolled (assets/js/header.js). */
.hg-to-top {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 50px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hg-text) 10%, var(--hg-bg));
  box-shadow: none;
  color: var(--hg-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0.3s;
}
.hg-to-top:hover {
  background: color-mix(in srgb, var(--hg-text) 10%, var(--hg-bg));
  color: var(--hg-text);
}
.hg-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: none;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s;
}
.hg-to-top[hidden] {
  display: none;
}
/* A third of the button, as in the Shopify theme (32%), set in pixels: a percentage width would
   resolve against the grid track the icon itself sizes. */
.hg-to-top__icon {
  width: 19.2px;
  height: 19.2px;
}

@media (max-width: 749px) {
  .hg-footer {
    padding-top: 25px;
  }
  .hg-footer__grid,
  .hg-footer__base {
    width: calc(100% - 40px);
  }
  .hg-club-form .hg-club-form__input {
    min-height: 44px;
    font-size: 16px;
  }
  .hg-club-form__submit {
    min-width: 126px;
    min-height: 44px;
    padding: 8px 15px;
  }
  .hg-footer__grid {
    row-gap: 25px;
  }
  .hg-footer__title {
    padding-bottom: 12px;
    font-size: 16px;
  }
  .hg-footer__form input[type="email"],
  .hg-footer__form input[type="text"] {
    min-height: 44px;
    font-size: 16px;
  }
  .hg-footer__form input[type="submit"],
  .hg-footer__form button {
    min-width: 126px;
    min-height: 44px;
    padding: 8px 15px;
  }
  .hg-footer__bottom {
    margin-top: 45px;
  }
  .hg-to-top {
    width: 40px;
    height: 40px;
  }
  .hg-to-top__icon {
    width: 12.8px;
    height: 12.8px;
  }

  /* Link columns collapse into accordions with a drawn plus that turns into a cross when open. */
  .hg-footer .hg-footer__acc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: start;
    text-transform: inherit;
    cursor: pointer;
  }
  .hg-footer__acc span {
    position: relative;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    transition: transform 0.3s ease;
  }
  .hg-footer__acc span::before,
  .hg-footer__acc span::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 13px;
    height: 1px;
    background: currentColor;
  }
  .hg-footer__acc span::after {
    transform: rotate(90deg);
  }
  .hg-footer__block.is-open .hg-footer__acc span {
    transform: rotate(45deg);
  }
  .hg-footer__acc-title {
    display: none;
  }
  .hg-footer__block--menu .hg-footer__panel {
    display: none;
    padding-top: 10px;
  }
  .hg-footer__block--menu.is-open .hg-footer__panel {
    display: block;
  }
}

/* The mobile dock covers the bottom of the screen up to 767px. While the cookie notice sits
   above the dock, newsletter.js sets --hg-cookie-offset to its height so the button clears it. */
@media (max-width: 767px) {
  .hg-to-top {
    bottom: calc(67px + env(safe-area-inset-bottom) + 50px + var(--hg-cookie-offset, 0px));
  }
}

/* Wider screens: one row, the copyright line and the policy links at the start and the
   payment icons at the end. Where the row runs out of room (below about 1330px with the brand
   column) the policy links move under the copyright line and the icons stay at the end. */
@media (min-width: 750px) {
  .hg-footer__base {
    flex-direction: row;
    justify-content: space-between;
    column-gap: 32px;
    text-align: start;
  }
  .hg-footer__legal {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 32px;
  }
  .hg-footer__pay {
    flex: none;
    justify-content: flex-end;
    order: 0;
  }
  .hg-footer__pay-icon {
    width: 38px;
  }
  .hg-footer__copyright {
    margin: 0;
  }
  /* A dot sits in the gap before each link. The list clips the one before the first link of
     every line, so no line starts with a dot; its 4px padding keeps the links' focus ring
     (2px, 2px out) inside the clip. */
  .hg-footer__policies {
    gap: 0 16px;
    justify-content: flex-start;
    margin: -4px;
    padding: 4px;
    overflow: hidden;
  }
  .hg-footer__policies li {
    position: relative;
  }
  .hg-footer__policies li::before {
    content: "";
    position: absolute;
    inset-inline-start: -10px;
    top: calc(50% - 2px);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
  }
}

/* Wider screens: the blocks side by side. Flex ratios share the width like grid fr units, and
   a menu left empty takes no room. Without the brand column the three blocks get equal
   columns, and since the columns and the bottom bar share the same 51px side margins on wide screens, the
   payment icons end where the club column ends. */
@media (min-width: 750px) {
  .hg-footer__grid {
    display: flex;
    flex-wrap: wrap;
  }
  .hg-footer__block {
    flex: 1 1 0;
  }
}
@media (min-width: 990px) {
  .hg-footer__grid,
  .hg-footer__base {
    width: auto;
    max-width: none;
    margin-inline: 51px;
  }
}

/* With the brand column: Shop (two link columns) and Join the club (a one-row form) get more
   room than Information. Below 1280px the brand column is a row of its own on top, with the
   logo, the about line and the contact details side by side; from 1280px it is the first of
   four columns. */
@media (min-width: 750px) {
  .hg-footer--brand .hg-footer__grid {
    column-gap: 32px;
  }
  .hg-footer--brand .hg-footer__block--shop {
    flex-grow: 1.3;
  }
  .hg-footer--brand .hg-footer__block--info {
    flex-grow: 0.6;
  }
  .hg-footer--brand .hg-footer__block--club {
    flex-grow: 1.25;
  }
}
@media (min-width: 750px) and (max-width: 1279px) {
  .hg-footer__block--brand {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--hg-footer-line);
  }
  .hg-footer__block--brand .hg-logo,
  .hg-footer__block--brand .hg-footer__about {
    margin-bottom: 0;
  }
}
@media (min-width: 1280px) {
  .hg-footer--brand .hg-footer__grid {
    flex-wrap: nowrap;
    column-gap: clamp(32px, 2.5vw, 56px);
  }
  .hg-footer__block--brand {
    flex-grow: 1.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-footer__links a,
  .hg-footer__links a::before,
  .hg-footer__acc span,
  .hg-club-form__submit,
  .hg-club-code__copy,
  .hg-to-top {
    transition: none;
  }
}