/* Shared by every page: sticky top bar, slide-out menu, anchor scrolling. */

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root { --bar-h: 56px; }

/* ─── Top bar ─── */
.site-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar-h);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  background: #fff;
  border-bottom: 1px solid #ececec;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  font-family: 'Futura', 'Futura PT', 'Trebuchet MS', 'Century Gothic', sans-serif;
}
.site-bar.is-visible { transform: translateY(0); }

.site-bar__brand,
.site-menu__brand {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.site-bar__logo { display: inline-flex; align-items: center; padding: 6px 0; line-height: 0; }
.site-bar__logo img { display: block; height: 32px; width: auto; }
.site-menu__brand.site-bar__logo { margin: 0; }
.site-bar__right { display: flex; align-items: center; gap: 6px; }

.site-bar__cart {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
}

/* Little ellipse with the number of items, top right of the cart icon. */
.site-bar__badge {
  position: absolute;
  top: 3px;
  right: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  font-family: 'Outfit', 'Futura', 'Trebuchet MS', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #fff;
}
.site-bar__badge[hidden] { display: none; }

.site-bar__menu,
.site-menu__close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
}

/* The logo never changes opacity. Other controls fade on hover only where hover really exists
   (on touch screens a tap leaves the element "hovered", which looked like a stuck fade). */
@media (hover: hover) {
  .site-bar__cart:hover,
  .site-bar__menu:hover,
  .site-menu__close:hover,
  .site-menu__links a:hover { opacity: 0.6; }
}
.site-bar__brand,
.site-bar__logo { opacity: 1 !important; -webkit-tap-highlight-color: transparent; }
.site-bar__logo:focus { outline: none; }
.site-bar__logo:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Pages with no big header menu keep the bar visible all the time. */
body.bar-always .site-bar { transform: none; }
body.bar-always { padding-top: var(--bar-h); }

/* ─── Slide-out menu ─── */
.site-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.site-menu-overlay.is-open { opacity: 1; visibility: visible; }

.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86vw);
  z-index: 1101;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 0 32px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0.25s;
  font-family: 'Futura', 'Futura PT', 'Trebuchet MS', 'Century Gothic', sans-serif;
}
.site-menu.is-open { transform: translateX(0); visibility: visible; }

.site-menu__head {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid #ececec;
}

.site-menu__links { display: flex; flex-direction: column; padding: 28px 20px; gap: 6px; }
.site-menu__links a {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #000;
  text-decoration: none;
  padding: 10px 0;
}
.site-menu__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 380px) {
  .site-bar__brand { font-size: 17px; letter-spacing: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-bar, .site-menu, .site-menu-overlay { transition: none; }
}

/* ─── Big header menu: one row that scales with the screen (the top bar takes over at 800px) ─── */
.nav-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(18px, 3.6vw, 60px);
  padding: 0 12px;
}
.nav-links a,
.nav-links button {
  font-size: clamp(17px, 2.3vw, 28px);
  white-space: nowrap;
  letter-spacing: clamp(1px, 0.18vw, 2px);
}

/* ─── Masonry grids: explicit columns, so every column starts at exactly the same height ─── */
.masonry { display: flex; align-items: flex-start; gap: 8px; padding: 0 8px; }
.masonry-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.masonry-item { width: 100%; }

/* ─── Small screens: the big header menu stays, wrapped onto two rows ───
   Row 1: SHOP  COMMISSIONS  CART      Row 2: ABOUT  CONTACT
   (the sticky bar still only appears after scrolling past it, on every screen size) */
.nav-break { display: none; }
@media (max-width: 800px) {
  body .title-wrap { padding-top: 48px; padding-bottom: 0; }
  body .nav-links {
    flex-wrap: wrap;
    row-gap: 14px;
    column-gap: clamp(16px, 5vw, 32px);
    margin-top: 44px !important;
    margin-bottom: 60px !important;
    padding: 0 16px;
  }
  body .nav-links a,
  body .nav-links button { font-size: clamp(15px, 4.4vw, 20px); }
  body .nav-links > :nth-child(1) { order: 1; }  /* SHOP */
  body .nav-links > :nth-child(2) { order: 2; }  /* COMMISSIONS */
  body .nav-links > :nth-child(5) { order: 3; }  /* CART */
  body .nav-links > .nav-break { display: block; order: 4; flex: 0 0 100%; height: 0; }
  body .nav-links > :nth-child(3) { order: 5; }  /* ABOUT */
  body .nav-links > :nth-child(4) { order: 6; }  /* CONTACT */
}