/* Alle Marken-Variablen werden mit Rückfallwert benutzt: var(--x, wert).
   Falls styles.css einmal ohne diese Variablen kommt, sieht der Shop
   trotzdem richtig aus. */
/* ==========================================================================
   WOODPULSE — Shop
   Eigene Datei, damit shop.html und shop/*.html unabhängig von styles.css
   bleiben. Übersicht ist bewusst ein Lookbook: keine Kauf-Elemente in der
   Liste, die Entscheidung fällt auf der Produktseite.
   ========================================================================== */

/* =============================================================== Werkzeuge = */
.shoptools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem;
  padding-bottom: clamp(1.2rem, 2vw, 1.8rem);
  border-bottom: 1px solid var(--c-line, #e5ded5);
}
.shoptools .filters { padding-bottom: 0; border-bottom: none; }

.sizepick { position: relative; display: inline-flex; align-items: baseline; gap: .7rem; }
.sizepick__label {
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-text-soft, #6f6a64); white-space: nowrap;
}
.sizepick__field { position: relative; }

.sizepick__btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .12em 0 .3em; background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--c-text, #2b2926);
  font-family: var(--f-display, "Cormorant Garamond", Georgia, serif); font-size: 1.22rem; color: var(--c-text, #2b2926);
  transition: border-color .3s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.sizepick__btn:hover { border-color: var(--c-accent-dark, #c9b4a0); }
.sizepick__btn:focus-visible { outline: 2px solid var(--c-green, #1c302d); outline-offset: 5px; }
.sizepick__field:not(.has-value) .sizepick__value { color: var(--c-text-soft, #6f6a64); }
.sizepick__chev {
  width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.4;
  transition: transform .3s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.sizepick__field.is-open .sizepick__chev { transform: rotate(180deg); }

.sizepick__menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60;
  min-width: 15rem; margin: 0; padding: .45rem; list-style: none;
  background: #fff; border: 1px solid var(--c-line, #e5ded5); border-radius: var(--radius, 16px);
  box-shadow: 0 22px 50px rgba(20,19,15,.13), 0 2px 6px rgba(20,19,15,.05);
  max-height: min(60vh, 420px); overflow-y: auto;
  animation: sizepickIn .22s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.sizepick__menu:focus { outline: none; }
@keyframes sizepickIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .sizepick__menu { animation: none; } }

.sizepick__opt {
  position: relative; cursor: pointer;
  padding: .6em 1em .6em 2.1em; border-radius: var(--radius-sm, 10px);
  font-family: var(--f-display, "Cormorant Garamond", Georgia, serif); font-size: 1.08rem; color: var(--c-text, #2b2926);
  white-space: nowrap;
  transition: background .2s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.sizepick__opt:first-child { color: var(--c-text-soft, #6f6a64); }
.sizepick__opt.is-active { background: var(--c-bg-soft, #fcf7f3); }
.sizepick__opt.is-on::before {
  content: ""; position: absolute; left: .95em; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--c-green, #1c302d);
}

.shopbar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.6rem;
  margin-top: clamp(16px, 2.2vw, 24px);
}
.shopbar__count {
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-text, #2b2926);
}
.shopbar__note { font-size: .9rem; color: var(--c-text-soft, #6f6a64); }

/* ================================================================ Lookbook = */
.shopgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(20px, 2.6vw, 44px);
  row-gap: clamp(40px, 5.5vw, 88px);
  margin-top: clamp(38px, 5vw, 72px);
}
.pcard {
  display: flex; flex-direction: column;
  cursor: pointer;
}
.pcard[hidden] { display: none; }
.pcard.is-offset { margin-top: clamp(0px, 3.4vw, 64px); }

.pcard__media {
  position: relative; display: block;
  margin-bottom: 1.5rem;
  border-radius: var(--radius, 16px); overflow: hidden;
  background: var(--c-bg-card, #f6f1ec);
}
.pcard__media .figure { border-radius: var(--radius, 16px); }
.pcard__media .figure img { transition: transform 1.1s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.pcard:hover .pcard__media .figure img { transform: scale(1.035); }

.pcard__hover {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .7s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.pcard:hover .pcard__hover { opacity: 1; }
@media (hover: none) { .pcard__hover { display: none; } }

.pcard__count {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  background: rgba(20,19,15,.44); color: #fff;
  backdrop-filter: blur(6px);
  border-radius: 99px; padding: .38em .95em;
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .72rem; letter-spacing: .1em;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease, cubic-bezier(.22,.61,.36,1)), transform .4s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.pcard:hover .pcard__count { opacity: 1; transform: none; }

.pcard__meta {
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-text-soft, #6f6a64);
  margin-bottom: .55rem;
}
.pcard__name { font-size: clamp(1.45rem, 1.9vw, 1.78rem); font-weight: 400; margin-bottom: .45rem; }
.pcard__name a { background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease, cubic-bezier(.22,.61,.36,1)); padding-bottom: 2px; }
.pcard:hover .pcard__name a { background-size: 100% 1px; }

.pcard__desc { color: var(--c-text-soft, #6f6a64); font-size: .99rem; max-width: 42ch; }

.pcard__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 1.4rem;
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--c-line, #e5ded5);
}
.pcard__price { font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: 1.12rem; color: var(--c-text, #2b2926); }
.pcard__from { font-size: .82rem; color: var(--c-text-soft, #6f6a64); letter-spacing: .06em; }
.pcard__for  { font-size: .82rem; color: var(--c-text-soft, #6f6a64); }
.pcard__link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .88rem; color: var(--c-text, #2b2926);
}
.pcard__link svg { width: 20px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .4s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.pcard:hover .pcard__link svg { transform: translateX(6px); }

/* ================================================= Hilfe-Band (dunkelgrün) = */
.band-green {
  background: var(--c-green, #1c302d); color: var(--c-text-invert, #f4f1ec);
  padding-block: clamp(52px, 6.6vw, 96px);
}
.shophelp {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 80px);
}
.shophelp__item + .shophelp__item { border-left: 1px solid rgba(244,241,236,.18); padding-left: clamp(28px, 4vw, 80px); }
.shophelp__item h3 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); font-weight: 400; margin-bottom: .7rem; }
.shophelp__item p { color: rgba(244,241,236,.74); max-width: 44ch; margin-bottom: 1.6rem; }
.band-green .btn--ghost { border-color: rgba(244,241,236,.5); color: var(--c-text-invert, #f4f1ec); }
.band-green .btn--ghost:hover { background: var(--c-text-invert, #f4f1ec); color: var(--c-green, #1c302d); border-color: var(--c-text-invert, #f4f1ec); }

/* ---------------------------------------------------------- Vorteilsband - */
.benefits--three { grid-template-columns: repeat(3, 1fr); }
.benefits--three .benefit { padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.benefits--three .benefit h3 { margin-bottom: .6rem; }
.benefits--three .benefit p { color: var(--c-text-soft, #6f6a64); font-size: .97rem; }

/* ------------------------------------------------------------ Brotkrümel - */
.crumbs {
  padding-top: calc(var(--header-h, 84px) + clamp(18px, 2.6vw, 34px));
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .84rem; color: var(--c-text-soft, #6f6a64);
}
.crumbs .wrap { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line, #e5ded5); }
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs span:last-child { color: var(--c-text, #2b2926); }

/* ---------------------------------------------------------- Produktseite - */
.size {
  padding: .55em 1.05em;
  border: 1px solid var(--c-line, #e5ded5); border-radius: var(--radius-btn, 10px);
  background: #fff; cursor: pointer;
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .92rem; color: var(--c-text, #2b2926);
  transition: background .25s var(--ease, cubic-bezier(.22,.61,.36,1)), color .25s var(--ease, cubic-bezier(.22,.61,.36,1)),
              border-color .25s var(--ease, cubic-bezier(.22,.61,.36,1)), transform .25s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.size:hover { border-color: var(--c-text, #2b2926); }
.size.is-on { background: var(--c-text, #2b2926); color: #fff; border-color: var(--c-text, #2b2926); }

.pdp { padding-block: clamp(24px, 3.4vw, 44px) clamp(56px, 7vw, 96px); }
.pdp__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
}

.gallery__main { border-radius: var(--radius, 16px); }
.gallery__main img { transition: opacity .35s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.gthumb {
  padding: 0; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm, 10px); overflow: hidden;
  opacity: .62; transition: opacity .3s var(--ease, cubic-bezier(.22,.61,.36,1)), outline-color .3s var(--ease, cubic-bezier(.22,.61,.36,1));
  outline: 3px solid transparent; outline-offset: 3px;
}
.gthumb .figure { border-radius: var(--radius-sm, 10px); }
.gthumb:hover { opacity: 1; outline-color: rgba(47,90,78,.35); }
.gthumb:focus-visible { outline-color: var(--c-green, #1c302d); }
/* Aktive Miniatur: Markengrün, etwas aufgehellt – reines #1C302D liest sich
   in 3 px Strichstärke fast schwarz. */
.gthumb.is-on { opacity: 1; outline-color: #2f5a4e; }
.gthumb.is-on { outline-color: color-mix(in srgb, var(--c-green, #1c302d) 62%, #74a394); }

.pdp__buy { position: sticky; top: calc(var(--header-h, 84px) + 20px); }
.pdp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.pdp__tag {
  background: var(--c-bg-card, #f6f1ec); color: var(--c-text, #2b2926);
  border-radius: 99px; padding: .35em .85em;
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.pdp__buy h1 { margin-bottom: .45rem; }
.pdp__tagline { color: var(--c-text-soft, #6f6a64); font-size: 1.08rem; }

.pdp__price { font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: 1.5rem; margin-top: 1.5rem; }
.pdp__vat { font-size: .84rem; color: var(--c-text-soft, #6f6a64); margin-top: .3rem; }

.pdp__label {
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-text-soft, #6f6a64); margin: 1.9rem 0 .8rem;
}
.pdp__label span { text-transform: none; letter-spacing: .02em; opacity: .8; }
.pdp .product__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.4rem; }
.pdp__add { width: 100%; }
.pdp__ask { width: 100%; margin-top: .7rem; }
.pdp__hint { font-size: .86rem; color: #9a3b30; margin-top: .6rem; }

.pdp__intro { margin-top: 1.9rem; color: var(--c-text-soft, #6f6a64); }
.pdp__high {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: .6rem;
  border-top: 1px solid var(--c-line, #e5ded5); padding-top: 1.3rem;
}
.pdp__high li { position: relative; padding-left: 1.5rem; color: var(--c-text-soft, #6f6a64); font-size: .97rem; }
.pdp__high li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent, #d9c7b6);
}
.pdp__custom {
  margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--c-line, #e5ded5);
  font-size: .92rem; color: var(--c-text-soft, #6f6a64);
}
.pdp__custom a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- Datenblatt - */
.pdp__more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 84px); align-items: start; }
.pdp__story .h-section { margin-bottom: 1.2rem; }
.pdp__story p { color: var(--c-text-soft, #6f6a64); }

.specs { margin: 0; display: grid; gap: 0; }
.spec {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1rem;
  padding-block: .95rem; border-bottom: 1px solid var(--c-line, #e5ded5);
}
.spec:first-child { border-top: 1px solid var(--c-line, #e5ded5); }
.spec dt {
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-text-soft, #6f6a64); align-self: center;
}
.spec dd { margin: 0; color: var(--c-text, #2b2926); }

/* -------------------------------------------------------------- Ähnliche - */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.relcard { display: flex; flex-direction: column; }
.relcard .figure { margin-bottom: 1.05rem; border-radius: var(--radius, 16px); }
.relcard h3 { margin-bottom: .3rem; }
.relcard__desc { color: var(--c-text-soft, #6f6a64); font-size: .95rem; margin-bottom: .9rem; }
.relcard .product__more { margin-top: auto; }

/* ------------------------------------------------------------ Responsive - */
@media (max-width: 1000px) {
  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__buy { position: static; }
  .pdp__more { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .shopgrid { grid-template-columns: repeat(2, 1fr); }
  .pcard.is-offset { margin-top: 0; }
  .pcard:nth-child(even) { margin-top: clamp(0px, 3vw, 48px); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .shopgrid { grid-template-columns: 1fr; row-gap: clamp(44px, 9vw, 64px); }
  .pcard:nth-child(even) { margin-top: 0; }
  .steps { grid-template-columns: 1fr; }
  .sizepick { width: 100%; }
  .sizepick__menu { left: 0; right: auto; }
  .pcard.is-offset { margin-top: 0; }
  .shophelp { grid-template-columns: 1fr; }
  .shophelp__item + .shophelp__item { border-left: none; padding-left: 0; padding-top: clamp(24px, 6vw, 36px); border-top: 1px solid rgba(244,241,236,.18); }
  .shoptools { flex-direction: column; align-items: flex-start; }
  .related { grid-template-columns: 1fr; }
  .gallery__thumbs { grid-template-columns: repeat(5, 1fr); }
  .spec { grid-template-columns: 1fr; gap: .2rem; }
  .shopbar { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

/* ============================================================ Seitenhero = */
/* Linksbündig festgezurrt: styles.css zentriert den Hero, das soll hier
   nicht durchschlagen – auch nicht, wenn styles.css später wieder wechselt. */
.hero.hero--page {
  min-height: min(64svh, 620px);
  place-items: center stretch;
  text-align: left;
}
.hero.hero--page .hero__inner {
  text-align: left; width: 100%;
  max-width: var(--wrap, 1240px); margin-inline: auto;   /* bündig mit .wrap darunter */
}
.hero.hero--page .h-display,
.hero.hero--page .hero__sub,
.hero.hero--page .eyebrow { margin-inline: 0; justify-content: flex-start; }
.hero--page .hero__inner { padding-block: calc(var(--header-h, 84px) + 3.5rem) 4rem; }
.hero--page .h-display { font-size: clamp(2.2rem, 4.6vw, 3.9rem); max-width: 20ch; }
.hero--page .hero__sub { margin-top: 1.1rem; max-width: 46ch; }
.hero--page .eyebrow--light { color: rgba(255,255,255,.82); margin-bottom: 1.2rem; }
.hero--page .eyebrow--light::before, .hero--page .eyebrow--light::after { background: rgba(255,255,255,.5); }


.shopintro { padding-block: clamp(44px, 6vw, 86px) clamp(8px, 1vw, 16px); }
.shopintro .lead { color: var(--c-text-soft, #6f6a64); max-width: 62ch; }

/* =========================================================== Piktogramme = */
.benefits--three .benefit svg {
  width: 46px; height: 46px; margin: 0 auto 1.2rem;
  stroke: var(--c-text, #2b2926); fill: none; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.benefits--three .benefit p a {
  display: inline-block; margin-top: .2rem;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--c-text-soft, #6f6a64);
}
.benefits--three .benefit p a:hover { text-decoration-color: currentColor; }

/* =============================================================== Prozess = */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.step { border-top: 1px solid var(--c-line, #e5ded5); padding-top: 1.4rem; }
.step__num {
  font-family: var(--f-ui, "EB Garamond", Georgia, serif); font-size: .76rem; letter-spacing: .2em; color: var(--c-text-soft, #6f6a64);
}
.step h3 { margin: .55rem 0 .55rem; font-size: 1.4rem; font-weight: 400; }
.step p { color: var(--c-text-soft, #6f6a64); font-size: .97rem; }


/* Mindestschriftgröße auf dem Handy – dieselbe Regel wie in styles.css, hier
   noch einmal, weil shop.css danach geladen wird und sonst gewinnt. */
@media (max-width: 620px) {
  .pcard__count, .pcard__meta, .pcard__from, .pcard__for { font-size: .75rem; }
}