:root {
  --color-background: #fff;
  --color-primary: #365486;
  --color-black: #000000;

  /* MGYM redesign tokens */
  --ink:          #111111;
  --ink-2:        #2a2a2a;
  --paper:        #ffffff;
  --bone:         #f6f4ee;
  --bone-hover:   #efece4;
  --hair:         rgba(17, 17, 17, 0.10);
  --hair-strong:  rgba(17, 17, 17, 0.50);
  --muted:        #6b6b68;

  /* Fluid page gutter — grows with viewport width.
     At 390px → 24px, at 1024 → ~72px, at 1440 → ~110px, at 1920+ → 160px. */
  --gutter-x: clamp(24px, 7vw, 160px);
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: "Geist", "Poppins", system-ui, sans-serif;
  font-optical-sizing: auto;
  background-color: var(--paper);
  color: var(--ink);
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

*:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* MGYM redesign — reusable utilities */
.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  color: var(--muted);
}

.heading-display {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.section-pad {
  padding-block: 64px;
  padding-inline: var(--gutter-x);
}

@media (min-width: 640px) {
  .section-pad { padding-block: 96px; }
}

@media (min-width: 1024px) {
  .section-pad { padding-block: 120px; }
}

.section-inner {
  max-width: 1600px;
  margin: 0 auto;
}

/* Intro/heading block for sticky-header pages (Produtos, Sobre, Product detail).
   Home hero is a different beast — it's h-screen and positions content itself. */
.page-intro {
  padding-block: 96px 48px;
  padding-inline: var(--gutter-x);
}

@media (min-width: 640px) {
  .page-intro { padding-block: 128px 64px; }
}

@media (min-width: 1024px) {
  .page-intro { padding-block: 144px 72px; }
}

/* Horizontal gutter utility — use anywhere we want consistent edge padding */
.gutter-x {
  padding-inline: var(--gutter-x);
}

/* Brand logo is black on transparent — invert it when displayed on dark surfaces
   (footer is always dark; home-page header is dark until scrolled). */
footer .brand-logo,
header.text-paper .brand-logo {
  filter: invert(1) brightness(1.05);
}

.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none !important; }
}

a {
  text-decoration: none;
  color: black;
}

.header-logo {
  width: 3rem;
}

#landing-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Detail Page Enhancements */

/* Variant and Dimension Option Styling */
.variant-option, .dimension-option {
  transition: all 0.2s ease-in-out;
}

.variant-option div, .dimension-option div {
  transition: all 0.2s ease;
}

.variant-option:hover div, .dimension-option:hover div {
  border-color: var(--ink);
  background-color: var(--bone-hover);
}

.variant-option input:checked + div, .dimension-option input:checked + div {
  background-color: var(--ink) !important;
  font-weight: 500 !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

/* Fade in animation for images */
.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Quantity selector enhancements */
.quantity-selector select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(209, 213, 219, 0.5);
  border-color: #6b7280;
}

/* Dimension info styling */
#dimension-info {
  background-color: #f8fafc;
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #e2e8f0;
}

#dimension-info p {
  margin-bottom: 0.25rem;
}

#dimension-info p:last-child {
  margin-bottom: 0;
}

/* Loading states for HTMX */
.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-request.htmx-indicator {
  opacity: 1;
}


input[type="submit"]:active {
  transform: translateY(0);
}