@font-face {
  font-family: 'Oswald';
  src: url('/assets/font/Oswald-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --accent: #FFD447;
  --background: #171717;
  --footer-bg: #101010;
  --footer-fg: #fff;
  --nav-fg: #fff;
}

/* Universal user-select/cursor handling */
body, .main-content, .footer, .site-header, .header-row, .footer-flex, .logo-center, .header-links, .hover-gallery, .hover-image-block, .hover-text {
  user-select: none;
  caret-color: transparent;
}
input, textarea, button, a, select {
  user-select: auto;
  caret-color: auto;
}

html, body {
  min-height: 100vh;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--background);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  box-sizing: border-box;
  width: 100vw;
  text-align: center;
  overflow-x: hidden;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  padding-bottom: 270px;
}

/* Sticky top bar */
.sticky-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 2000;
  background: #222;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  letter-spacing: .5px;
  padding: 5px 0;
  text-align: center;
}

/* Header/nav */
.site-header {
  background: var(--background);
  border-bottom: 2px solid #444;
  margin: 0;
  padding: 0 0 0 0;
}
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0 6px 0;
  gap: 0;
}
.header-links {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-self: end;
}
.header-links:last-child {
  justify-self: start;
}
.logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  min-width: 220px;
  max-width: 360px;
  justify-self: center;
}
.logo-center img {
  width: 340px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  background: none;
  border: none;
  border-radius: 16px;
  transition: box-shadow 0.23s;
}
.nav-link {
  font-size: 1.17rem;
  font-weight: 600;
  color: var(--nav-fg) !important;
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  letter-spacing: .5px;
  padding: 5px 8px 2px 8px;
  border-radius: 3px;
  transition: color .18s, border-bottom .22s;
  user-select: auto;
  cursor: pointer;
}
.nav-link:hover {
  border-bottom: 2px solid var(--accent);
  color: var(--accent) !important;
  background: none;
}

/* --- Main content gallery with Now Supplying and image swap --- */
.main-content {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  width: 100vw;
  margin-top: 6px !important;
  margin-bottom: 0;
}
.main-content > div, .main-content .container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.hover-gallery {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  margin: 0;
  min-height: 260px;
  user-select: none;
}

.hover-image-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 230px;
  justify-content: flex-start;
}

.now-supplying {
  font-size: 1.06em;
  font-family: 'Oswald', sans-serif;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 16px;
  letter-spacing: .5px;
  text-align: center;
}

.product-title-main {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  line-height: 1.18em;
  letter-spacing: 0.5px;
}

.swap-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
}
.swap-image-wrapper img {
  width: 170px;
  height: 170px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 7px 24px rgba(0,0,0,0.17);
  background: #191919;
  transition: box-shadow 0.36s, transform 0.44s cubic-bezier(.23,1.02,.68,.99);
}
.hover-image-block:hover .swap-image-wrapper img,
.hover-image-block:focus-within .swap-image-wrapper img {
  box-shadow: 0 0 50px 10px var(--accent), 0 2px 14px #0004;
  transform: scale(1.13);
}

/* --- About Page Styling with Grid for left/center/right --- */
.about-row {
  display: grid;
  grid-template-columns: 230px 1fr 230px;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1100px;
  margin: 48px auto 38px auto;
  box-sizing: border-box;
}
.about-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}
.about-img img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  background: transparent;
  opacity: 1;
  display: block;
  margin: 0 auto;
}
.about-desc {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.about-desc h2 {
  color: var(--accent);
  margin-bottom: 0.7em;
  font-size: 2em;
  letter-spacing: 0.01em;
}
.about-desc p {
  color: #fff;
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0;
}
@media (max-width: 900px) {
  .about-row {
    grid-template-columns: 110px 1fr 110px;
    gap: 10px;
    max-width: 99vw;
  }
  .about-img img { width: 90px; height: 90px; }
  .about-desc { max-width: 96vw; }
}
@media (max-width: 600px) {
  .about-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
    max-width: 99vw;
  }
  .about-img, .about-img img {
    width: 90px;
    height: 90px;
    margin: 0 auto;
  }
  .about-desc { margin: 0 0.4em; }
}

/* --- SHOP PAGE UNDER CONSTRUCTION (centered, vertical stack) --- */
.shop-uc-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 60px auto 0 auto;
  min-height: 320px;
  max-width: 600px;
}
.shop-uc-text {
  font-family: 'Oswald', sans-serif;
  font-size: 2.15em;
  color: #FFD447;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.18em;
  text-align: center;
  margin-bottom: 18px;
}
.shop-uc-img img {
  width: 190px;
  height: auto;
  max-width: 99vw;
  display: block;
  margin: 0 auto;
}
.shop-uc-visit {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.19em;
  margin-top: 16px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  .shop-uc-centered { margin-top: 32px; }
  .shop-uc-text { font-size: 1.25em; }
  .shop-uc-img img { width: 120px; }
}

/* --- Events Table Styling (smaller and wider) --- */
.events-wrapper {
  margin: 0 auto;
  padding: 1.1em 0 1em 0;
  max-width: 420px;
  text-align: center;
}
.events-title {
  color: var(--accent);
  font-family: 'Oswald', sans-serif;
  font-size: 1.22em;
  margin-bottom: 0.7em;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 14px #000a;
}
.events-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.95em;
  background: #191919;
  border-radius: 12px;
  box-shadow: 0 2px 16px #0005;
  overflow: hidden;
  margin: 0 auto;
}
.events-table th,
.events-table td {
  padding: 0.38em 1.3em;
  background: #222;
  color: #fff;
  font-weight: 500;
  font-size: 1em;
}
.events-table th {
  background: var(--accent);
  color: #222;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  text-align: right;
  width: 38%;
  letter-spacing: .1em;
}
.events-table td {
  background: #252525;
  color: var(--accent);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  text-align: left;
  width: 62%;
  font-weight: 600;
  letter-spacing: .05em;
  box-shadow: 0 0 0 1px #4446 inset;
}
@media (max-width: 600px) {
  .events-wrapper { max-width: 99vw; }
  .events-title { font-size: 1em; }
  .events-table th, .events-table td { padding: 0.31em 0.7em; font-size: 0.92em; }
}

/* --- Upload: Flex row for info, form, and result box --- */
.upload-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  margin: 28px auto 0 auto;
  max-width: 900px;
  width: 100%;
}
.upload-info-box {
  background: #222;
  color: #FFD447;
  border-left: 6px solid #FFD447;
  border-radius: 8px;
  padding: 18px 18px 12px 18px;
  font-family: 'Oswald',sans-serif;
  font-size: 1.04em;
  text-align: left;
  max-width: 410px;
  min-width: 240px;
  margin: 0;
}
.upload-info-box strong {
  display: block;
  text-align: center;
  font-size: 1.09em;
  margin-bottom: 7px;
}
.upload-result-box {
  max-width: 430px;
  min-width: 220px;
  background: #222;
  color: #FFD447;
  border-radius: 8px;
  font-family: 'Oswald',sans-serif;
  font-size: 1.14em;
  text-align: center;
  margin: 0 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  font-weight: bold;
  border-left: 0;
}
.upload-result-box a {
  color: #fff;
  text-decoration: underline;
  font-size: 0.97em;
}
@media (max-width: 900px) {
  .upload-flex-row { flex-direction: column; gap: 14px; align-items: center; }
  .upload-info-box, #list-upload-form, .upload-result-box { max-width: 98vw !important; width: 98vw !important; }
}

/* --- Sticky footer at bottom, always centered --- */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 30px 0 10px 0;
  font-family: 'Oswald',sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 220px;
  border-top: 3px solid var(--accent);
  z-index: 1999;
}

/* --- Footer Layout: grid centering --- */
.footer-flex {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: flex-start;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  min-height: 1px;
}
.footer-flex > div {
  margin-bottom: 10px;
}
.footer-hours {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 170px;
  max-width: 200px;
  text-align: center;
}
.footer-hours-inner {
  width: 100%;
}
.hours-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.74em;
  color: #fff;
}
.hours-table td {
  padding: 1.2px 0;
  font-size: 0.83em;
}
.hours-table td:first-child {
  font-weight: bold;
  text-align: right;
  color: #fff;
  padding-right: 8px;
  width: 66px;
  white-space: nowrap;
}
.hours-table td:last-child {
  font-weight: bold;
  color: var(--accent);
  text-align: left;
  white-space: nowrap;
  font-size: 0.94em;
}
.footer-hours .footer-heading {
  font-size: 1.08em;
  margin-bottom: 5px;
  justify-content: center;
  text-align: center;
}

.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 250px;
  max-width: 340px;
  text-align: center;
}
.footer-center .footer-heading,
.footer-center .footer-contact-link {
  text-align: center !important;
  margin: 0 auto;
  display: block;
}
.footer-links {
  min-width: 130px;
  max-width: 160px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.footer .footer-heading {
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 1.13em;
}
.footer-links a {
  color: var(--accent);
  text-decoration: none;
  display: block;
  margin: 4px 0;
  font-size: 0.92em;
  cursor: pointer;
}
.footer-contact-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color .18s;
}
.footer-contact-link:hover,
.footer-contact-link:focus {
  color: var(--accent);
  text-decoration: underline;
}

/* --- Socials --- */
.social-icons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  margin-top: 2px;
  margin-bottom: 0;
  background: transparent;
  border: none;
}
.social-icons img {
  width: 32px;
  height: 32px;
  transition: transform 0.2s;
  filter: grayscale(0) brightness(1.18);
  background: #212121;
  border-radius: 8px;
  padding: 2px;
}
.social-icons img:hover {
  transform: scale(1.19);
  background: var(--accent);
  filter: none;
}

/* Responsive tweaks */
@media (max-width: 1100px) {
  .footer-flex {
    max-width: 98vw;
    gap: 8px;
  }
}
@media (max-width: 900px) {
  .footer-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 98vw;
  }
  .footer-flex > div {
    margin-bottom: 10px;
    width: 90vw;
    max-width: 340px;
    min-width: 120px;
  }
  .footer-hours, .footer-hours-inner {
    align-items: center !important;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 700px) {
  .hover-gallery { gap: 10px; min-height: 60px; }
  .hover-image-block img { width: 110px; height: 110px; }
  .product-title-main { font-size: 1em; }
  .hover-image-block .hover-text { font-size: 1.03rem; }
  .footer .footer-flex > div { text-align: center; }
  .social-icons { margin-top: 2px; gap: 8px;}
  .footer-hours, .footer-hours-inner {
    max-width: 98vw !important;
    width: 100%;
    align-items: center !important;
  }
}