/* Sugar Guilt Bakery — shared styles.
   Hover and focus rules below are the design's style-hover / style-focus
   attributes, one class per distinct rule. */

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: #F2E3C4;
  color: #3B2314;
  font-family: Figtree, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #123653; }
a:hover { color: #AD762D; }
input, textarea, select, button { font-family: Figtree, system-ui, sans-serif; }

/* Several dialogs and panels carry an inline display:flex, which outranks the
   browser's own [hidden] rule, so state it here with enough weight to win. */
[hidden] { display: none !important; }

@keyframes sg-spin { to { transform: rotate(360deg); } }
@keyframes sg-shimmer { from { background-position: 0% 50%; } to { background-position: 150% 50%; } }
@keyframes sg-twinkle {
  0%, 100% { opacity: .2; transform: scale(.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(25deg); }
}
@keyframes sg-glow {
  0%, 100% { box-shadow: 0 0 22px rgba(231,185,92,.22); }
  50% { box-shadow: 0 0 44px rgba(231,185,92,.5); }
}
@keyframes sg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-pop-scale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sg-pop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---- hover rules, lifted verbatim from the design ----
   The design applied these as inline styles at run time, so they always beat
   the element's own inline style. Here they are classes, which lose to inline
   styles, and almost every element carries one. !important restores the
   precedence the design had: without it a tilted review card cannot un-tilt and
   a footer link cannot change colour. */
.h-tan:hover { background: #C9903D !important; color: #3B2314 !important; }
.h-tan-lift:hover { background: #C9903D !important; transform: translateY(-2px) !important; }
.h-tan-txt-lift:hover { background: #C9903D !important; color: #3B2314 !important; transform: translateY(-2px) !important; }
.h-tan-txt-lift1:hover { background: #C9903D !important; color: #3B2314 !important; transform: translateY(-1px) !important; }
.h-tan-only:hover { background: #C9903D !important; }
.h-c48:hover { color: #C9903D !important; }
.h-c48-op:hover { color: #C9903D !important; opacity: 1 !important; }
.h-a97:hover { color: #AD762D !important; }
.h-2b4:hover { color: #123653 !important; }
.h-cocoa:hover { background: #3B2314 !important; color: #F2E3C4 !important; }
.h-cocoa-only:hover { background: #3B2314 !important; }
.h-cocoa-lift:hover { background: #3B2314 !important; transform: translateY(-2px) !important; }
.h-blue:hover { background: #123653 !important; color: #F2E3C4 !important; }
.h-dark-lift:hover { background: #2A170D !important; transform: translateY(-2px) !important; }
.h-brown-lite:hover { background: #4A2C1A !important; }
.h-cream:hover { background: #F2E3C4 !important; }
.h-wash-08:hover { background: rgba(59,35,20,0.08) !important; }
.h-wash-10:hover { background: rgba(59,35,20,0.10) !important; }
.h-wash-06:hover { background: rgba(59,35,20,0.06) !important; }
.h-cream-14:hover { background: rgba(242,227,196,0.14) !important; }
.h-cream-15:hover { background: rgba(242,227,196,0.15) !important; }
.h-cream-12:hover { background: rgba(242,227,196,0.12) !important; }
.h-lift6:hover { transform: translateY(-6px) !important; }
.h-lift5:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 44px rgba(59,35,20,0.18) !important; }
.h-lift4:hover { transform: translateY(-4px) !important; box-shadow: 0 22px 48px rgba(59,35,20,0.24) !important; }
.h-nudge:hover { transform: translate(-3px,-3px) !important; }
.h-unrotate:hover { transform: rotate(0deg) translate(-3px,-3px) !important; }

/* ---- focus rule, lifted verbatim from the design ---- */
.f-blue:focus { border-color: #123653 !important; box-shadow: 0 0 0 3px rgba(91,143,212,0.3) !important; }

/* ---- nav: the design swapped desktop/mobile on (max-width:760px) ---- */
.nav-desktop { display: block; }
.nav-mobile  { display: none; }
@media (max-width: 760px) {
  .nav-desktop { display: none; }
  .nav-mobile  { display: block; }
}
/* The seal hangs below the bar on BOTH layouts, so pages leave room for it.
   96px on the desktop. The phone hangs 62px and sets its own, shorter heights
   in mobile/00-shared.css, which also re-shows this element. */
.nav-spacer { height: 96px; }
@media (max-width: 760px) { .nav-spacer { display: none; } }

#navMenu { display: none; }
#navMenu.open { display: flex; }

/* ---- gallery mosaic: one column band under 640px, as the design does ---- */
@media (max-width: 640px) {
  .g-tile { grid-column: span 6 !important; grid-row: span 2 !important; min-height: 220px !important; }
}

/* ---- menu page rail: hidden under 900px, centred band over 1560px ---- */
.menu-layout {
  display: grid;
  grid-template-columns: 224px minmax(0,1fr);
  gap: clamp(24px,3vw,48px);
  align-items: start;
}
@media (min-width: 1560px) {
  .menu-layout { grid-template-columns: minmax(224px,1fr) minmax(0,1040px) minmax(224px,1fr); }
}
@media (max-width: 900px) {
  .menu-layout { display: block; max-width: 1240px; margin: 0 auto; }
  .menu-rail { display: none !important; }
}
.menu-jump { display: none; }
@media (max-width: 900px) { .menu-jump { display: block; } }

/* ---- order page: sidebar becomes a sticky mini bar under 980px ---- */
.order-aside-wide { display: flex; }
.order-aside-mini { display: none; }
.order-chips { display: block; }
@media (max-width: 980px) {
  .order-aside-wide { display: none; }
  .order-aside-mini { display: flex; }
  .order-chips { display: none; }
}

/* ---- owner panel: nav wraps below the bar under 1000px ---- */
@media (max-width: 1000px) {
  .owner-nav { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  .owner-chips { display: none !important; }
}

/* Filter/scroll strips hide their scrollbar, as the design does. */
.no-bar { scrollbar-width: none; -ms-overflow-style: none; }
.no-bar::-webkit-scrollbar { display: none; }