/* =========================================================
   Atlantic Crown Coffee — Styles
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600&display=swap');

@font-face {
  font-family: 'AtlanticCrown';
  src: url('/Fonts/times.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ----- Reset & Tokens ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dark:       #0d0c0a;
  --dark2:      #161410;
  --light:      #f5f0e8;
  --light2:     #ede8df;
  --gold:       #c9a84c;
  --gold-light: #e8c97e;
  --gold-dim:   #7a6230;
  --text-dark:  #f0ebe0;
  --text-light: #1a1714;
  --text-muted-dark:  #9a8a70;
  --text-muted-light: #5a4e3a;
  --brand:  'AtlanticCrown', 'Times New Roman', Georgia, serif;
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Montserrat', sans-serif;
  --transition: 0.35s ease;
  --max-w: 1200px;
}

html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--text-dark); font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7; overflow-x: hidden; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }

/* ----- Utility ----- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

.section-label { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; }
.section-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.2; }
.section-title em { font-style: italic; color: var(--gold); }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2rem;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled { background: rgba(13,12,10,0.96); box-shadow: 0 2px 20px rgba(0,0,0,0.5); }

.nav-logo { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: var(--brand); font-size: 1.5rem; letter-spacing: 0.12em; color: var(--gold); }
.logo-sub  { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.25em; color: var(--text-muted-dark); margin-top: 0.15rem; }

.nav-end { display: flex; align-items: center; gap: 2rem; }

.nav-links { list-style: none; display: flex; gap: 2rem; }
.nav-links a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dark); transition: color var(--transition); }
.nav-links a:hover { color: var(--gold); }

/* Dropdown */
.nav-item-dropdown { position: relative; }
.nav-arrow { font-size: 0.55rem; margin-left: 0.3rem; opacity: 0.6; transition: transform var(--transition); }
.nav-item-dropdown:hover .nav-arrow { transform: rotate(90deg); }
.nav-dropdown {
  display: none;
  position: absolute; top: 100%; left: 0;
  list-style: none;
  background: rgba(13,12,10,0.97);
  border: 1px solid rgba(201,168,76,0.2);
  border-top: 2px solid var(--gold);
  min-width: 180px;
  padding: 0.5rem 0;
  padding-top: 0.85rem;
  z-index: 200;
}
.nav-item-dropdown:hover .nav-dropdown { display: block; }

/* ponte invisível para não perder o hover ao passar do link para o dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute; top: -12px; left: 0; right: 0;
  height: 12px;
}

.nav-dropdown li a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  transition: color var(--transition), background var(--transition);
}
.nav-dropdown li a:hover { color: var(--gold); background: rgba(201,168,76,0.06); }

/* Sub-dropdown (Café variants) */
.nav-item-sub { position: relative; }
.nav-subdropdown {
  display: none;
  position: absolute; top: 0; left: 100%;
  list-style: none;
  background: rgba(13,12,10,0.97);
  border: 1px solid rgba(201,168,76,0.2);
  border-left: 2px solid var(--gold);
  min-width: 180px;
  padding: 0.5rem 0;
  z-index: 201;
}
.nav-item-sub:hover .nav-subdropdown { display: block; }

/* Language switcher */
.lang-switcher { display: flex; gap: 0.5rem; align-items: center; }
.lang-option { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; color: var(--text-muted-dark); padding: 0.2rem 0.4rem; border: 1px solid transparent; transition: color var(--transition), border-color var(--transition); }
.lang-option:hover, .lang-option.active { color: var(--gold); border-color: var(--gold-dim); }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--gold); transition: transform 0.3s, opacity 0.3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO — Full-width cinematic banner
   ========================================================= */
.hero {
  min-height: 100vh;
  background: var(--dark) url('/images/banner02_te.png') center center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

.btn-gold {
  display: inline-block; padding: 0.85rem 2.2rem;
  background: var(--gold); color: var(--dark);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background var(--transition), transform var(--transition);
}
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }

/* =========================================================
   STORY — Light, 60/40 split
   ========================================================= */
.story {
  background: var(--light);
  color: var(--text-light);
  position: relative;
}

.story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.story-content {
  padding: 9rem 5rem 11rem 8rem;
  display: flex; flex-direction: column; justify-content: center;
}

.story-image {
  position: relative;
  overflow: hidden;
}
.story-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.88) sepia(0.18);
  mix-blend-mode: multiply;
}
/* fade esquerda com profundidade — curva suave e longa */
.story-image::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    #f5f0e8                  0%,
    rgba(245,240,232,0.94)  10%,
    rgba(245,240,232,0.80)  22%,
    rgba(245,240,232,0.58)  35%,
    rgba(245,240,232,0.30)  50%,
    rgba(245,240,232,0.08)  63%,
    transparent             75%
  );
  z-index: 1; pointer-events: none;
}
/* fade topo (vem de trás do hero) + fade base */
.story-image::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      #f5f0e8                  0%,
      rgba(245,240,232,0.75)  15%,
      rgba(245,240,232,0.30)  35%,
      transparent             55%
    ),
    linear-gradient(to top, var(--light) 0%, transparent 20%);
  z-index: 1; pointer-events: none;
}
.story-content .section-label { color: var(--gold-dim); }
.story-content .section-title { color: var(--text-light); margin-bottom: 2rem; }
.story-content .section-title em { color: var(--gold-dim); }
.story-body { margin-bottom: 4rem; }
.story-body p { color: var(--text-muted-light); margin-bottom: 1rem; font-size: 0.96rem; line-height: 1.8; }
.story-body p:last-child { margin-bottom: 0; font-style: italic; color: var(--text-light); font-weight: 400; }


/* =========================================================
   COFFEES — Dark, two-panel
   ========================================================= */
.coffees {
  background: var(--dark2);
  color: var(--text-dark);
  position: relative;
}
.coffees::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 380px;
  background: linear-gradient(to bottom,
    rgba(237,232,223,0.00)  0%,
    rgba(237,232,223,0.02) 15%,
    rgba(237,232,223,0.07) 28%,
    rgba(237,232,223,0.16) 40%,
    rgba(237,232,223,0.30) 52%,
    rgba(237,232,223,0.50) 63%,
    rgba(237,232,223,0.70) 74%,
    rgba(237,232,223,0.86) 84%,
    rgba(237,232,223,0.96) 93%,
    #ede8df                100%
  );
  pointer-events: none; z-index: 3;
}
.coffees-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* imagem de fundo — canto inferior direito */
.coffees-bg {
  position: absolute;
  bottom: 0; right: 0;
  width: 32%; height: 58%;
  overflow: hidden;
  z-index: 0;
}
.coffees-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.4) sepia(0.2);
}
.coffees-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  #161410 0%, transparent 50%),
    linear-gradient(to bottom, #161410 0%, transparent 35%);
  z-index: 1; pointer-events: none;
}

.coffees-content {
  position: relative; z-index: 2;
  padding: 8rem 8rem 14rem 8rem;
  width: 100%;
}
.coffees-content .section-label { color: var(--gold); }
.coffees-content .section-title { color: var(--text-dark); margin-bottom: 0.5rem; }
.coffees-subtitle { font-size: 0.82rem; color: var(--text-muted-dark); letter-spacing: 0.08em; margin-bottom: 2.5rem; }

.origins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; margin-bottom: 12rem; }

.origin-card {
  display: flex; flex-direction: column;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201,168,76,0.25);
}

.origin-region {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 0.85rem;
}

.origin-img {
  display: flex;
  align-items: center;
  height: 52px;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}
.origin-img img {
  max-height: 100%;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0.92) sepia(0.15);
}

/* linha dourada separadora abaixo da imagem */
.origin-img::after {
  content: '';
  display: block;
  position: absolute;
}

.origin-name {
  font-family: var(--serif);
  font-size: 1.35rem; font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.origin-profile { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted-dark); margin-bottom: 0.5rem; margin-top: 0.5rem; }
.origin-desc    { font-size: 0.95rem; color: var(--text-muted-dark); line-height: 1.75; }

.badges-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}

.badge {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: transparent;
}

/* cantoneira topo-esquerda */
.badge::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 20px; height: 20px;
  border-top: 1px solid rgba(201,168,76,0.65);
  border-left: 1px solid rgba(201,168,76,0.65);
}

/* cantoneira baixo-direita */
.badge::after {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 20px; height: 20px;
  border-bottom: 1px solid rgba(201,168,76,0.65);
  border-right: 1px solid rgba(201,168,76,0.65);
}

.badge-icon {
  margin-bottom: 1rem;
  display: block;
}
.badge-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: 0.9;
}
.badge-title {
  font-family: var(--serif);
  font-size: 1rem; font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}
.badge-text {
  font-size: 0.84rem;
  color: var(--text-muted-dark);
  line-height: 1.65;
}

/* =========================================================
   WHY — Light, 4 columns
   ========================================================= */
.why {
  background: var(--light2);
  color: var(--text-light);
  padding: 9rem 0 11rem;
  position: relative;
}
.why-header { text-align: center; margin-bottom: 3.5rem; }
.why-header .section-label { color: var(--gold-dim); }
.why-header .section-title { color: var(--text-light); }

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

.why-card { padding: 1.5rem; border-top: 2px solid var(--gold-dim); }
.why-icon { margin-bottom: 0.75rem; }
.why-icon img { width: 52px; height: 52px; object-fit: contain; opacity: 0.9; }
.why-title { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.5rem; }
.why-text  { font-size: 0.82rem; color: var(--text-muted-light); line-height: 1.6; }

/* =========================================================
   CONTACT — Dark, two blocks
   ========================================================= */
.contact {
  background: var(--dark);
  color: var(--text-dark);
  position: relative;
}

/* linha dourada no topo da secção */
.contact::before {
  content: '';
  position: absolute; top: 0; left: 7%; right: 7%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(201,168,76,0.5) 20%,
    var(--gold) 50%,
    rgba(201,168,76,0.5) 80%,
    transparent
  );
  z-index: 2;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-left {
  background: var(--dark2);
  padding: 8rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  border-right: 1px solid rgba(201,168,76,0.18);
}

/* cantoneira topo-esquerda */
.contact-left::before {
  content: '';
  position: absolute; top: 2.75rem; left: 2.75rem;
  width: 30px; height: 30px;
  border-top: 1px solid rgba(201,168,76,0.55);
  border-left: 1px solid rgba(201,168,76,0.55);
}

/* cantoneira baixo-direita */
.contact-left::after {
  content: '';
  position: absolute; bottom: 2.75rem; right: 2.75rem;
  width: 30px; height: 30px;
  border-bottom: 1px solid rgba(201,168,76,0.55);
  border-right: 1px solid rgba(201,168,76,0.55);
}

.contact-left .section-label {
  color: var(--gold);
  display: flex; align-items: center; gap: 0.75rem;
}

/* linha dourada ao lado do label */
.contact-left .section-label::after {
  content: '';
  flex: 1; max-width: 60px;
  height: 1px;
  background: linear-gradient(to right, var(--gold-dim), transparent);
}

.contact-left .section-title { color: var(--text-dark); margin-bottom: 1.5rem; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.contact-desc { color: var(--text-muted-dark); font-size: 0.9rem; line-height: 1.8; margin-bottom: 2.5rem; }
.contact-detail { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.88rem; color: var(--text-muted-dark); }
.contact-detail .detail-icon { color: var(--gold); font-size: 1rem; }

.contact-right {
  padding: 8rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}

/* cantoneira topo-direita */
.contact-right::before {
  content: '';
  position: absolute; top: 2.75rem; right: 2.75rem;
  width: 30px; height: 30px;
  border-top: 1px solid rgba(201,168,76,0.4);
  border-right: 1px solid rgba(201,168,76,0.4);
}

/* cantoneira baixo-esquerda */
.contact-right::after {
  content: '';
  position: absolute; bottom: 2.75rem; left: 2.75rem;
  width: 30px; height: 30px;
  border-bottom: 1px solid rgba(201,168,76,0.4);
  border-left: 1px solid rgba(201,168,76,0.4);
}

.contact-right .section-title { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: 2rem; }

/* Form */
.contact-form { width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted-dark); }
.form-group input,
.form-group textarea {
  background: var(--dark2); border: 1px solid var(--gold-dim);
  color: var(--text-dark); padding: 0.75rem 1rem;
  font-family: var(--sans); font-size: 0.9rem;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--gold); }
.form-group textarea { min-height: 120px; resize: vertical; }

.btn-gold-full {
  width: 100%; padding: 1rem;
  background: var(--gold); color: var(--dark);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background var(--transition);
}
.btn-gold-full:hover { background: var(--gold-light); }
.btn-gold-full:disabled { opacity: 0.6; cursor: not-allowed; }

.form-message { margin-top: 0.75rem; font-size: 0.85rem; min-height: 1.2em; }

/* =========================================================
   PRODUCT PAGES
   ========================================================= */

/* Hero */
.product-hero {
  background: var(--dark);
  color: var(--text-dark);
  padding-top: 80px;
  min-height: 90vh;
  display: flex; align-items: center;
}
.product-hero-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: calc(90vh - 80px);
  width: 100%;
}
.product-hero-left {
  padding: 5rem 4rem 6rem 6rem;
  display: flex; flex-direction: column; justify-content: center;
}
.product-back {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-dim);
  margin-bottom: 2.5rem; display: inline-block;
  transition: color var(--transition);
}
.product-back:hover { color: var(--gold); }

.product-badges-row { display: flex; gap: 0.75rem; margin-bottom: 1.75rem; }
.product-badge-pill {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,168,76,0.4);
  padding: 0.3rem 0.8rem;
}
.product-flag-name {
  display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0.75rem;
}
.product-flag {
  height: 44px; width: auto;
  filter: brightness(0.95);
}
.product-name {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 700; line-height: 1;
  color: var(--text-dark);
  text-transform: uppercase;
}
.product-profile {
  font-family: var(--serif); font-style: italic;
  font-size: 1.2rem; color: var(--gold);
  margin-bottom: 0.75rem;
}
.product-desc {
  font-size: 0.95rem; color: var(--text-muted-dark); line-height: 1.8;
  margin-bottom: 2.5rem; max-width: 480px;
}
.product-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem;
  border-top: 1px solid rgba(201,168,76,0.2); padding-top: 1.75rem;
}
.product-spec { display: flex; flex-direction: column; gap: 0.2rem; }
.spec-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-dim); }
.spec-value { font-size: 0.88rem; color: var(--text-muted-dark); }

.product-hero-right {
  position: relative; overflow: hidden;
}
.product-hero-right img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.82);
}
.product-hero-right::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--dark) 0%, transparent 35%);
  z-index: 1;
}
.product-hero-right::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, var(--dark) 0%, rgba(13,12,10,0.6) 50%, transparent 100%);
  z-index: 2; pointer-events: none;
}

/* Formats inline (inside hero left) */
.product-formats-inline {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(201,168,76,0.2);
}
.formats-inline-label {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-dim);
  margin-bottom: 1rem;
}
.formats-grid-inline { display: flex; gap: 1rem; }
.format-card-inline {
  position: relative;
  padding: 1rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.format-card-inline::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 1px solid rgba(201,168,76,0.55);
  border-left: 1px solid rgba(201,168,76,0.55);
}
.format-card-inline::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 14px; height: 14px;
  border-bottom: 1px solid rgba(201,168,76,0.55);
  border-right: 1px solid rgba(201,168,76,0.55);
}
.format-weight-inline {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  color: var(--gold); line-height: 1;
}
.format-desc-inline { font-size: 0.75rem; color: var(--text-muted-dark); line-height: 1.5; }

/* Order form */
.product-order {
  background: var(--dark);
  color: var(--text-dark);
  position: relative;
}
.product-order::before {
  content: '';
  position: absolute; top: 0; left: 7%; right: 7%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,0.5) 20%, var(--gold) 50%, rgba(201,168,76,0.5) 80%, transparent);
  z-index: 2;
}
.product-order-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
.product-order-left {
  background: var(--dark2);
  padding: 5rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  border-right: 1px solid rgba(201,168,76,0.18);
}
.product-order-left::before {
  content: ''; position: absolute; top: 2.5rem; left: 2.5rem;
  width: 28px; height: 28px;
  border-top: 1px solid rgba(201,168,76,0.55);
  border-left: 1px solid rgba(201,168,76,0.55);
}
.product-order-left::after {
  content: ''; position: absolute; bottom: 2.5rem; right: 2.5rem;
  width: 28px; height: 28px;
  border-bottom: 1px solid rgba(201,168,76,0.55);
  border-right: 1px solid rgba(201,168,76,0.55);
}
.product-order-left .section-label { color: var(--gold); margin-bottom: 1rem; }
.product-order-desc { font-size: 0.9rem; color: var(--text-muted-dark); line-height: 1.8; margin-bottom: 2rem; }

.product-order-right {
  padding: 5rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
}
.order-form { width: 100%; }

/* Size radio options */
.size-options { display: flex; gap: 1rem; margin-top: 0.25rem; }
.size-option {
  display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer;
}
.size-option input[type="radio"] { display: none; }
.size-option span {
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--gold-dim);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--text-muted-dark);
  transition: all var(--transition);
}
.size-option input:checked + span {
  background: var(--gold); color: var(--dark); border-color: var(--gold);
}
.size-option:hover span { border-color: var(--gold); color: var(--gold); }

/* Responsive */
@media (max-width: 768px) {
  .product-hero-inner { grid-template-columns: 1fr; }
  .product-hero-left  { padding: 3rem 1.5rem; }
  .product-hero-right { min-height: 50vw; }
  .formats-grid       { grid-template-columns: 1fr; max-width: 100%; }
  .product-order-inner { grid-template-columns: 1fr; }
  .product-order-left, .product-order-right { padding: 3rem 1.5rem; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: #080706; color: var(--text-dark); padding: 4rem 0 0; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(201,168,76,0.2); }

.footer-logo-name { font-family: var(--brand); font-size: 1.1rem; letter-spacing: 0.15em; color: var(--gold); display: block; }
.footer-logo-name { margin-bottom: 1rem; }
.footer-tagline   { font-size: 0.82rem; color: var(--text-muted-dark); font-style: italic; }

.footer-nav { display: flex; gap: 3rem; }
.footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-nav a { font-size: 0.78rem; color: var(--text-muted-dark); transition: color var(--transition); }
.footer-nav a:hover { color: var(--gold); }

.footer-bottom { padding: 1.5rem 0; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.footer-location { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--gold-dim); text-transform: uppercase; }
.footer-copy     { font-size: 0.72rem; color: var(--text-muted-dark); }

/* =========================================================
   PRIVACY BANNER
   ========================================================= */
.privacy-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--dark2); border-top: 1px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 2rem; flex-wrap: wrap;
}
.privacy-banner-text { font-size: 0.82rem; color: var(--text-muted-dark); }
.privacy-banner-text a { color: var(--gold); text-decoration: underline; }
.privacy-banner-btn {
  background: var(--gold); color: var(--dark);
  border: none; padding: 0.5rem 1.4rem; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; letter-spacing: 0.08em;
}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal-page { padding: 8rem 0 4rem; min-height: 80vh; }
.legal-page h1 { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--gold); margin-bottom: 2rem; }
.legal-page h2 { font-family: var(--serif); font-size: 1.2rem; color: var(--gold); margin: 2rem 0 0.75rem; }
.legal-page p, .legal-page li { font-size: 0.9rem; color: var(--text-muted-dark); line-height: 1.8; margin-bottom: 0.75rem; }
.legal-page ul { margin-left: 1.5rem; }
.legal-page a { color: var(--gold); text-decoration: underline; }
.legal-back { display: inline-block; margin-bottom: 2rem; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--gold-dim); transition: color var(--transition); }
.legal-back:hover { color: var(--gold); }
.legal-header { margin-bottom: 2.5rem; }
.legal-meta   { font-size: 0.78rem; color: var(--text-muted-dark); margin-bottom: 2rem; font-style: italic; }
.legal-body   { max-width: 720px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .coffees-inner { grid-template-columns: 1fr; }
  .coffees-bg { display: none; }
  .badges-grid   { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  /* Navbar mobile */
  .nav-links {
    display: none; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(13,12,10,0.98); padding: 1rem 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.75rem 2rem; display: block; }
  .nav-dropdown { position: static; border: none; border-left: 2px solid rgba(201,168,76,0.2); margin-left: 1rem; padding: 0; background: transparent; display: none; }
  .nav-item-dropdown.open .nav-dropdown { display: block; }
  .nav-subdropdown { display: block; position: static; border: none; border-left: 2px solid rgba(201,168,76,0.3); margin-left: 2rem; padding: 0; background: transparent; }
  .nav-item-sub .nav-arrow { display: none; }
  .nav-toggle { display: flex; }
  .logo-name { font-size: 0.95rem; letter-spacing: 0.08em; white-space: nowrap; }

  /* Hero mobile — banner_vs_mobile.png (portrait 1456×2544) */
  .hero {
    background-image: url('/images/banner02_te_mo.png');
    background-size: cover;
    background-position: center center;
    min-height: 100svh;
  }

  /* Story */
  .story-inner { grid-template-columns: 1fr; }
  .story-content { padding: 6rem 1.5rem 3rem; }
  .story-image { min-height: 300px; }

  /* Coffees */
  .coffees-content { padding: 3rem 1.5rem; max-width: 100%; }
  .badges-grid { grid-template-columns: 1fr 1fr; }
  .origins-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .badges-grid  { grid-template-columns: 1fr 1fr; }

  /* Why */
  .why-grid { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact-inner { grid-template-columns: 1fr; }
  .contact-left, .contact-right { padding: 3rem 1.5rem; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-nav   { flex-wrap: wrap; gap: 1.5rem; }
}

@media (max-width: 480px) {
  .why-grid    { grid-template-columns: 1fr; }
  .badges-grid { grid-template-columns: 1fr; }
  .why { padding: 5rem 0 7rem; }
  .story-content { padding: 4rem 1.25rem 2.5rem; }
  .coffees-content { padding: 2.5rem 1.25rem 8rem; }
  .contact-left, .contact-right { padding: 2.5rem 1.25rem; }
}