/* ==============
   Base styles
   ============== */

:root {
  --bg: #f9fafb;
  --bg-alt: #ffffff;
  --text-main: #161514;
  --text-muted: #6f6a66;
  --accent: #111111;
  --accent-soft: #e2ddd7;
  --border-soft: #e5e1db;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 999px;
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.05);

  /* GLOBAL LAYOUT TOKENS */
  --header-h: 76px;            /* consistent header height across pages */
  --sticky-gap: 18px;          /* breathing room below sticky header */

  /* font */
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
}

/* Reset-ish */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none; /* prevents pull-down overscroll */
  font-family: var(--font-sans);
  background: var(--bg-alt);
  color: var(--text-main);
  line-height: 1.6;
}

/* Utility containers */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Links & text */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
}

p {
  margin: 0;
}

section {
  padding: 4rem 0;
}

@media (min-width: 900px) {
  section {
    padding: 5.5rem 0;
  }
}

/* Better anchor jumps with sticky header */
section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--sticky-gap));
}

/* ==============
   Header & Nav
   ============== */

/* Default (ALL NON-HOME PAGES): blocky white header, always visible */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-alt);
  border-bottom: 1px solid rgba(229, 225, 219, 0.9);
  backdrop-filter: none;
  transition: background 220ms ease, border-color 220ms ease, opacity 220ms ease;
}

body.is-home {
  background: var(--bg-alt);
}

/* Homepage only: header overlays hero & starts invisible */
body.is-home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  background: transparent;
  border-bottom-color: transparent;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

/* Homepage: header appears after scroll */
body.is-home .site-header.is-solid {
  opacity: 1;
  pointer-events: auto;

  background: var(--bg-alt);
  border-bottom-color: rgba(229, 225, 219, 0.9);
}

/* Make header height consistent everywhere */
.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  flex-wrap: nowrap;   /* important */
  grid-template-columns: 0.7fr auto 1.3fr;
}


.logo a {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav a {
  opacity: 0.8;
}

.nav a:hover {
  opacity: 1;
}

.nav-cta {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-alt);
  box-shadow: var(--shadow-soft);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.6rem;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    border-color 0.15s ease, color 0.15s ease;
}

.btn.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.btn.ghost {
  background: transparent;
  border-color: var(--border-soft);
}

.btn.ghost:hover {
  background: var(--bg-alt);
}

/* Hero image */
.hero-image {
  display: flex;
  justify-content: center;
}

.hero-image-placeholder {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(160deg, #f1ebe4, #faf7f4);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-placeholder span {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

/* ==============
   Highlights
   ============== */

.highlights {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: #f9f7f4;
}

.highlights-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .highlights-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.highlight-card {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(229, 225, 219, 0.7);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.highlight-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.highlight-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ==============
   Collections
   ============== */

.section-header {
  margin-bottom: 2rem;
}

.section-header h2 {
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}

.section-header p {
  color: var(--text-muted);
  max-width: 28rem;
}

/* Extra spacing for collections page hero
   (reduce a bit to match new consistent header height) */
.collections-hero {
  padding-top: 3.25rem; /* was 5rem */
}

/* editorial tiles (final version) */
.collections-hero .container {
  max-width: 1240px;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

.collection-grid {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 900px) {
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
  }
}

.collection-card {
  position: relative;
  display: block;
  border: none;
  background: none;
  box-shadow: none;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.collection-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.collection-image.placeholder {
  background: linear-gradient(140deg, #f1ece6, #f8f4ef);
}

/* old box is unused now, but keep safe */
.collection-info {
  display: none !important;
}

.collection-title {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0.9rem 0.9rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.collection-card:hover .collection-image {
  border-color: rgba(0, 0, 0, 0.25);
}

/* ==============
   About
   ============== */

.about-inner {
  max-width: 720px;
}

.about-text h2 {
  font-size: 1.7rem;
  margin-bottom: 0.8rem;
}

.about-text p {
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

/* ==============
   Story / Journal
   ============== */

.story-inner {
  max-width: 720px;
}

.story-block h2 {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}

.story-block p {
  color: var(--text-muted);
}

/* =========================
   SHOP GRID (2-up, square)
   ========================= */

.shop-grid {
  display: grid;
  gap: 2.2rem;
}

@media (min-width: 900px) {
  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.8rem;
  }
}

@media (max-width: 899px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-media {
  width: 100%;
  height: 70%
  aspect-ratio: 16 / 15;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

.product-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
}

.product-left {
  min-width: 0;
}

.product-name {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.55rem;
}

.product-price {
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.product-swatches {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #222;
}

.dot:nth-child(2) { background: #555; }
.dot:nth-child(3) { background: #bbb; }
.dot:nth-child(4) { background: #1f1f1f; }

.product-card:hover .product-media {
  border-color: rgba(0, 0, 0, 0.25);
}

/* =========================
   Product page container
   ========================= */

.product .container {
  max-width: 1240px;
  padding-left: 0.1rem; /* your left-tight look */
  padding-right: 1.5rem;
}

/* =========================
   Product detail layout (vajze-like)
   ========================= */

.product-layout {
  display: grid;
  align-items: start;
  gap: 1.1rem;
}

@media (min-width: 980px) {
  .product-layout {
    grid-template-columns: 112px minmax(0, 1fr) 420px;
    gap: 1.1rem;
  }
}

.product-thumbs {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  padding-bottom: 0;
}

@media (min-width: 980px) {
  .product-thumbs {
    flex-direction: column;
    position: sticky;
    top: calc(var(--header-h) + var(--sticky-gap));
    overflow: visible;
  }
}

.thumb {
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  width: 112px;
  height: 150px;
  flex: 0 0 auto;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb.is-active {
  outline: 2px solid rgba(17, 17, 17, 0.6);
  outline-offset: 2px;
}

.product-main {
  border-radius: 0;
  border: none;
  overflow: hidden;
  background: #fff;
}

.product-main img {
  width: 100%;
  display: block;
  object-fit: contain;   /* KEY CHANGE */
  background: #fff;      /* keeps it clean if image doesn’t fill */
  display: block;
}

@media (max-width: 979px) {
  .product-main img {
    height: auto;
  }
}

.product-info {
  padding-top: 0;
  margin-top: -10px;
}

.product-title {
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.product-price {
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

.product-block {
  margin-bottom: 1.4rem;
}

.product-label {
  font-weight: 600;
  margin-bottom: 0.6rem;
}

body.is-product {
  background: var(--off-white);
}

.swatches {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #222;
}

.swatch:nth-child(2) {
  background: #444;
}

.swatch-labels {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.sizes {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.size-pill {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  background: var(--bg-alt);
}

.size-chart {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.product-origin {
  margin: 1.6rem 0;
  color: var(--text-muted);
}

.accordion {
  border-top: 1px solid var(--border-soft);
  padding-top: 1rem;
}

.accordion summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion ul {
  margin: 0.8rem 0 0.8rem 1.2rem;
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
  margin-top: 0.7rem;
}

@media (min-width: 980px) {
  .product-info {
    position: sticky;
    top: calc(var(--header-h) + var(--sticky-gap));
    align-self: start;
  }
}

/* =========================
   You may also like
   ========================= */

.recommendations {
  padding: 5rem 0 6rem;
}

.rec-layout {
  max-width: 1240px;
}

@media (min-width: 980px) {
  .rec-layout {
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.rec-title {
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.rec-grid {
  display: grid;
  gap: 2.2rem;
}

@media (min-width: 980px) {
  .rec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.8rem;
  }
}

.rec-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.rec-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: none;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

.rec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
}

.rec-name {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.55rem;
}

.rec-price {
  font-size: 0.9rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.rec-swatches {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.rec-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: #222;
}

.rec-dot:nth-child(2) { background: #555; }
.rec-dot:nth-child(3) { background: #bbb; }
.rec-dot:nth-child(4) { background: #1f1f1f; }

.rec-card:hover .rec-media {
  border-color: rgba(0, 0, 0, 0.25);
}

/* =========================
   Home immersive hero
   ========================= */

.home-hero{
  height: 120vh;          /* gives scroll room while hero stays pinned */
  position: relative;
  margin-top: -1px;
  padding-top: 0;
  min-height: 90vh;      /* was likely 100–160vh */
  padding-bottom: 2rem;
}

.home-hero-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent; /* important */
  border-bottom: none;
}

/* Background image */
.home-hero-media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: translateY(var(--hero-img-y, 0px));
  will-change: transform;
}

/* Big moving word */
/* Big moving word (fixed: centered + no cropping) */
.home-hero-word{
  position: absolute;
  left: 50%;
  right: auto;
  width: 100%;
  bottom: 4vh;

  font-size: clamp(8rem, 18vw, 22rem);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.06em;
  text-transform: uppercase;

  color: rgba(17, 17, 17, 0.85);

  /* was pushing the word out of frame */
  padding-left: 0;
  padding-right: 0;

  text-align: center;
  white-space: nowrap;

  /* keep your scroll animation + center it */
  transform: translateX(-50%) translateY(var(--hero-word-y, 0px));
  will-change: transform;

  user-select: none;
  pointer-events: none;
}

/* Mobile: slightly smaller so it fits without losing the left-to-right feeling */
@media (max-width: 560px){
  .home-hero-word{
    font-size: clamp(4.8rem, 22vw, 9rem);
    bottom: 3vh;
    letter-spacing: -0.05em;
  }
}

/* Caption */
.home-hero-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.2rem;

  max-width: 1240px;
  padding-left: 0.8rem;
  padding-right: 0.8rem;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: rgba(245, 242, 238, 0.95);
  text-shadow: 0 2px 14px rgba(0,0,0,0.3);
}

.home-hero-line {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
  opacity: 0.85;
}

.home-hero-link{
  font-size: 0.95rem;
  opacity: 0.9;
  text-decoration: underline;
}

/* =========================
   NAV DROPDOWN (Kollektionen)
   ========================= */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* dropdown panel */
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  padding: 0.6rem;
  border-radius: 14px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
  z-index: 1200;
}

.dropdown a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.95rem;
  opacity: 0.85;
  text-decoration: none;
}

.dropdown a:hover {
  background: rgba(0,0,0,0.05);
  opacity: 1;
}

/* Desktop: open on hover */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Touch/mobile: open when JS adds .is-open */
.nav-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* =========================
   HOME PRODUCT RAIL (minimal)
   ========================= */

.home-rail {
  padding: 0.4rem 0 2.2rem;
  background: #fff;
}

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.1rem;
}

.rail-title {
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  margin: 0;
}

.rail-viewall {
  font-size: 0.95rem;
  opacity: 0.7;
  text-decoration: none;
}

.rail-viewall:hover {
  opacity: 1;
  text-decoration: underline;
}

/* The whole rail container */
.rail-shell {
  position: relative;
}

/* Track */
.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1.4rem) / 4);
  gap: 1.4rem;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  scroll-padding-left: 1.5rem;
  padding: 0 1.5rem;

  scroll-behavior: smooth;

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.rail-track::-webkit-scrollbar {
  display: none;
}

/* Snap each card */
.rail-track .product-card {
  scroll-snap-align: start;
}

/* Slightly rounded images (very subtle) */
.rail-track .product-media {
  aspect-ratio: 3 / 4.3;
  border-radius: 8px; /* slight round */
  overflow: hidden;
}

/* Minimal overlay arrows */
.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  border: 0;
  background: transparent;
  padding: 0.25rem;

  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, transform 160ms ease;
  color: rgba(0, 0, 0, 0.8);

  /* avoid selecting text */
  user-select: none;
}

.rail-arrow:hover {
  opacity: 1;
}

.rail-arrow--left {
  left: 10px;
}

.rail-arrow--right {
  right: 10px;
}

/* Make arrow glyph more “editorial” */
.rail-arrow span {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Optional: only show arrows on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .rail-arrow {
    opacity: 0;
  }

  .rail-shell:hover .rail-arrow {
    opacity: 0.55;
  }

  .rail-shell:hover .rail-arrow:hover {
    opacity: 1;
  }
}

/* Mobile: keep arrows visible but slightly smaller */
@media (max-width: 620px) {
  .rail-track {
    grid-auto-columns: minmax(220px, 280px);
  }
  .rail-arrow span {
    font-size: 18px;
  }
}


/* =========================
   Rail header full-bleed
   ========================= */

.rail-head--bleed {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  /* FULL WIDTH */
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;

  margin-bottom: 1.1rem;
}

/* On large screens, align to viewport edge, not container */
@media (min-width: 1240px) {
  .rail-head--bleed {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.rail-title {
  font-size: 1.9rem;
  letter-spacing: -0.035em;
}

.home-hero + .home-rail {
  margin-top: 0;
}

/* =========================
   Product image hover swap
   ========================= */

.product-media {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #f6f6f6;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 320ms ease;
}

/* second image */
.product-media .hover-img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* on hover: swap */
.product-card:hover .product-media img:first-child {
  opacity: 0;
}

.product-card:hover .product-media .hover-img {
  opacity: 1;
}

/* ===== Footer: ultra minimal, pure white, no frame ===== */

.site-footer.footer {
  background: var(--bg-alt);
  border: 0 !important;
  margin: 0;
  padding-top: 5rem;
}

/* If your global styles add padding to footer children, we neutralize it */
.footer-wrap {
  background: var(--bg-alt);
  padding: 0;
  margin: 0;
}

/* Layout: push HOJAX further left by letting it sit outside the container */
.footer-inner {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 3.25rem;
  align-items: start;
  padding: 0 !important; /* prevent "section padding" feeling */
  margin-top: 0 !important;
}

/* Make HOJAX larger + bolder + closer to page edge */
.footer-vertical {
  margin-left: -28px; /* pulls it left beyond container, like the reference */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 2.2rem;     /* bigger */
  font-weight: 700;      /* bolder */
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0.95;
  user-select: none;
}

/* Columns */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.25rem;
}

/* Matching typography everywhere (except HOJAX) */
.footer-column h4 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column li {
  margin: 0.55rem 0;
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.72;
}

/* Hours aligned */
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Links: calm, same font, no underline by default */
.site-footer.footer a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.site-footer.footer a:hover {
  opacity: 0.6;
}

/* Bottom row: remove the “framed” feeling */
.footer-bottom {
  margin-top: 1.75rem;     /* small */
  padding-top: 0;          /* no divider vibe */
  border-top: 0;           /* no line */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  opacity: 0.55;
}

/* Make the footer not feel tall */
@media (max-width: 980px) {
  .footer-inner {
    grid-template-columns: 70px 1fr;
    gap: 2rem;
  }

  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .footer-vertical {
    margin-left: -18px;
    font-size: 1.9rem;
  }
}

@media (max-width: 520px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-vertical {
    margin-left: 0;
    flex-direction: row;
    gap: 0.4rem;
    font-size: 1.6rem;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

.footer-hours span:last-child {
  font-variant-numeric: tabular-nums;
}

/* ===== Contact page (editorial) ===== */

.is-contact .site-header {
  background: #fff;
}

.contact-page {
  background: #fff; /* du wolltest das Rail-White überall */
}

.contact-hero {
  padding: 5rem 0 1rem;
}

.contact-title {
  font-size: clamp(3.2rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 650;
  margin: 0;
}

.contact-body {
  padding: 3.5rem 0 5.5rem;
}

.contact-grid {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

@media (min-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
    align-items: start;
  }
}

.contact-subtitle {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  opacity: 0.55;
}

.contact-text {
  margin: 0;
  line-height: 1.6;
  max-width: 42ch;
  opacity: 0.8;
}

.contact-inline-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .contact-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 0;
  padding: 0.9rem 1rem;
  font: inherit;
  background: transparent;
  outline: none;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: rgba(0,0,0,0.55);
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.35;
  opacity: 0.75;
}

.contact-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-submit {
  margin-top: 0.25rem;
  border: 1px solid rgba(0,0,0,0.75);
  background: #111;
  color: #fff;
  padding: 0.85rem 1rem;
  font: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact-submit:hover {
  opacity: 0.85;
}

/* screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
/* =========================
   Home – Editorial overlay block (inset, shorter, no hover)
   ========================= */

.home-editorial {
  background: #fff;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.home-editorial-frame {
  display: block;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(0.75rem, 2vw, 1.5rem)
           clamp(1.5rem, 4vw, 3rem);
  text-decoration: none;
  color: inherit;
}

/* the “framed image” container */
.home-editorial-hero {
  position: relative;
  height: clamp(240px, 34vw, 360px); /* shorter image */
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

/* image */
.home-editorial-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* soft veil behind the text (ONLY inside the image frame) */
.home-editorial-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.78) 44%,
    rgba(255,255,255,0.20) 70%,
    rgba(255,255,255,0.00) 100%
  );
  pointer-events: none;
}

/* overlay text */
.home-editorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: grid;
  align-content: center;

  /* text inset within the image */
  padding: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 720px; /* keeps it editorial, not too wide */
}

/* typography */
.home-editorial-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 0.8rem 0;
}

.home-editorial-title {
  margin: 0 0 1rem 0;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: #111;
}

.home-editorial-title .bold { font-weight: 700; }
.home-editorial-title .light { font-weight: 300; }

.home-editorial-copy {
  max-width: 42ch;
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0,0,0,0.75);
}

.home-editorial-cta {
  display: inline-block;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.75;
}

/* Mobile: stronger veil so text stays readable */
@media (max-width: 720px) {
  .home-editorial-hero::after {
background: linear-gradient(
  to right,
  rgba(250,248,244,0.9),   /* stronger start */
  rgba(250,248,244,0.7),    /* smoother middle */
  rgba(250,248,244,0.5)
);
  }
  }

  .home-editorial-overlay {
    max-wid
   }

 /* =========================
    Home – Contact teaser
    ========================= */

 .home-contact-teaser {
   background: #fff;
   padding: 2.5rem 0 3.5rem;
   border-top: 1px solid rgba(0,0,0,0.06);
 }

 .home-contact-inner {
   max-width: 720px;
 }

 .home-contact-eyebrow {
   font-size: 0.85rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   opacity: 0.6;
   margin-bottom: 0.6rem;
 }

 .home-contact-title {
   font-size: clamp(2.2rem, 4.5vw, 3.4rem);
   line-height: 1.05;
   letter-spacing: -0.03em;
   margin: 0 0 1rem 0;
 }

/* =========================
   Home – Contact teaser (footer-aligned)
   ========================= */
.home-contact-teaser{
  background:#fff;
  padding: 2.2rem 0 2.2rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}


.home-contact-inner{ max-width: 1120px; }

.home-contact-eyebrow{
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.6;
  margin:0 0 .9rem 0;
}

.home-contact-grid{
  display:grid;
  gap:1.5rem;
  align-items:start;
}

@media (min-width: 980px){
  .home-contact-grid{
    grid-template-columns: 1.2fr 0.8fr;
    gap:2.6rem;
  }
}

.home-contact-title{
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin:0 0 .9rem 0;
}

.home-contact-copy{
  max-width: 46ch;
  color: rgba(0,0,0,0.75);
  line-height:1.7;
  margin:0 0 1.1rem 0;
}

.home-contact-link{
  font-size:.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity:.8;
}

.home-contact-aside{
  border-left: 1px solid rgba(0,0,0,0.10);
  padding-left: 1.25rem;
}

@media (max-width: 979px){
  .home-contact-aside{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(0,0,0,0.10);
    padding-top: 1.1rem;
  }
}

.home-contact-meta{
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform: uppercase;
  opacity:.55;
  margin-bottom:.8rem;
}

.home-contact-mini{
  font-size:.95rem;
  line-height:1.65;
  opacity:.72;
}

/* =========================
   Home – Menaffa feature
   ========================= */

.home-menaffa {
  background: #fff;
  padding: 3rem 0;
}

.home-menaffa-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 980px) {
  .home-menaffa-inner {
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
  }
}

.home-menaffa-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.6rem;
}

.home-menaffa-title {
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 1.2rem;
}

.home-menaffa-title span {
  display: block;
  font-weight: 300;
}

.home-menaffa-copy {
  max-width: 46ch;
  line-height: 1.7;
  color: rgba(0,0,0,0.75);
  margin-bottom: 1rem;
}

.home-menaffa-link {
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.8;
}

.home-menaffa-media img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 0 0 2px #E6E6E6;
}

/* =========================
   HOME – BAGS SECTION (FULL)
   Image in same frame, aligned to text, not cropped
   ========================= */

.home-bags-teaser {
  background: #fff;
  padding: 5.5rem 0;
}

/* Grid: text left, image right */
.home-bags-teaser-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start; /* aligns image with top of text */
}

/* TEXT */
.home-bags-title {
  font-size: clamp(2.4rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 1.25rem 0;
}

.home-bags-title strong {
  font-weight: 650;
}

.home-bags-sub {
  font-size: 1.15rem;
  margin: 0 0 1rem 0;
  opacity: 0.9;
}

.home-bags-copy {
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.72);
  margin: 0;
}

/* CTA link (quiet) */
.home-bags-link {
  display: inline-block;
  margin-top: 2.1rem;
  font-size: 0.95rem;
  color: #000;
  text-decoration: none;
  position: relative;
  opacity: 0.82;
}

.home-bags-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.25s ease;
}

.home-bags-link:hover::after {
  opacity: 0.9;
}

/* MEDIA (NO CROPPING) */
.home-bags-media {
  /* IMPORTANT: make sure nothing can crop the image */
  position: static;
  overflow: visible;
  height: auto;

  /* align to text column */
  justify-self: end;
  align-self: start;

  /* optional: keep it elegant and not too dominant */
  max-width: 560px;
  width: 100%;

  /* tiny editorial tension (optional, calm) */
  transform: translateY(0); /* set to 12px if you want slight offset */
  box-shadow: 0 0 0 2px #E6E6E6;
}

.home-bags-media img {
  /* This ensures the full image is visible */
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;

  /* slight fade */
  opacity: 0.88;
}

/* Responsive */
@media (max-width: 900px) {
  .home-bags-teaser {
    padding: 5rem 0;
  }

  .home-bags-teaser-inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .home-bags-media {
    justify-self: start;
    max-width: none;
    transform: none;
  }
}

/* =========================
   MENAFFA — editorial article page
   (append to the end of styles.css)
   ========================= */

.menaffa-page{
  padding: 7.5rem 0 6rem;
  background: #fff;
}

.menaffa-shell{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.menaffa-grid{
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 980px){
  .menaffa-grid{
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 4.5rem;
  }
}

/* Sticky subnav (editorial layout) */
.menaffa-subnav{
  position: sticky;
  top: calc(var(--header-h) + var(--sticky-gap));
  align-self: start;
  padding-top: 0.25rem;
}

.menaffa-subnav a{
  display: block;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  opacity: 0.7;
  text-decoration: none;
}

.menaffa-subnav a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero */
.menaffa-hero{
  padding: 0 0 2.2rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 2.6rem;
  margin-top: 0;
}

.menaffa-kicker{
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 1rem;
}

.menaffa-title{
  font-size: clamp(3.0rem, 8vw, 7.2rem);
  letter-spacing: -0.06em;
  line-height: 0.95;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: #111;
}

.menaffa-lede{
  max-width: 64ch;
  margin: 0;
  color: rgba(0,0,0,0.78);
  line-height: 1.75;
  font-size: 1rem;
}

/* Sections */
.menaffa-section{
  scroll-margin-top: calc(var(--header-h) + var(--sticky-gap) + 20px);
  padding-bottom: 2rem;
  padding-top: 2rem;
  border-bottom: none;
  margin-bottom: 4rem;
}


.menaffa-section:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.menaffa-section h2{
  font-size: 1.6rem;
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
}

.menaffa-copy{
  max-width: 700px;
  color: rgba(0,0,0,0.78);
  font-size: 1rem;
  line-height: 1.75;
}

.menaffa-copy p{
  margin: 0 0 1.15rem 0;
}

/* Quote */
.menaffa-quote{
  margin: 1.8rem 0;
  padding: 1rem 1.1rem;
  border-left: 2px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.03);
  max-width: 700px;
}

.menaffa-quote p{
  margin: 0;
  color: rgba(0,0,0,0.72);
  line-height: 1.7;
}

/* Media blocks */
.menaffa-media{
  margin-top: 2rem;
  margin: 3rem 0 0;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  background: #fff;
}

.menaffa-media img{
  width: 100%;
  max-width: 720px;
  display: block;
}

.menaffa-caption{
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  color: rgba(0,0,0,0.55);
  line-height: 1.5;
}

/* Soft list (gentle bullets) */
.menaffa-softlist{
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 700px;
}

.menaffa-softlist li{
  margin: 0 0 0.6rem;
  color: rgba(0,0,0,0.78);
  line-height: 1.65;
}

.menaffa-softlist strong{
  font-weight: 600;
  color: rgba(0,0,0,0.9);
}

/* CTA note */
.menaffa-note{
  max-width: 700px;
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

.menaffa-note p{
  margin: 0;
  opacity: 0.78;
  line-height: 1.6;
}

.menaffa-note a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   MENAFFA — Meaning Colors (MEN / NA / F / FA)
   ========================= */

:root{
  --menaffa-men: #8C1D2C; /* Mensch (warm) */
  --menaffa-na:  #B08A3C;/* Natur (calm green) */
  --menaffa-f:   #6B7C8A; /* Form (editorial dark) */
  --menaffa-fa:  #7A5BA6; /* Farbe (playful violet) */
}

/* Colored letter fragments */
.menaffa-men{ color: var(--menaffa-men); font-weight: 650; }
.menaffa-na { color: var(--menaffa-na);  font-weight: 650; }
.menaffa-f  { color: var(--menaffa-f);   font-weight: 650; }
.menaffa-fa { color: var(--menaffa-fa);  font-weight: 650; }


/* Optional: small subtitle under the colored parts */
.menaffa-title-word{
  margin: 0;
  opacity: .9;
}



/* =========================
   Menaffa title animation — dramatic & sequential (HOJAX)
   Each word drops → tail desaturates/fades → next word drops
   ========================= */

.menaffa-title-parts{
  display: flex;
  flex-wrap: wrap;
  gap: -0.05rem; /* tighter spacing between MEN NA F FA */
  align-items: baseline;
  margin: 0 0 .75rem;
}

/* Make the title feel intentional (ALL CAPS) */
.menaffa-title--animated .mf-word,
.menaffa-title--animated .mf-core,
.menaffa-title--animated .mf-tail{
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Each word container */
.mf-word{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* Drop animation (slower, more “weight”) */
.menaffa-title--animated .mf-word{
  opacity: 0;
  transform: translateY(-28px);
  animation: mfDropSlow 1200ms cubic-bezier(.18,.92,.22,1) forwards;
}

/* CORE stays in normal flow */
.mf-core{
  position: relative;
  z-index: 1;
}

/* TAIL is absolutely positioned so it can disappear without leaving gaps */
.mf-tail{
  position: absolute;
  left: 100%;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: .9;
  transform: translateY(0);
  will-change: opacity, transform, color;
}

/* --- Sequential timing: next word only starts after previous tail is gone --- */
/* Total per word ≈ 1200ms drop + 900ms tail fade + 250ms pause = 2350ms */

.menaffa-title--animated .mf-word--mensch{ animation-delay: 150ms; }
.menaffa-title--animated .mf-word--natur { animation-delay: 2500ms; }
.menaffa-title--animated .mf-word--form  { animation-delay: 4850ms; }
.menaffa-title--animated .mf-word--farbe { animation-delay: 7200ms; }

@keyframes mfDropSlow{
  0%   { opacity: 0; transform: translateY(-28px); }
  70%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Tail: starts colored (per word), then becomes less colored + fades out */
.menaffa-title--animated .mf-word--mensch .mf-tail{
  color: var(--menaffa-men);
  animation: mfTailDesaturate 900ms ease forwards;
  animation-delay: 1500ms; /* after mensch drop finishes */
}

.menaffa-title--animated .mf-word--natur .mf-tail{
  color: var(--menaffa-na);
  animation: mfTailDesaturate 900ms ease forwards;
  animation-delay: 3850ms; /* 2500 + 1200 + 150 */
}

.menaffa-title--animated .mf-word--form .mf-tail{
  color: var(--menaffa-f);
  animation: mfTailDesaturate 900ms ease forwards;
  animation-delay: 6200ms; /* 4850 + 1200 + 150 */
}

.menaffa-title--animated .mf-word--farbe .mf-tail{
  color: var(--menaffa-fa);
  animation: mfTailDesaturate 900ms ease forwards;
  animation-delay: 8550ms; /* 7200 + 1200 + 150 */
}

@keyframes mfTailDesaturate{
  0%{
    opacity: .95;
    transform: translateY(0);
  }
  55%{
    /* “less colored” feeling: shift toward neutral + lower opacity */
    color: rgba(0,0,0,0.45);
    opacity: .35;
  }
  100%{
    color: rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  .menaffa-title--animated .mf-word{
    opacity: 1;
    transform: none;
    animation: none;
  }
  .menaffa-title--animated .mf-tail{
    opacity: 0;
    animation: none;
  }
}

.menaffa-subnav-offset{
  height: 10.5rem; /* adjust to match your about hero spacing */
}

/* =========================
   Menaffa — sticky subnav like About
   ========================= */

/* Spacer that defines when sticky starts */
.menaffa-sticky-start{
  height: 1px;
}

/* Sticky behavior */
.menaffa-subnav{
  position: sticky;
  top: calc(var(--header-h) + 0.5rem);
  align-self: start;
  padding-top: 0;
}

/* IMPORTANT:
   Push subnav down so it visually starts under the hero */
.menaffa-grid{
  align-items: start;
}

/* Only activate sticky AFTER hero */
@supports (position: sticky){
  .menaffa-subnav{
    margin-top: 6rem; /* matches About spacing */
  }
}

/* =========================
   Menaffa — Geschichte split (image + text, NOT sticky)
   ========================= */

.menaffa-geschichte{
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

/* Geschichte image – editorial, uncropped */
.menaffa-geschichte-media{
  margin: 0;
  background: #fff;
}

.menaffa-geschichte-media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain; /* IMPORTANT */
}

/* Keep text width nice */
.menaffa-geschichte-copy{
  max-width: 700px;
}

/* Mobile: stack */
@media (max-width: 980px){
  .menaffa-geschichte{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .menaffa-geschichte-media img{
    width: 100%;
  }
}

/* Editorial intro rhythm */
.menaffa-intro-meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2.5rem 0 3.5rem;
  font-size: 0.95rem;
}

.menaffa-intro-meta p{
  margin: 0;
  color: #333;
}

/* Quiet breathing line */
.menaffa-breath{
  font-style: italic;
  color: #666;
  margin: 0 0 4rem;
  max-width: 520px;
}

/* =========================
   Editorial image wrap (Geschichte)
   ========================= */

.menaffa-float-media{
  float: left;
  width: 320px;
  margin: 0.25rem 2rem 1.25rem 0;
}

.menaffa-float-media img{
  width: 100%;
  height: auto;
  display: block;
}

/* Clear float after text block */
.menaffa-copy::after{
  content: "";
  display: block;
  clear: both;
}

/* =========================
   Menaffa – Mosaik (title aligned with image top)
   ========================= */

.menaffa-mosaik2{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3.5rem;
  align-items: start; /* top alignment */
}

/* Bigger title only here */
.menaffa-h2--mosaik{
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1.05;
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
}

/* Image sits level with the title top */
.menaffa-mosaik2-media{
  margin: 0;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  overflow: hidden;
}

/* Keep ratio, optionally crop a touch */
.menaffa-mosaik2-media img{
  width: 100%;
  height: auto;
  display: block;
}



.menaffa-mosaik2{
  align-items: stretch;
}
.menaffa-mosaik2-media{ height: 100%; }
.menaffa-mosaik2-media img{
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}


/* Subtle breakout to the right (optional) */
@media (min-width: 980px){
  .menaffa-mosaik2{
    margin-right: -2.5rem;
  }
}

/* Mobile */
@media (max-width: 980px){
  .menaffa-mosaik2{
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-right: 0;
  }
}
/* =========================
   MOSAIK FEATURE SECTION (break alignment + clean frames)
   ========================= */

.menaffa-section--mosaic{
  /* slightly less strict width feel */
  padding-top: 4.5rem;
}

.menaffa-mosaic-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 3.25rem;
  align-items: start;

  /* IMPORTANT: allow this section to breathe more */
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Push media further right (editorial “break pattern”) */
.menaffa-mosaic-media{
  margin-right: -6vw; /* adjust: -4vw subtle, -8vw bold */
}

/* Bigger title for this feature moment */
.menaffa-mosaic-title{
  font-size: clamp(1.8rem, 2.3vw, 2.35rem);
  line-height: 1.12;
  margin: 0 0 1.1rem;
}

/* Fine frame */
.menaffa-frame{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

/* =========================
   Carousel frame sizing
   ========================= */

.menaffa-carousel{
  position: relative;
  overflow: hidden;
  border-radius: 0; /* HOJAX clean */
}

/* Fixed editorial frame — prevents tall images from stretching layout */
.menaffa-carousel{
  aspect-ratio: 4 / 5; /* stable frame */
  width: 100%;
  max-width: 520px;
}

.menaffa-carousel-track{
  height: 100%;
  display: flex;
  transition: transform 500ms ease;
}

/* each slide fills the frame */
.menaffa-slide{
  flex: 0 0 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* THIS is the “no weird crop” fix */
.menaffa-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;        /* no chopping */
  object-position: center;    /* centered */
  background: #fafafa;        /* soft studio backing */
}

/* Counter (already like you wanted) */
.menaffa-carousel-counter{
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-size: .9rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.10);
}

/* Arrows desktop only */
.menaffa-carousel-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.menaffa-carousel-prev{ left: 12px; }
.menaffa-carousel-next{ right: 12px; }

@media (max-width: 980px){
  .menaffa-mosaic-layout{
    grid-template-columns: 1fr;
  }
  .menaffa-mosaic-media{
    margin-right: 0;
  }
  .menaffa-carousel{
    max-width: 560px;
  }
}

/* hide arrows on mobile (swipe only) */
@media (max-width: 760px){
  .menaffa-carousel-arrow{ display: none; }
}

/* =========================
   Lightbox modal
   ========================= */

.menaffa-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.menaffa-lightbox.is-open{
  display: block;
}

.menaffa-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.menaffa-lightbox-panel{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 3.5rem 1.25rem 1.75rem;
}

.menaffa-lightbox-inner{
  width: min(980px, 94vw);
  height: min(82vh, 780px);
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.menaffa-lightbox-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Close X */
.menaffa-lightbox-close{
  position: absolute;
  top: -46px;
  right: 0;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.2rem;
}

/* Lightbox arrows (desktop only) */
.menaffa-lightbox-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
  color: #fff;
  cursor: pointer;
  font-size: 1.8rem;
  display: grid;
  place-items: center;
}

.menaffa-lightbox-prev{ left: 14px; }
.menaffa-lightbox-next{ right: 14px; }

@media (max-width: 760px){
  .menaffa-lightbox-arrow{ display: none; }
}

/* =========================
   MOSAIK – break global layout (media bleeds right)
   ========================= */

.menaffa-section--mosaic .menaffa-mosaic-layout{
  /* text stays “editorial readable” */
  grid-template-columns: minmax(420px, 560px) minmax(520px, 1fr);
  align-items: start;
}

/* Let the MEDIA column escape the container to the right */
.menaffa-section--mosaic .menaffa-mosaic-media{
  justify-self: end;                 /* push media to the right edge of its column */
  margin-right: calc(-1 * clamp(24px, 8vw, 180px)); /* bleed out */
  padding-right: clamp(12px, 2vw, 28px);            /* keep a little breathing room */
}

/* Optional: make the text block feel less narrow */
.menaffa-section--mosaic .menaffa-mosaic-text{
  max-width: 560px;                  /* keeps line length elegant */
}

/* Make sure carousel can grow nicely in that wider right area */
.menaffa-section--mosaic .menaffa-carousel{
  max-width: 640px;                  /* bigger feature moment */
  aspect-ratio: 4 / 5;               /* keep stable frame */
}

/* On very wide screens: bleed even more */
@media (min-width: 1280px){
  .menaffa-section--mosaic .menaffa-mosaic-media{
    margin-right: -220px;
  }
}

/* On tablet/mobile: remove bleed and stack naturally */
@media (max-width: 980px){
  .menaffa-section--mosaic .menaffa-mosaic-layout{
    grid-template-columns: 1fr;
  }
  .menaffa-section--mosaic .menaffa-mosaic-media{
    margin-right: 0;
    justify-self: start;
    padding-right: 0;
  }
  .menaffa-section--mosaic .menaffa-carousel{
    max-width: 560px;
  }
}

/* =========================
   MOSAIK – tighten bleed + slimmer media box (override)
   ========================= */

.menaffa-section--mosaic .menaffa-mosaic-layout{
  grid-template-columns: minmax(460px, 620px) minmax(420px, 1fr);
}

/* less “far right” */
.menaffa-section--mosaic .menaffa-mosaic-media{
  margin-right: calc(-1 * clamp(12px, 4vw, 110px));
  padding-right: 12px;
}

/* smaller, less wide frame */
.menaffa-section--mosaic .menaffa-carousel{
  max-width: 520px;          /* was 640 */
  aspect-ratio: 3 / 4;       /* a bit slimmer than 4/5 */
}

/* If your carousel container has big padding, reduce it */
.menaffa-section--mosaic .menaffa-carousel-frame,
.menaffa-section--mosaic .menaffa-media-frame{
  padding: 14px;             /* adjust if you have a frame wrapper */
}

/* On very wide screens, still subtle */
@media (min-width: 1280px){
  .menaffa-section--mosaic .menaffa-mosaic-media{
    margin-right: -140px;    /* was -220 */
  }
}

/* =========================
   MOSAIK – break layout to the LEFT
   ========================= */

.menaffa-section--mosaic{
  position: relative;
}

/* Pull the entire inner layout left */
.menaffa-section--mosaic .menaffa-mosaic-layout{
  margin-left: calc(-1 * clamp(24px, 6vw, 120px));
}

/* Keep text readable + controlled */
.menaffa-section--mosaic .menaffa-mosaic-text{
  max-width: 520px; /* prevents over-wide paragraphs */
}

/* Optional: slightly larger title for editorial feel */
.menaffa-section--mosaic h2{
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.1;
}

/* =========================
   MOSAIK – remove side margins inside image
   ========================= */

.menaffa-section--mosaic .menaffa-carousel,
.menaffa-section--mosaic .menaffa-media-frame{
  padding-left: 0;
  padding-right: 0;
}

/* If images are wrapped in a slide */
.menaffa-section--mosaic .menaffa-carousel-slide{
  padding: 0;
}

/* Image itself fills the frame */
.menaffa-section--mosaic .menaffa-carousel img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* no weird crop */
}

/* Optional: keep only subtle top/bottom air */
.menaffa-section--mosaic .menaffa-media-frame{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* =========================
   MENAFFA – CTA SECTION
   ========================= */

.menaffa-cta {
  padding: 3.5rem 0 0.9rem; /* tighter top, still breathing */
  border-top: 1px solid rgba(0,0,0,.06);
  margin-bottom: 0;
}

.menaffa-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

/* Title */
.menaffa-cta-title {
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  line-height: 1.05;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}

/* Lead text */
.menaffa-cta-lede {
  margin: 0 0 2.4rem;
  font-size: 1.05rem;
  color: rgba(0,0,0,.72);
}

/* Options wrapper */
.menaffa-cta-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem 1.6rem;
  margin-bottom: 2.8rem;
}

/* Individual option */
.menaffa-chip {
  padding: 0.95rem 1.45rem;
  border-radius: 999px;
  border: 1.5px solid rgba(143,154,107,.55);
  background: transparent;
  color: #6E7752; /* muted olive */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.menaffa-chip:hover {
  background: rgba(143,154,107,.08);
  border-color: rgba(143,154,107,.9);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.menaffa-chip:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Whisper / promo line */
.menaffa-cta-whisper {
  font-size: 1.05rem;
  color: rgba(0,0,0,.65);
}

.menaffa-cta-whisper a {
  color: #6E7752;
  text-decoration: none;
  border-bottom: 1px solid rgba(143,154,107,.5);
  padding-bottom: 2px;
}

.menaffa-cta-whisper a:hover {
  border-color: rgba(143,154,107,.9);
}

/* =========================
   FAQ + Pflege — 1:1 Unser Atelier
   ========================= */

/* Page spacing */
.info-page {
  padding: 5.5rem 0 6rem;
  background: #fff;
}

.info-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Intro */
.info-head {
  max-width: 720px;
  margin-bottom: 3.5rem;
}

.info-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.6rem;
}

.info-title {
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
}

.info-sub {
  max-width: 46ch;
  color: var(--text-muted);
}

/* Layout like About */
.info-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 980px) {
  .info-grid {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 4.5rem;
  }
}

/* Sticky side nav */
.info-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sticky-gap));
  align-self: start;
}

.info-nav {
  border-left: 1px solid rgba(0,0,0,0.1);
  padding-left: 1rem;
}

.info-link {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  opacity: 0.65;
}

.info-link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sections */
.panel {
  padding-top: 2.5rem;
  margin-bottom: 4.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.panel-title {
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.4rem;
}

.panel-note {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Group labels */
.acc-group {
  margin: 2.2rem 0 0.8rem;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* =========================
   ACCORDION — THIN LINES ONLY
   ========================= */

details.acc-item {
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: transparent;
  margin-bottom: 0.8rem;
}

summary.acc-q {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 0;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

summary.acc-q::-webkit-details-marker {
  display: none;
}

/* minimal + / – */
summary.acc-q::after {
  content: "+";
  font-size: 1.1rem;
  opacity: 0.55;
}

details[open] > summary.acc-q::after {
  content: "–";
}

.acc-a {
  padding: 0 0 1.3rem;
  max-width: 640px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Pflege — editorial text block */
.care {
  max-width: 700px;
}

.care-lead {
  margin-bottom: 1.4rem;
}

.care-list {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  color: var(--text-muted);
}

/* CTA like Atelier ending */
.cta {
  max-width: 720px;
}

.cta-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.6rem;
}

.cta-title {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  margin-bottom: 0.8rem;
}

.cta-sub {
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 1.6rem;
}

.cta-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* =========================
   FAQ title alignment — desktop + mobile
   ========================= */

/* Same grid logic as content */
.info-head-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Mobile: title aligns with content naturally */
.info-title {
  max-width: 720px;
}

/* Desktop: push title into main column (like questions) */
@media (min-width: 980px) {
  .info-head-inner {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 4.5rem;
  }

  .info-head-inner .info-title {
    grid-column: 2;
  }
}

/* =========================
   FAQ title — force single line (clean)
   ========================= */

/* Default: one line */
.info-title {
  white-space: nowrap;
}

/* Desktop: genug Platz, große Type */
@media (min-width: 980px) {
  .info-title {
    font-size: clamp(2.6rem, 3.8vw, 3.2rem);
  }
}

/* Tablet & Mobile: leicht kleiner, bleibt eine Zeile */
@media (max-width: 979px) {
  .info-title {
    font-size: clamp(1.9rem, 5.5vw, 2.3rem);
  }
}

/* =========================
   FAQ spacing fix — title → first question
   ========================= */

/* reduce space under title block */
.is-faq .info-head {
  margin-bottom: 1.6rem; /* was ~3.5rem */
}

/* pull first section closer */
.is-faq .panel:first-of-type {
  padding-top: 1.2rem; /* was 2.5rem */
}

/* tighten group label spacing */
.is-faq .acc-group {
  margin-top: 1.4rem;  /* was 2.2rem */
}

/* =========================
   FAQ → Pflege Abstand fix
   ========================= */

/* weniger Abstand nach letzter FAQ-Sektion */
.is-faq #faq.panel {
  margin-bottom: 1rem; /* vorher ~4–4.5rem */
}

/* weniger Abstand vor Pflege-Sektion */
.is-faq #pflege.panel {
  padding-top: 1.2rem; /* vorher ~2.5rem */
}

/* =========================
   Pflegehinweise Headline
   ========================= */

.is-faq #pflege .panel-title {
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

/* =========================
   HOME HERO — HAJOX WORD (BOTTOM RIGHT, CLEAN)
   ========================= */

.home-hero-word--corner {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2.5rem);   /* further right */
  bottom: clamp(0.3rem, 2vw, 1.2rem);   /* lower */
  top: auto;
  left: auto;

  pointer-events: none;
  user-select: none;
  z-index: 2;
}




.home-hero-word--corner span {
  font-size: clamp(3rem, 18vw, 18rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.82;
  text-transform: uppercase;
  white-space: normal;

  /* CLEAN FILL */
 color: #111;
   text-shadow: 0 2px 4px rgba(0,0,0,0.25);

  /* remove all framing effects */
  -webkit-text-stroke: 0;
  text-stroke: 0;
  filter: none;
  opacity: 0.95;

}


/* =========================
   SHOP — Zara-like mobile grid
   ========================= */

.shop-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop default (adjust if you want) */
}

/* Mobile: 2 columns, tight, edgey */
@media (max-width: 720px){
  .collections .container{
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .shop-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-card{
    display: block;
  }

  /* Zara-ish image block */
  .product-media{
    position: relative;
    overflow: hidden;
    background: #f3f3f3;
  }

  .product-media img{
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;      /* portrait feel */
    object-fit: cover;
    display: block;
  }

  /* If you use hover-img, hide on mobile (no hover) */
  .product-media .hover-img{
    display: none;
  }

  /* Minimal text like Zara */
  .product-row{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    align-items: flex-start;
  }

  .product-name{
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .product-price{
    font-size: 12px;
    white-space: nowrap;
    opacity: 0.85;
  }

  .product-swatches{
    margin-top: 6px;
  }
}




/* =========================
   Unser Atelier – Kollaborationen
   ========================= */

#kollaborationen {
  margin-top: 4rem;
}

#kollaborationen h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.kollaborationen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 3rem;
}

.kollaboration-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kollaboration-item span:first-child {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.kollaboration-item span:last-child {
  font-size: 0.95rem;
}

/* Mobile */
@media (max-width: 720px) {
  .kollaborationen-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =========================
   MOBILE HEADER / BURGER
   ========================= */
@media (max-width: 760px){
  /* keep header row clean */
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* nav becomes hidden overlay panel (not inline) */
  .nav{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 1001;

    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);

    display: flex;
    flex-direction: column;
    gap: 1.1rem;

    padding: 1.2rem 1.5rem 1.6rem;

    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    white-space: nowrap;
  }

  .site-header.is-nav-open .nav{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* burger visible */
  .nav-toggle{
    display:inline-flex !important;
    border:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    width:44px;
    height:44px;
    padding:0;
    align-items:center;
    justify-content:center;
  }

  /* backdrop */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 1000;
  }
  .site-header.is-nav-open .nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* dropdown inside mobile menu */
  .dropdown{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0.3rem 0 0 0;
    background: transparent;
    display: none; /* closed by default */
  }
  .nav-dropdown.is-open .dropdown{
    display: block;
  }
}

/* =========================
   HAJOX — Burger icon visibility fix
   ========================= */

.nav-toggle{
  position: relative;
}

/* the middle line */
.nav-toggle-lines{
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: rgba(0,0,0,0.85) !important;
  border-radius: 2px;
  position: relative;
}

/* top + bottom lines */
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  width: 22px !important;
  height: 2px !important;
  background: rgba(0,0,0,0.85) !important;
  border-radius: 2px;
}

.nav-toggle-lines::before{ top: -7px; }
.nav-toggle-lines::after { top:  7px; }

/* optional: when open -> X */
.site-header.is-nav-open .nav-toggle-lines{
  background: transparent !important;
}
.site-header.is-nav-open .nav-toggle-lines::before{
  top: 0;
  transform: rotate(45deg);
}
.site-header.is-nav-open .nav-toggle-lines::after{
  top: 0;
  transform: rotate(-45deg);
}


/* =========================================
   FOOTER — mobile: show only
   Atelier + Öffnungszeiten + (FAQ/Pflege) + (Datenschutz/Impressum)
   ========================================= */
@media (max-width: 640px){

  /* Hide Kollektionen + Info columns */
  .footer-columns .footer-column:nth-child(1),
  .footer-columns .footer-column:nth-child(2){
    display: none;
  }

  /* Remove vertical brand (too tall for mobile) */
  .footer-vertical{
    display: none;
  }

  /* Make footer single-column but compact */
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-columns{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Make Atelier + Öffnungszeiten tighter */
  .footer-column h4{
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .footer-column li{
    font-size: 0.95rem;
    margin: 0.3rem 0;
    opacity: 0.8;
  }

  /* Öffnungszeiten inline rows */
  .footer-hours li{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  /* Footer bottom: stack and inline */
  .footer-bottom{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding-top: 1.2rem;
  }

  /* Legal links inline */
  .footer-legal{
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.9rem;
  }

  .footer-sep{
    display: none;
  }

}

/* =========================
   HAJOX — burger: mobile only (hard override)
   Put at VERY bottom of styles.css
   ========================= */
/* Desktop: ALWAYS hidden */
.nav-toggle{
  display: none !important;
}

/* Mobile: visible */
@media (max-width: 860px){
  .nav-toggle{
    display: inline-flex !important;
  }
}

/* =========================================
   ABOUT PAGE — mobile horizontal sticky subnav
   ========================================= */
@media (max-width: 820px){

  /* Stack grid */
  .about-grid{
    grid-template-columns: 1fr !important;
  }

  /* Sticky bar */
  .about-subnav{
    position: sticky;
    top: var(--header-h);
    z-index: 30;

    padding-top: 0 !important;
    padding-bottom: 0.6rem;

    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  /* Horizontal layout */
  .about-subnav{
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .about-subnav::-webkit-scrollbar{
    display: none;
  }

  .about-subnav a{
    display: inline-block;
    padding: 0.6rem 0;
    font-size: 0.95rem;
    opacity: 0.75;
  }

  .about-subnav a:hover{
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Fix scroll anchor offset */
  .about-section{
    scroll-margin-top: calc(var(--header-h) + 60px);
  }

}

/* =========================================
   MENAFFA — mobile horizontal sticky subnav
   ========================================= */
@media (max-width: 820px){

  .menaffa-grid{
    grid-template-columns: 1fr !important;
  }

  .menaffa-subnav{
    position: sticky;
    top: var(--header-h);
    z-index: 30;

    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    white-space: nowrap;

    padding: 0.6rem 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);

    scrollbar-width: none;
  }

  .menaffa-subnav::-webkit-scrollbar{
    display: none;
  }

  .menaffa-subnav a{
    display: inline-block;
    font-size: 0.95rem;
    opacity: 0.75;
  }

  .menaffa-subnav a:hover{
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Offset fix */
  .menaffa-section,
  .menaffa-hero{
    scroll-margin-top: calc(var(--header-h) + 60px);
  }
}

/* =========================================
   HAJOX — Mobile subnav polish
   - remove divider lines
   - fix spacing under header
   - prevent "cropped" feel on hero
   ========================================= */

@media (max-width: 820px){

  /* ---------- 1) Remove the line under the sticky section tabs ---------- */
  .about-subnav,
  .menaffa-subnav{
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* Give tabs a cleaner “floating” feel */
  .about-subnav a,
  .menaffa-subnav a{
    padding: 0.55rem 0 !important;
    opacity: 0.72;
  }

  /* ---------- 2) Fix the gap between header and tabs/content ---------- */
  /* About page has its own inline CSS padding (about.html) — override it for mobile */
  .about-page{
    padding-top: 1.2 !important;  /* was bigger */
  }

  /* Menaffa page: ensure content starts comfortably below tabs */
  .menaffa-page{
    padding-top: 0 !important;
  }

  /* Add a little breathing room between the sticky tab bar and the hero/title */
  .about-content,
  .menaffa-content{
    padding-top: 0.85rem !important;
  }

  /* ---------- 3) Remove section divider lines (About) ---------- */
  /* about.html adds borders + big spacing between sections — override on mobile */
  .about-section{
    border-bottom: 0 !important;
    margin-bottom: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .about-section:last-child{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ---------- 4) Menaffa “cropped” feel fix ---------- */
  /* If any parent has overflow hidden, titles/images can look clipped */
  .menaffa-hero,
  .menaffa-title,
  .menaffa-title-parts,
  .menaffa-shell,
  .menaffa-content{
    overflow: visible !important;
  }

  /* Small left/right safety padding so nothing kisses the edge on iPhone */
  .menaffa-shell,
  .about-shell{
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Optional: soften the horizontal rule that Safari sometimes draws via borders */
  .about-subnav,
  .menaffa-subnav{
    background: #fff;
  }
}

/* =========================================
   ABOUT — mobile sticky tabs: remove the gap
   (Overrides about.html inline rules)
   ========================================= */
@media (max-width: 820px){

  /* kill the desktop alignment trick */
  .about-subnav{
    top: var(--header-h) !important;      /* no sticky-gap on mobile */
    padding-top: 0 !important;           /* remove huge headline offset */
    margin-top: 0 !important;
  }

  /* optional: bring tabs closer to header */
  .about-grid{
    gap: 0.9rem !important;
  }

  /* make sure content doesn't slide under the tabs visually */
  .about-content{
    padding-top: 0.75rem !important;
  }
}

/* =========================================
   MENAFFA — Mobile: prevent overflow + keep sticky working
   ========================================= */
@media (max-width: 720px){

  /* Keep Menaffa subnav sticky on mobile */
  .menaffa-subnav{
    position: sticky;
    top: var(--header-h);
    margin-top: 0 !important;     /* cancel the 6rem push-down */
    padding-top: 0 !important;
    z-index: 30;
    background: #fff;
  }

  /* Make subnav horizontal like your current look */
  .menaffa-subnav{
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menaffa-subnav::-webkit-scrollbar{ display: none; }

  .menaffa-subnav a{
    display: inline-block;
    padding: 0.65rem 0;
    text-decoration: none;
  }
  .menaffa-subnav a:hover{
    text-decoration: none;
  }

  /* The main “cropping” culprit: 2-col intro becomes 1-col */
  .menaffa-intro-meta{
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
    margin: 2rem 0 2.5rem;
  }

  /* Make sure children are allowed to shrink */
  .menaffa-intro-meta > *{
    min-width: 0;
  }

  /* Floated image blocks can cause horizontal overflow on phones */
  .menaffa-float-media{
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1.25rem 0;
  }

  /* Any media wrapper: never exceed container */
  .menaffa-media,
  .menaffa-media img,
  .menaffa-geschichte-media img{
    max-width: 100%;
  }
}

/* =========================================
   MENAFFA — stop mobile horizontal overflow
   (main cause: .menaffa-float-media width + right margin)
   ========================================= */
@media (max-width: 820px){

  /* 1) kill the float block that pushes width beyond viewport */
  .menaffa-float-media{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.25rem 0 !important;   /* remove the 2rem right margin */
  }

  /* 2) stack the intro meta (good mobile rhythm) */
  .menaffa-intro-meta{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    margin: 2rem 0 2.5rem !important;
  }

  /* 3) safety: anything inside should be allowed to shrink */
  .menaffa-intro-meta > *{
    min-width: 0;
  }

  /* 4) images never exceed container */
  .menaffa-float-media img,
  .menaffa-media img,
  .menaffa-geschichte-media img{
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* =========================================
   MENAFFA — iPhone overflow fix (no zoom-out needed)
   Paste at VERY BOTTOM of styles.css
   ========================================= */
@media (max-width: 900px){

  /* allow grid children to shrink (prevents hidden overflow) */
  .menaffa-shell,
  .menaffa-grid,
  .menaffa-content,
  .menaffa-hero,
  .menaffa-copy{
    min-width: 0;
  }

  /* subnav: must NOT widen the page */
  .menaffa-subnav{
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .menaffa-subnav::-webkit-scrollbar{ display:none; }

  .menaffa-subnav a{
    display: inline-block;   /* ensures horizontal row doesn’t “block-stretch” */
    white-space: nowrap;
  }

  /* intro meta: force one column (your original is 2 cols always) */
  .menaffa-intro-meta{
    grid-template-columns: 1fr !important;
  }

  /* THE BIG ONE: fixed-width float must not exist on mobile */
  .menaffa-float-media{
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 1.25rem 0 !important;
  }

  /* media never exceeds container */
  .menaffa-float-media img,
  .menaffa-media img,
  .menaffa-geschichte-media img,
  img{
    max-width: 100%;
    height: auto;
  }

  /* safety: break long strings if any */
  .menaffa-page{
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* =========================================
   MENAFFA — Mosaic section overflow fix (mobile)
   ========================================= */
@media (max-width: 900px){

  /* 1) Stack text + media (prevents side-by-side squeeze/overflow) */
  .menaffa-mosaic-layout{
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }

  /* 2) Allow grid/flex children to actually shrink */
  .menaffa-mosaic-text,
  .menaffa-mosaic-media,
  .menaffa-carousel,
  .menaffa-frame{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 3) Clamp the carousel to its container */
  .menaffa-frame{
    overflow: hidden !important; /* important: prevents track from widening page */
  }

  .menaffa-carousel-track{
    max-width: 100% !important;
    overflow: hidden !important;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Slides/images must never exceed the frame */
  .menaffa-slide{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    -webkit-tap-highlight-color: transparent;
  }

  .menaffa-slide img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* Caption should wrap, never force width */
  .menaffa-caption{
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 720px){
  .home-editorial-hero{
    height: 260px;  /* try 240–320 */
    }

    .home-contact-mini {
      display: none;
    }
  }

/* =========================
   FOOTER — mobile layout
   ========================= */
@media (max-width: 720px) {
  /* Make footer columns a 2-col grid */
  .footer-columns{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
    align-items: start;
  }

  /* Slightly smaller type to fit nicely */
  .footer-column h4{
    font-size: 14px;
    margin-bottom: 10px;
  }
  .footer-column a,
  .footer-column li{
    font-size: 13px;
    line-height: 1.35;
  }

  /* Ensure Atelier + Öffnungszeiten land next to each other */
  .footer-column:nth-child(3){ grid-column: 1; }
  .footer-column:nth-child(4){ grid-column: 2; }

  /* Fix taps blocked by decorative footer elements */
  .footer-vertical{
    pointer-events: none;
  }

  .footer-columns,
  .footer-column a{
    position: relative;
    z-index: 2;
  }

}

/* Fix taps blocked by decorative footer elements */
.footer-vertical{
  pointer-events: none;
}

.footer-columns,
.footer-column a{
  position: relative;
  z-index: 2;
}
/* =========================
   FOOTER LINKS NOT CLICKABLE — FIX
   ========================= */

/* Any overlay/pseudo element must NOT catch clicks */
.site-footer::before,
.site-footer::after,
.footer-inner::before,
.footer-inner::after,
.footer-columns::before,
.footer-columns::after,
.footer-column::before,
.footer-column::after {
  pointer-events: none !important;
}

/* Decorative vertical HAJOX should never catch taps */
.footer-vertical {
  pointer-events: none !important;
}

/* Put the actual footer content above everything */
.site-footer,
.footer-inner,
.footer-columns,
.footer-column {
  position: relative;
  z-index: 1;
}

/* Force links to be clickable and on top */
.site-footer a {
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}

/* Desktop: keep existing footer look */
.legal-link.legal-faq,
.legal-link.legal-care {
  display: none;
}
@media (max-width: 720px) {
  /* don’t use fake text on mobile */
  .footer-legal::before {
    content: none !important;
  }

  /* show the real links on mobile */
  .legal-link.legal-faq,
  .legal-link.legal-care {
    display: inline !important;
  }

  /* make sure separators are visible on mobile */
  .footer-sep {
    display: inline !important;
    margin: 0 8px;
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* separators handle spacing */
    align-items: center;
  }
}

/* =========================
   FOOTER — mobile layout (clean)
   ========================= */
@media (max-width: 720px) {

  /* 2 columns like Zara */
  .footer-columns{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
    align-items: start;
  }

  /* keep all columns visible */
  .footer-columns .footer-column{
    display: block;
  }

  /* smaller type so “Atelier” + “Öffnungszeiten” fit nicely */
  .footer-column h4{
    font-size: 14px;
    margin-bottom: 10px;
  }

  .footer-column a,
  .footer-column li{
    font-size: 13px;
    line-height: 1.35;
  }

  /* Make rows in Öffnungszeiten align */
  .footer-hours li{
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  /* bottom row stacks on mobile */
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
/* =========================================
   FAQ — mobile horizontal sticky subnav
   ========================================= */
@media (max-width: 820px){

  .info-grid{
    grid-template-columns: 1fr !important;
  }

  .info-aside{
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 0.25rem 0;
  }

  .info-nav{
    border-left: 0;
    padding-left: 0;
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .info-nav::-webkit-scrollbar{ display: none; }

  .info-link{
    padding: 0.6rem 0;
    font-size: 0.95rem;
    opacity: 0.75;
  }

  .info-link:hover{
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* anchor offset so headings don’t hide under sticky bars */
  #faq, #pflege{
    scroll-margin-top: calc(var(--header-h) + 70px);
  }
}

@media (max-width: 720px){
  .footer-legal::before{
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 520px){
  .footer-columns{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 16px !important;
  }
}

/* =========================
   Intro carousel: natural image sizing (no fixed frame)
   ========================= */

.menaffa-carousel--intro{
  aspect-ratio: auto !important;   /* remove fixed 4/5 frame */
  max-width: none !important;      /* let it fill the layout like before */
  overflow: hidden;
}

.menaffa-carousel--intro .menaffa-carousel-track{
  height: auto !important;         /* don’t force 100% height */
}

.menaffa-carousel--intro .menaffa-slide{
  height: auto !important;         /* don’t force slide to frame height */
  -webkit-tap-highlight-color: transparent;
}

.menaffa-carousel--intro .menaffa-slide img{
  height: auto !important;         /* natural height */
  object-fit: cover !important;    /* fills width like your old figure */
  background: transparent !important;
}

/* =========================================
   Geschichte mini-carousel (replaces float media)
   ========================================= */

/* Desktop: float like the old figure */
.menaffa-copy .menaffa-float-media.menaffa-carousel{
  float: left;
  width: 320px;
  max-width: 100%;
  margin: 0.25rem 2rem 1.25rem 0;
}

/* Make sure it looks like an editorial frame */
.menaffa-copy .menaffa-float-media.menaffa-carousel img{
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: no float (prevents the “cropped/zoom out” issue) */
@media (max-width: 820px){
  .menaffa-copy .menaffa-float-media.menaffa-carousel{
    float: none;
    width: 100%;
    margin: 1.25rem 0;
  }
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;   /* prevents nav from pushing it */
}

.logo a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.logo-mark {
  height: 50px; /* adjust if needed */
  width: auto;
  display: block;
}

.logo-text {
  line-height: 1;
    font-size: 1.35rem;  /* was ~1.1rem */
    letter-spacing: 0.18em;
}

/* =========================
   HEADER — force desktop row layout
   (prevents mobile overlay rules from leaking)
   ========================= */
@media (min-width: 721px){
  .nav{
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;

    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;

    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .nav-backdrop{
    display: none !important;
  }

  .nav-toggle{
    display: none !important;
  }

  .header-inner{
    flex-wrap: nowrap !important;
  }
}

.swatches {
  display: flex;
  gap: 2rem;
  margin-top: 0.8rem;
}

.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.swatch-name {
  font-size: 0.9rem;
  color: #6b6b6b;
}


.home-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* HERO IMAGE — better mobile framing */
.home-hero-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 55%; /* desktop default focus (tweak if needed) */
  transform: translateY(var(--hero-img-y, 0));
}

/* =========================
   HOME HERO — HAJOX WORD (CENTERED, NO CROP)
   ========================= */

.home-hero-word--corner{
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;

  bottom: clamp(0.6rem, 2vw, 1.4rem);
  transform: translateX(-50%);

  width: 100vw;
  text-align: center;

  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.home-hero-word--corner span{
  display: block;
  width: 100%;

  /* Big, but sized to fit the viewport (prevents X cropping) */
  font-size: clamp(5.8rem, 18vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  white-space: nowrap;

  color: #111;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);

  -webkit-text-stroke: 0;
  text-stroke: 0;
  filter: none;
  opacity: 0.90;
}

/* =========================
   HOME HERO — mobile: image then HAJOX right under it
   ========================= */
@media (max-width: 768px){

  /* stop the sticky 120vh layout on mobile */
  .home-hero{
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-hero-sticky{
    position: relative !important;
    height: auto !important;
    overflow: visible !important; /* IMPORTANT: allow text to not get clipped */
  }

  /* your image block becomes normal flow */
  .home-hero-media{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
  }

  /* if you're using an <img class="home-hero-image"> */
  .home-hero-image{
    width: 100%;
    height: auto !important;
    display: block;
    object-fit: cover;
    transform: none !important;
  }

  /* place the word UNDER the image */
  .home-hero-word--corner{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0.35rem 0 0.9rem !important;
    background: #fff; /* clean strip like your screenshot */
  }

  .home-hero-word--corner span{
    width: 100%;
    text-align: center;
    font-size: 29vw;          /* big, full-width feeling */
    letter-spacing: -0.05em;  /* keeps it from widening + cropping */
    padding-inline: 4vw;      /* ensures the X is always visible */
  }
}
@media (max-width: 620px) {
  /* keep the rail item size nice and swipeable */
  .rail-track {
    grid-auto-columns: 78vw; /* or 74vw..84vw */
    gap: 1rem;
    padding: 0 1.25rem;
    scroll-padding-left: 1.25rem;
    scroll-padding-right: 1.25rem;
  }

  .rail-track .product-media {
     aspect-ratio: 3 / 4; /* keep your layout */
   }

   .rail-track .product-media img,
   .rail-track .product-media .hover-img {
     object-fit: cover;
     object-position: 50% 15%; /* move focus up a bit */
     background: transparent;
   }

  /* optional: hide arrows on mobile */
  .rail-arrow { display: none; }
}

@media (max-width: 620px) {
  .home-rail { padding-top: 2rem; } /* tweak */
}