/* ============================================================
   Oh my Gogh! — storefront styles
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #F3EDDD;
  color: #15315C;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: #E0A93A; color: #15315C; }
a { color: inherit; }
img { max-width: 100%; }

/* ---- keyframes ---- */
@keyframes ftFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes ftBob { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-7px) rotate(3deg)} }
@keyframes ftRise { 0%{opacity:0;transform:translateY(28px)} 100%{opacity:1;transform:none} }
@keyframes ftStroke { from{stroke-dashoffset:2600} to{stroke-dashoffset:0} }
@keyframes ftMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes ftBlob { 0%,100%{border-radius:46% 54% 56% 44%/52% 48% 52% 48%} 50%{border-radius:56% 44% 42% 58%/44% 56% 44% 56%} }
@keyframes ftDip { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes ftViewIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes ftMenuIn { from{opacity:0;transform:translateY(-8px) scale(.98)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }

.view-anim { animation: ftViewIn .5s cubic-bezier(.16,1,.3,1); }

/* ---- responsive header / mobile nav ---- */
.omg-burger { display: none; }
@media (max-width: 760px) {
  .omg-header { padding: 10px 16px !important; gap: 8px !important; }
  .omg-wordmark { font-size: 22px !important; }
  .omg-emblem-nav { width: 36px !important; height: 36px !important; }
  .omg-burger { display: flex !important; }
  .omg-nav {
    position: fixed !important; top: 62px !important; right: 12px !important; left: 12px !important;
    flex-direction: column !important; align-items: stretch !important; gap: 4px !important;
    background: rgba(243,237,221,0.98) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(21,49,92,0.14) !important; border-radius: 20px !important; padding: 10px !important;
    box-shadow: 0 24px 50px -20px rgba(14,35,71,0.5) !important; transform-origin: top right;
    animation: ftMenuIn .28s cubic-bezier(.16,1,.3,1) both; z-index: 600;
  }
  .omg-nav:not(.open) { display: none !important; }
  .omg-nav button { width: 100%; justify-content: flex-start !important; padding: 13px 14px !important; border-radius: 13px !important; margin-left: 0 !important; }
  .omg-navlabel { display: inline !important; font-size: 13px !important; letter-spacing: .14em !important; }
  .omg-navblob { width: 20px !important; height: 20px !important; }
  .omg-bagblob { width: 20px !important; height: 20px !important; }
  .omg-marquee { font-size: 12px !important; letter-spacing: .16em !important; }
}
@media (max-width: 560px) {
  .omg-hero-title { font-size: clamp(44px,16vw,84px) !important; }
  .omg-hero-sub { font-size: 17px !important; margin-top: 14px !important; max-width: 30ch !important; }
  .omg-hero-eyebrow { letter-spacing: .28em !important; }
  .omg-hero-cta button { flex: 1 1 auto; min-width: 140px; }
}

/* ---- texture overlay ---- */
.grain-fixed {
  position: fixed; inset: 0;
  background-image: url('../assets/grain.svg'); background-size: 240px;
  opacity: .06; mix-blend-mode: multiply; pointer-events: none; z-index: 9000;
}

/* ---- hover utilities (inline styles can't do :hover) ---- */
.btn-primary { transition: transform .3s, background .3s; }
.btn-primary:hover { transform: translateY(-3px); background: #1d3f70; }
.btn-gold { transition: transform .3s; }
.btn-gold:hover { transform: translateY(-3px); }
.btn-outline { transition: all .3s; }
.btn-outline:hover { border-color: #15315C; background: rgba(21,49,92,.05); }
.lift { transition: transform .55s cubic-bezier(.16,1,.3,1); }
.lift:hover { transform: translateY(-9px); }
.tilt { transition: transform .55s cubic-bezier(.16,1,.3,1); }
.tilt:hover { transform: rotate(0deg) translateY(-10px) !important; }
.tile-lift { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.tile-lift:hover { transform: translateY(-8px); }
.quick-add { transition: background .25s, transform .25s; }
.quick-add:hover { background: #E0A93A; transform: scale(1.1); }
.link-underline { transition: color .25s; }
.link-underline:hover { color: #C0561E; }
.nav-link { transition: color .2s; }
.save-btn { transition: all .3s; }
.save-btn:hover { border-color: #C0561E; color: #C0561E; }
.foot-link { transition: color .2s; }
.foot-link:hover { color: #E0A93A; }

/* card art image layered over the painterly gradient when present */
.art-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; mix-blend-mode: multiply; opacity: .96;
}