/* ================================
   UGGA — Shared Styles
   ================================ */

@font-face {
  font-family: 'Arial Nova';
  src: url('/fonts/ArialNova.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Giza';
  src: url('/fonts/giza-pro-font/giza.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.font-giza {
  font-family: 'Giza', serif;
}

:root {
  --ugga-white: #FDFCFA;
  --ugga-red: #7D0808;
  --ugga-navy: #0D0A4D;
  --ugga-vanilla: #FFFDF3;
  --ugga-black: #000000;
}

/* Base */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ugga-vanilla);
  color: var(--ugga-black);
}

/* Logo */

.ugga-logo {
  font-family: "UGGA Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: -0.08em;
}

/* Header */

.ugga-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 9999;

  background: rgba(255,253,243, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(125, 8, 8, 0.12);
}

main {
  padding-top: 80px;
}

.font-arialnova {
  font-family: 'Arial Nova', sans-serif;
}

.font-giaza {
  font-family: 'Giaza', serif;
}
/* Navigation */

.nav-link {
  color: var(--ugga-red);
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.55;
}

/* Main headings */

.ugga-heading {
  color: var(--ugga-red);
}

/* Image placeholders */

.image-placeholder {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(125, 8, 8, 0.08),
      rgba(13, 10, 77, 0.08)
    );

  border: 1px dashed rgba(125, 8, 8, 0.4);
}

.image-placeholder::before {
  content: "IMAGE PLACEHOLDER";

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  padding: 10px 16px;

  color: var(--ugga-red);

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  white-space: nowrap;

  border: 1px solid rgba(125, 8, 8, 0.35);
}

.image-placeholder span {
  display: none;
}

/* Product image hover */

.group:hover .image-placeholder {
  transform: scale(0.985);
}

/* Buttons */

.ugga-button {
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.ugga-button:hover {
  transform: translateY(-2px);
}

/* Footer */

.ugga-footer {
  background: var(--ugga-black);
}

.soldout img {
  filter: grayscale(100%);
}

.soldout-label {
  display: none;
}

.soldout .soldout-label {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.15);
  color: #7D0808;

  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  pointer-events: none;
}