/* Dulce Bonito — fluid layout: mobile → 4K, content always 90% viewport width */

:root {
  /* 90% content band, 5% margin each side — all breakpoints */
  --content-width: 90vw;
  --content-gutter: 5vw;

  --site-header-height: clamp(4rem, 7vw, 5.5rem);

  /* Fluid spacing */
  --space-2xs: clamp(0.35rem, 0.6vw, 0.5rem);
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(0.75rem, 1.5vw, 1.25rem);
  --space-md: clamp(1rem, 2vw, 1.75rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2rem, 4.5vw, 4rem);
  --space-2xl: clamp(2.5rem, 6vw, 5.5rem);

  /* Fluid type */
  --text-xs: clamp(0.68rem, 0.25vw + 0.62rem, 0.78rem);
  --text-sm: clamp(0.82rem, 0.3vw + 0.76rem, 0.95rem);
  --text-base: clamp(0.94rem, 0.35vw + 0.86rem, 1.12rem);
  --text-lg: clamp(1.05rem, 0.45vw + 0.95rem, 1.28rem);
  --text-h3: clamp(1.1rem, 0.8vw + 0.95rem, 1.45rem);
  --text-h2: clamp(1.45rem, 2.2vw + 1rem, 2.85rem);
  --text-h1: clamp(1.85rem, 4.5vw + 1rem, 4.75rem);

  --radius-sm: clamp(10px, 0.8vw, 14px);
  --radius-md: clamp(14px, 1.2vw, 20px);
  --radius-lg: clamp(18px, 1.8vw, 28px);

  --grid-gap: clamp(0.75rem, 1.5vw, 1.5rem);
  --product-col-min: clamp(11rem, 16vw, 18rem);
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--site-header-height);
}

body.site-marketing,
body.luxe.site-marketing {
  --site-header-height: clamp(4.25rem, 8vw, 6rem);
  padding-top: calc(var(--site-header-height) + env(safe-area-inset-top, 0px) + 6px);
}

.luxe-main > .hero-viewport:first-child,
.luxe-main > section.hero-viewport:first-child {
  margin-top: var(--space-sm, 0.75rem);
}

body.luxe {
  --page-width: var(--content-width);
  --page-edge: var(--content-gutter);
}

/* Standard full-width fluid panel — fills the 90vw content band (mobile → 4K) */
.fluid-panel,
.db-fluid-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.section-fluid-panel {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.luxe-main,
body.luxe .footer,
.footer {
  width: var(--content-width);
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Header: full-width bar; inner content sits in the 90% band (5vw side margins) */
body.luxe.site-marketing .topbar,
body.site-marketing .topbar {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(var(--content-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--content-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

.luxe-main {
  width: var(--content-width);
  max-width: var(--content-width);
  padding-left: 0;
  padding-right: 0;
}

body.luxe .footer {
  width: var(--content-width);
  max-width: var(--content-width);
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom, 0px));
}

/* Typography scale */
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.subtext {
  font-size: var(--text-lg);
  max-width: min(92%, 52rem);
}

.section-head .subtext {
  max-width: min(90%, 48rem);
}

.eyebrow { font-size: var(--text-xs); }

.section {
  margin-top: var(--space-2xl);
  padding: var(--space-xs) 0;
}

.section-head {
  margin-bottom: var(--space-lg);
}

.luxe-hero {
  margin-top: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  gap: var(--grid-gap);
}

.luxe-hero.hero-viewport {
  margin-top: 0;
}

.luxe-panel-value {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 2rem);
}

.glass-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

/* Fluid grids */
.category-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1200px) {
  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--product-col-min), 1fr));
  gap: var(--grid-gap);
}

.timeline,
.luxe-feature-grid,
.testimonial-grid {
  gap: var(--grid-gap);
}

.timeline,
.luxe-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(14rem, 24vw, 22rem)), 1fr));
}

.testimonial-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(14rem, 26vw, 24rem)), 1fr));
}

.cat-card {
  min-height: auto;
  padding: 0;
}

/* Forms use full width of 90% band */
.form-narrow {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.custom-panel {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
}

.section-cta {
  padding: var(--space-xl) var(--space-md);
  border-radius: var(--radius-lg);
}

.shop-toolbar {
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.filter-pill {
  padding: clamp(0.5rem, 1vw, 0.65rem) clamp(0.75rem, 1.5vw, 1rem);
  font-size: var(--text-sm);
  min-height: 2.5rem;
}

.btn {
  padding: clamp(0.7rem, 1.2vw, 0.85rem) clamp(1rem, 2vw, 1.35rem);
  font-size: var(--text-sm);
  min-height: 2.75rem;
}

.brand-logo {
  width: clamp(9rem, 18vw, 14rem);
}

/* Hero stacks on narrow viewports */
@media (max-width: 900px) {
  .luxe-hero {
    grid-template-columns: 1fr;
  }
}

/* Topbar: mobile-friendly */
@media (max-width: 960px) {
  body.luxe.site-marketing .topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    padding-bottom: 0.75rem;
  }

  .topbar-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .menu.is-open {
    left: var(--content-gutter);
    right: var(--content-gutter);
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-md);
  }

  #cursor-glow {
    display: none;
  }
}

@media (max-width: 540px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .trust-strip span {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
    font-size: var(--text-xs);
  }

  .shop-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-pills {
    justify-content: flex-start;
  }
}

/* Tablet */
@media (min-width: 541px) and (max-width: 960px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop 1K+ */
@media (min-width: 961px) {
  .luxe-hero {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .luxe-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 2K / QHD */
@media (min-width: 1920px) {
  :root {
    --product-col-min: clamp(14rem, 14vw, 20rem);
  }

  .orb-a { width: clamp(480px, 28vw, 720px); height: clamp(480px, 28vw, 720px); }
  .orb-b { width: clamp(440px, 26vw, 680px); height: clamp(440px, 26vw, 680px); }
  .orb-c { width: clamp(500px, 30vw, 760px); height: clamp(500px, 30vw, 760px); }
}

/* 4K */
@media (min-width: 2560px) {
  :root {
    --product-col-min: clamp(15rem, 12vw, 22rem);
  }

  .subtext {
    max-width: min(85%, 56rem);
  }

  .why-liquid__inner {
    padding: clamp(2rem, 2.5vw, 3.5rem) clamp(2rem, 2.8vw, 3rem);
  }

  .why-liquid__cards {
    gap: clamp(1rem, 1.4vw, 1.75rem);
  }
}

/* Touch / no hover: reduce motion load */
@media (hover: none), (pointer: coarse) {
  #cursor-glow {
    display: none !important;
  }

  .tilt-card {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb,
  body.luxe .topbar::before,
  body.luxe .topbar::after {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Prevent horizontal scroll from effects */
body {
  overflow-x: clip;
}

img, video {
  max-width: 100%;
  height: auto;
}

.contact-hero-copy {
  grid-column: 1 / -1;
  text-align: center;
  margin-inline: auto;
  width: 100%;
}

.contact-hero-copy .subtext {
  margin-inline: auto;
}

#newsletter-form {
  width: 100%;
  max-width: min(100%, 36rem);
}

.newsletter-input {
  flex: 1 1 12rem;
  min-width: min(100%, 14rem);
}

#final .hero-actions {
  width: 100%;
  max-width: min(100%, 40rem);
  margin-inline: auto;
}