/* ============================================
   BecauseMe Shop — Page Styles
   ============================================ */

/* ---------- STICKY TAB-LEISTE ---------- */
.shop-tabs {
  position: sticky;
  top: 84px; /* unterhalb der fixed nav.top */
  z-index: 50;
  background: rgba(232, 220, 196, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  margin-top: 20px;
}
@media (max-width: 1100px) { .shop-tabs { top: 76px; } }
@media (max-width: 600px)  { .shop-tabs { top: 68px; margin-top: 0; } }

.shop-tabs-inner {
  display: flex;
  gap: 44px;
  padding: 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-tabs-inner::-webkit-scrollbar { display: none; }
@media (max-width: 820px) { .shop-tabs-inner { gap: 28px; padding: 14px 0; } }

.shop-tab {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  transition: color .3s;
  flex-shrink: 0;
  cursor: pointer;
}
.shop-tab::before {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  transition: left .35s ease, right .35s ease, opacity .3s ease;
}
.shop-tab:hover { color: var(--ink); }
.shop-tab:hover::before { left: 0; right: 0; opacity: 0.5; }
.shop-tab.active { color: var(--ink); font-weight: 600; }
.shop-tab.active::before { display: none; }
.shop-tab.active::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 0; right: 0;
  height: 2px;
  background: var(--gold-bright);
}
@media (max-width: 820px) {
  .shop-tab.active::after, .shop-tab::before { bottom: -15px; }
}

/* ---------- KATEGORIE-SECTIONS ---------- */
.shop-section {
  padding: 100px 0;
  scroll-margin-top: 140px; /* nav + sticky tabs */
}
.shop-section--alt { background: var(--bg-2); }

.shop-section .section-head {
  max-width: 720px;
  margin-bottom: 56px;
  position: relative;
}
.shop-section .section-head h2 {
  margin-top: 18px;
}
.shop-section .section-head p {
  color: var(--ink-muted);
  margin-top: 20px;
  font-size: 1.02rem;
  max-width: 560px;
}

/* Buy Button Wrapper: subtiler Lift beim Hover (nur wenn Produkte da) */
.buy-button-wrapper:not(:has(.placeholder-tile)) {
  transition: transform .5s ease;
}
.buy-button-wrapper:hover:not(:has(.placeholder-tile)) {
  transform: translateY(-2px);
}

/* ---------- MOBILE ACCORDION ---------- */
@media (max-width: 720px) {
  .shop-section {
    padding: 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 130px;
  }
  .shop-section:last-of-type { border-bottom: none; }

  .shop-section .section-head {
    margin-bottom: 0;
    padding: 28px 0;
    padding-right: 48px; /* Platz fürs Chevron */
    max-width: none;
  }
  .shop-section .section-head h2 {
    font-size: 1.5rem;
    margin-top: 10px;
  }
  .shop-section .section-head p {
    margin-top: 12px;
    font-size: 0.92rem;
  }

  /* Plus/Minus-Chevron rechts */
  .shop-section .section-head::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--gold);
    font-weight: 300;
    transition: transform .4s;
    line-height: 1;
  }
  .shop-section:not(.collapsed) .section-head::after {
    transform: translateY(-50%) rotate(45deg);
  }

  /* Zugeklappter Zustand: Produkte + Beschreibung verstecken */
  .shop-section.collapsed .buy-button-wrapper {
    display: none;
  }
  .shop-section.collapsed .section-head p {
    display: none; /* auf Mobile im eingeklappten Zustand: nur Titel */
  }

  /* Produktbereich bekommt unten padding wenn offen */
  .shop-section:not(.collapsed) .buy-button-wrapper {
    padding-bottom: 40px;
  }
}

/* ---------- BUY BUTTON WRAPPER ---------- */
.buy-button-wrapper { position: relative; min-height: 200px; }

/* ---------- PLACEHOLDER (für noch nicht eingebundene Sammlungen) ---------- */
.placeholder-tile {
  padding: 80px 40px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  background: rgba(245, 239, 228, 0.5);
}
.placeholder-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 600;
}
.placeholder-hint {
  color: var(--ink-muted);
  font-size: 0.92rem;
  max-width: 420px;
  margin: 0 auto;
}

/* ---------- SHOP-NOTICE (DSGVO-Hinweis unten) ---------- */
.shop-notice {
  padding: 26px 0;
  background: var(--bg-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shop-notice p {
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.55;
}
.shop-notice a { color: var(--gold); text-decoration: underline; }
.shop-notice a:hover { color: var(--gold-bright); }

/* ---------- SHOPIFY BUY BUTTON OVERRIDES ---------- */
/* Shopify rendert manche Elemente direkt ins DOM — die können wir stylen.
   Andere (Modal, Cart) laufen in iframes und kriegen ihre Styles über das
   options-Objekt im Embed-Code (siehe shop.html).
   Nur Elemente, die Shopify NICHT in iframes packt, können hier überschrieben werden. */

.shopify-buy-frame {
  font-family: 'Manrope', sans-serif !important;
}

/* Buy Button Container: eigener Abstand & Reset */
.shopify-buy__product-wrapper,
.shopify-buy__collection {
  font-family: 'Manrope', sans-serif !important;
}

/* Produkttitel (direktes DOM, nicht im iframe) */
.shopify-buy__product__title {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
}

/* Preis */
.shopify-buy__product__price {
  font-family: 'Manrope', sans-serif !important;
  color: var(--ink-muted) !important;
  font-weight: 400 !important;
}

/* Produktbild-Rahmen (leicht) */
.shopify-buy__product__variant-img {
  border-radius: 0 !important;
}