/* Hagoma header, converted from the Shopify theme's announcement bar and header
   (sections/announcement-bar.liquid, sections/header.liquid, assets/theme.css, assets/chrome.css):
   red announcement bar, then one black row with the logo, the menu and the icons. */

/* Height of the sticky header, and the viewport space it (and the admin bar) covers. */
:root {
  --hg-header-h: 63px;
  --hg-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hg-header-h));
}
@media (max-width: 575px) {
  :root { --hg-header-h: 52.75px; }
}
@media (max-width: 600px) {
  :root { --hg-sticky-top: var(--hg-header-h); }
}
@media (min-width: 992px) {
  :root { --hg-header-h: 72px; }
}

/* Announcement bar */
/* Above the sticky header (z-index 60), so the page dimming of an open mega panel leaves it
   lit, as in the Shopify theme. It scrolls away before the header sticks, so they never overlap. */
.hg-announce {
  position: relative;
  z-index: 61;
  display: flex;
  align-items: center;
  height: 46px;
  min-height: 46px;
  background: var(--hg-accent);
  color: #fff;
}
.hg-announce__track {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  min-height: inherit;
  padding: 0 16px;
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
}
.hg-announce__message {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hg-announce__message.is-active {
  display: flex;
}
.hg-announce__controls {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.hg-announce .hg-announce__control {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
  cursor: pointer;
  appearance: none;
}
.hg-announce .hg-announce__control:hover {
  background: transparent;
  color: inherit;
  opacity: 1;
}
.hg-announce .hg-announce__control[aria-pressed="true"] {
  display: none;
}
.hg-announce .hg-announce__control:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (max-width: 749px) {
  .hg-announce__track { letter-spacing: normal; }
}

#site-header.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 60;
  border: 0;
  background: var(--hg-header-bg);
  box-shadow: none;
  color: var(--hg-header-text);
}
@media (max-width: 600px) {
  /* The admin bar scrolls away on small screens. */
  #site-header.site-header { top: 0; }
}

.hg-header {
  position: relative;
}

/* Small screens: menu button on the left, centred logo, icons on the right. */
.hg-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 40px);
  height: var(--hg-header-h);
  margin-inline: auto;
  padding-block: 11px;
}
.hg-header__start {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
}
.hg-header .hg-header__burger {
  position: absolute;
  width: 36px;
  height: 36px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.hg-header__start .hg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hg-header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: auto;
}

.hg-logo {
  display: flex;
  align-items: center;
  color: inherit;
}
.hg-logo__img {
  display: block;
  width: auto;
  max-width: none;
  height: 41px;
}
/* The Hagoma artwork is black line art; invert it to white for black backgrounds. */
.hg-logo__img--invert {
  filter: invert(1);
}
.hg-logo__text {
  font-family: var(--hg-font-heading);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
}
@media (max-width: 575px) {
  .hg-logo__img { height: 30.75px; }
}

.hg-icon-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  line-height: 1;
  cursor: pointer;
}
.hg-icon-btn:hover,
.hg-icon-btn:focus-visible {
  background: none;
  color: inherit;
}
.hg-icon-btn .hg-icon {
  width: 22px;
  height: 22px;
}
/* The Shopify header's thin icon weight; icons that set their own stroke width keep it. */
.hg-header .hg-icon {
  stroke-width: 1;
}
.hg-header__end .hg-icon-btn {
  width: 36px;
  height: 36px;
}

/* The cart count is swapped by the Ecomus cart fragment, so it is styled by its parent's classes. */
.hg-header .header-cart__counter {
  position: absolute;
  top: 2px;
  inset-inline-end: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--hg-accent);
  color: #fff;
  font-family: var(--hg-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.hg-header .header-cart__counter.empty-counter {
  display: none;
}

/* Menu */
.hg-nav {
  display: none;
  min-width: 0;
}
.hg-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hg-nav__item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.hg-nav__item--mega {
  position: static;
}
.hg-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 20px 13px;
  color: var(--hg-nav-color);
  font-family: var(--hg-font-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: normal;
  line-height: 32px;
  text-transform: uppercase;
  white-space: nowrap;
}
.hg-nav__link:hover,
.hg-nav__item:hover > .hg-nav__link,
.hg-nav__item--mega.is-open > .hg-nav__link {
  color: var(--hg-header-hover);
}
/* The caret sits 6px after the label, inside the link's padding, as in the Shopify menu. */
.hg-nav__item--mega > .hg-nav__link {
  padding-inline-end: 0;
}
.hg-nav__toggle {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 13px 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--hg-nav-color);
  cursor: pointer;
}
.hg-nav__toggle .hg-icon {
  width: 10px;
  height: 10px;
}
.hg-nav__toggle:hover,
.hg-nav__item:hover > .hg-nav__toggle,
.hg-nav__item--mega.is-open > .hg-nav__toggle {
  background: none;
  color: var(--hg-header-hover);
}

/* Large screens: logo column, centred menu, icons. The menu needs about 1200px on one line;
   narrower screens keep the menu button. The logo column is as wide as the logo (57px), not a
   fixed 220px, so the menu with Waffle Loungewear stays on one line (owner, 2026-10-20). */
@media (min-width: 1200px) {
  .hg-header__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    width: 100%;
    height: auto;
    min-height: 72px;
    padding: 0 51px;
  }
  .hg-header__start {
    justify-content: flex-start;
    gap: 4px;
  }
  .hg-header .hg-header__burger { display: none; }
  .hg-header__start .hg-logo {
    position: static;
    min-height: 41px;
    padding-block: 5px;
    transform: none;
  }
  .hg-nav { display: block; }
  .hg-header__end { gap: 4px; }
}
/* Home, three category groups and three pages on one line (owner, 2026-10-19: Home back, larger
   type): 17px from 1440px, 16px below with the items closer, and from 1200 to 1279px 15px with
   the bar's sides narrowed too. Measured on staging, each step leaves at least 23px each side. */
@media (min-width: 1440px) {
  .hg-nav__link { font-size: 17px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .hg-nav__list { gap: 0 6px; }
  .hg-nav__link { padding-inline: 9px; }
  .hg-nav__toggle { padding-inline-end: 9px; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
  .hg-nav__list { gap: 0 4px; }
  .hg-nav__link { padding-inline: 8px; }
  .hg-nav__toggle { padding-inline: 5px 8px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .hg-header__bar { padding-inline: 32px; }
  .hg-nav__link { font-size: 15px; padding-inline: 7px; }
  .hg-nav__toggle { padding-inline: 4px 7px; }
}

/* Mega panel: centred below the header, slides up into place while the page dims.
   Closed panels skip rendering (content-visibility) so their lazy product images wait until
   the panel opens; a hidden but rendered panel sits in the viewport and would load them all. */
.hg-mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 2;
  max-width: 1300px;
  margin: 12px auto 0;
  padding: 30px;
  border-radius: 6px;
  background: var(--hg-header-bg);
  box-shadow: rgb(159 159 159) 0 1px 2px;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  content-visibility: hidden;
  transform: translateY(30px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  /* Browsers without allow-discrete drop this line and keep the one above. */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out, content-visibility 0.3s allow-discrete;
}
/* Bridges the 12px gap above the panel, so the pointer can reach it without closing it. */
.hg-mega::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 12px;
}
.hg-nav__item--mega:is(:hover, .is-open):not(.is-suppressed) > .hg-mega {
  opacity: 1;
  visibility: visible;
  content-visibility: visible;
  transform: none;
}
.hg-header::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.65);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.hg-header:has(.hg-nav__item--mega:is(:hover, .is-open):not(.is-suppressed))::after {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 1199px) {
  .hg-header::after { display: none; }
}

/* Links on the left, then the product lists and the tiles (Shopify: .ig-mega with nested links).
   The links get less room than Shopify's 1.2fr, so the tiles stay about as wide as in its
   catalog panel, which has no links column, and a one-word category name fits on a line. */
.hg-mega__inner {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.6fr);
  gap: 20px;
  min-width: 0;
}
.hg-mega__links:only-child {
  grid-column: 1 / -1;
}
.hg-mega__feature,
.hg-mega__lists,
.hg-mega__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-content: start;
  min-width: 0;
}
.hg-mega__links,
.hg-mega__products {
  min-width: 0;
}
.hg-mega__title {
  display: inline-block;
  margin: 0;
  padding: 0 0 18px;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  overflow-wrap: anywhere;
}
a.hg-mega__title:hover {
  color: inherit;
  text-decoration: underline;
}
.hg-mega__list,
.hg-mega__sublist,
.hg-mega__rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each category is a column headed by its bold link, with its subcategories below
   (Shopify: .ig-mega__links--nested and .ig-mega__col). */
.hg-mega__list {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 20px;
  align-content: start;
}
.hg-mega__sublist {
  gap: 8px;
  margin-top: 8px;
}
.hg-mega__link {
  color: rgb(255 255 255 / 0.8);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.hg-mega__list > .hg-mega__item > .hg-mega__link {
  color: #fff;
  font-weight: 700;
}
.hg-mega__link:hover,
.hg-mega__link[aria-current] {
  color: #fff;
  text-decoration: underline;
}

.hg-mega__rows {
  gap: 15px;
}
.hg-mega__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--hg-radius);
  background: #1a1a1a;
  color: inherit;
  font-size: 14px;
  line-height: normal;
}
.hg-mega__row:hover {
  color: inherit;
}
.hg-mega__row:hover .hg-mega__name {
  text-decoration: underline;
}
.hg-mega__thumb {
  flex: 0 0 58px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: #efeae2;
}
.hg-mega__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hg-mega__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.hg-mega__name {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hg-mega__price {
  font-family: var(--hg-font-heading);
  font-weight: 800;
}
.hg-mega__price del {
  font-family: var(--hg-font-body);
  font-weight: 400;
  opacity: 0.6;
}
.hg-mega__price ins {
  text-decoration: none;
}

.hg-mega__tile {
  position: relative;
  display: block;
  /* The title scales with the tile, which is narrower here than in the Shopify panel, so long names keep whole words. */
  container-type: inline-size;
  height: 350px;
  overflow: hidden;
  border-radius: var(--hg-radius);
  background: #efeae2;
  color: #fff;
}
.hg-mega__tile:hover {
  color: #fff;
}
/* A panel with one tile (Waffle Loungewear's: pajamas never get one) gives it both tile columns. */
.hg-mega__tile:only-child {
  grid-column: 1 / -1;
}
.hg-mega__tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hg-mega__tile:hover .hg-mega__tile-img {
  transform: scale(1.04);
}
.hg-mega__tile-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(0deg, #000 0, transparent 100%);
  text-align: center;
}
.hg-mega__tile-sub {
  margin-block-end: 8px;
  font-size: 14px;
  line-height: normal;
}
.hg-mega__tile-title {
  font-family: var(--hg-font-heading);
  /* 9.5% of the tile keeps "Loungewear" on one line in the 200px tiles at 1280px. */
  font-size: min(25px, 9.5cqi);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hg-mega__tile:hover .hg-mega__tile-title {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .hg-mega,
  .hg-header::after,
  .hg-nav__toggle .hg-icon,
  .hg-mega__tile-img {
    transition: none;
  }
  .hg-mega { transform: none; }
}