/* ============================================================
   Goldschmiede Fortuna — shared styles
   ============================================================ */
:root { --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); }

html { scroll-behavior: smooth; }
body { background-color: #FBF8F2; }
/* No accidental horizontal scroll / white edge on mobile */
html, body { overflow-x: hidden; max-width: 100%; }
/* Wrapper must not box the injected header, or position:sticky has no travel room
   (sticky is constrained by its parent's height). display:contents -> body is the
   containing block, so the header stays pinned across the whole page. */
#site-header, #site-footer { display: contents; }

/* Hide Google Translate widget chrome (we drive it from our own language button) */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, .skiptranslate iframe,
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-te-spinner-pop { display: none !important; }
.goog-te-gadget { font-size: 0 !important; }
#google_translate_element { display: none !important; }
body { top: 0 !important; position: static !important; }
font { background-color: transparent !important; box-shadow: none !important; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
.js .reveal.in { opacity: 1; transform: translateY(0); }

/* Depth: layered radial gradients + grain */
.bg-atelier {
  background-color: #FBF8F2;
  background-image:
    radial-gradient(60rem 60rem at 88% -10%, rgba(217,183,121,.30), transparent 60%),
    radial-gradient(48rem 48rem at -8% 12%, rgba(235,217,180,.40), transparent 55%),
    radial-gradient(70rem 50rem at 50% 120%, rgba(200,162,75,.16), transparent 60%);
}
.bg-soft {
  background-color: #FBF8F2;
  background-image:
    radial-gradient(50rem 40rem at 100% 0%, rgba(217,183,121,.20), transparent 60%),
    radial-gradient(40rem 40rem at 0% 100%, rgba(235,217,180,.28), transparent 55%);
}
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, rgba(182,138,62,.55), transparent); }

/* ---------- Header / nav ---------- */
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: linear-gradient(90deg, #C8A24B, #7E5C24);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-spring);
}
.navlink:hover::after, .navlink:focus-visible::after, .navlink[aria-expanded="true"]::after { transform: scaleX(1); }

/* Mega menu */
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(251,248,242,.98); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(182,138,62,.18);
  box-shadow: 0 30px 50px -30px rgba(42,38,32,.5);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .35s var(--ease-spring), transform .35s var(--ease-spring), visibility .35s;
  z-index: 40;
}
.mega.open,
.has-mega:hover .mega,
.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-link { transition: color .25s, transform .25s var(--ease-spring); display: inline-block; }
.mega-link:hover { color: #9C7430; transform: translateX(3px); }

/* ---------- Buttons ---------- */
.btn-gold { background: linear-gradient(135deg, #C8A24B, #9C7430); transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), filter .35s var(--ease-spring); }
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 34px -14px rgba(124,92,36,.7); }
.btn-gold:active { transform: translateY(0); }
.btn-ghost { transition: transform .35s var(--ease-spring), color .35s var(--ease-spring), border-color .35s var(--ease-spring); }
.btn-ghost:hover { transform: translateY(-2px); border-color: #B68A3E; color: #7E5C24; }

/* ---------- Category tiles ---------- */
.tile { position: relative; overflow: hidden; }
.tile img { transition: transform .7s var(--ease-spring); will-change: transform; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); }
.tile-overlay { background: linear-gradient(to top, rgba(20,17,12,.78) 0%, rgba(20,17,12,.20) 45%, rgba(20,17,12,0) 75%); }
.tile-label { transform: translateY(0); transition: transform .5s var(--ease-spring); }
.tile:hover .tile-label, .tile:focus-visible .tile-label { transform: translateY(-6px); }
.tile-cta { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-spring), transform .5s var(--ease-spring); }
.tile:hover .tile-cta, .tile:focus-visible .tile-cta { opacity: 1; transform: translateY(0); }

/* ---------- Product cards ---------- */
.pcard { transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease-spring); }
.pcard:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(42,38,32,.45); }
.pcard img { transition: transform .6s var(--ease-spring); }
.pcard:hover img { transform: scale(1.05); }
.chip { transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-spring); }
.chip:hover { transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, #C8A24B, #9C7430); color: #fff; border-color: transparent; }

/* ---------- Swipe gallery ---------- */
.gallery-track {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; }
.gallery-dot { transition: transform .3s var(--ease-spring), background-color .3s; }
.gallery-dot.active { background: #9C7430; transform: scale(1.4); }
.gallery-thumb { transition: border-color .3s, opacity .3s; opacity: .55; }
.gallery-thumb.active { opacity: 1; border-color: #B68A3E; }
.gallery-arrow { transition: transform .3s var(--ease-spring), background-color .3s, opacity .3s; }
.gallery-arrow:hover { transform: translateY(-50%) scale(1.08); }

/* ---------- Floating actions ---------- */
.fab { transition: transform .4s var(--ease-spring), opacity .4s var(--ease-spring), box-shadow .35s var(--ease-spring); }
.fab:hover { transform: translateY(-3px) scale(1.04); }
#toTop { opacity: 0; transform: translateY(12px); pointer-events: none; }
#toTop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Cart drawer ---------- */
#cartDrawer { transition: transform .45s var(--ease-spring); transform: translateX(100%); }
#cartDrawer.open { transform: translateX(0); }
#cartBackdrop { transition: opacity .4s; }

/* ---------- Toast ---------- */
.toast { transition: transform .4s var(--ease-spring), opacity .4s; transform: translateY(20px); opacity: 0; }
.toast.show { transform: translateY(0); opacity: 1; }

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.anim { opacity: 0; animation: fadeUp .9s var(--ease-spring) forwards; }
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}.d4{animation-delay:.44s}.d5{animation-delay:.57s}

@media (prefers-reduced-motion: reduce) {
  .anim, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .tile img, .navlink::after, .pcard, .pcard img { transition: none; }
  html { scroll-behavior: auto; }
  .gallery-track { scroll-behavior: auto; }
}