/* Bungee, served from this site rather than fonts.googleapis.com. It used to
   come from Google with font-display: swap, which meant headings drew in a
   fallback and then jumped when the real face arrived - Bungee is a heavy
   display face and the two occupy very different widths. That jump was a
   large part of the layout shift Cloudflare was reporting on real visits.
   Same origin means no second DNS and TLS handshake, and the preload in each
   page head starts the download with the stylesheet instead of after it.
   Bungee is under the SIL Open Font License, which permits this. */
@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bungee-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bungee-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bg: #faf8f6;
  --bg-alt: #f2ece9;
  --surface: #ffffff;
  --text: #161413;
  --text-muted: #6f6862;
  --accent: #c81d25;
  --accent-light: #e8434a;
  --gold: #d4a53d;
  --border: #e8e0da;
  --radius: 10px;
  --max-width: 1120px;
  --font-display: 'Bungee', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
/* Order confirmation page */
.thanks { text-align: center; padding: 110px 0 120px; }
.thanks__inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.thanks__check {
  width: 68px;
  height: 68px;
  margin-bottom: 26px;
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thanks__eyebrow {
  color: var(--accent-light);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.thanks h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 400;
  line-height: 1.06;
  text-wrap: balance;
  margin-bottom: 18px;
}
.thanks__text { color: rgba(255,255,255,0.68); font-size: 1.05rem; }
.thanks__ref {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 32px auto;
  padding: 18px 20px;
  max-width: 460px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}
.thanks__ref-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.thanks__ref code {
  font-size: 0.78rem;
  color: #fff;
  word-break: break-all;
  user-select: all;
}
.thanks__ref-note { font-size: 0.78rem; color: rgba(255,255,255,0.45); }
.thanks__help { color: rgba(255,255,255,0.6); font-size: 0.92rem; }
.thanks__help a { color: var(--accent-light); }
.thanks__actions { justify-content: center; margin-top: 30px; }

/* Sold out */
.sold-out {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* Last one — same corner as sold out, since a colour is only ever one of the
   two, but in the brand red so it reads as hurry rather than gone. */
.last-one {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
/* The line sits above the buy button and only appears for a colour down to its
   last unit — which it used to do by unhiding after the script ran, pushing the
   button down the page at the exact moment someone was reaching for it. The
   space is now always reserved, so nothing moves whether the note is there or
   not. It costs one empty line on the colours that have stock. */
.stock-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  min-height: 1.35rem;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
}
.stock-note::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
/* No dot while the line is empty. */
.stock-note:empty::before { display: none; }
.product-card__btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  border-color: var(--border);
}
.product-card__btn:disabled:hover { background: var(--bg); color: var(--text); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn:disabled:hover { transform: none; }
.swatch.out { opacity: 0.35; }
.swatch.out::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-top: 1.5px solid var(--text-muted);
  transform: rotate(-45deg);
  transform-origin: center;
  top: 50%;
}
button.swatch { position: relative; }

/* Not-found page */
.notfound { text-align: center; padding: 96px 0 116px; }
.notfound__inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 15vw, 9rem);
  line-height: 0.9;
  color: rgba(255,255,255,0.07);
  margin-bottom: -6px;
}
.notfound__eyebrow {
  color: var(--accent-light);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.notfound h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
  margin-bottom: 16px;
}
.notfound__text { color: rgba(255,255,255,0.62); }
.notfound__actions { justify-content: center; margin-top: 30px; }

/* Toast */
.notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 13px 14px 13px 18px;
  border-radius: 999px;
  background: var(--text);
  color: #fff;
  font-size: 0.88rem;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,0.5);
}
.notice__close {
  border: none;
  background: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.notice__close:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .notice { animation: notice-in 0.28s ease-out; }
  @keyframes notice-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
}

/* Announcement bar */
.announce {
  background: var(--text);
  color: rgba(255,255,255,0.92);
  text-align: center;
  padding: 9px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Free-shipping progress in the cart */
.ship-progress {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.ship-progress__label { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; }
.ship-progress__label strong { color: var(--accent); }
.ship-progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.ship-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.35s ease;
}
.ship-progress.done { border-color: rgba(200,29,37,0.35); }
.ship-progress.done .ship-progress__label { color: var(--text); font-weight: 600; }

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  /* No gap: "RUMOR" and "LUPAS" are separate flex items and a gap would
     split the name. The icon carries its own spacing instead. */
  gap: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  text-shadow:
    -1.5px -1.5px 0 var(--text),
    1.5px -1.5px 0 var(--text),
    -1.5px 1.5px 0 var(--text),
    1.5px 1.5px 0 var(--text),
    3px 3px 0 rgba(22,20,19,0.25);
}
.logo span { color: #fff; }
.logo__icon { height: 38px; width: auto; display: block; margin-right: -3px; }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  font-family: var(--font-display);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.nav a:hover { color: var(--accent); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The brand name set in running headings, matching the header logo. */
.brandmark {
  /* Plain inline, not flex: flex would give the name its own baseline and
     drop it off the line the rest of the heading sits on. */
  white-space: nowrap;
  color: var(--gold);
  text-shadow:
    -1.5px -1.5px 0 var(--text),
    1.5px -1.5px 0 var(--text),
    -1.5px 1.5px 0 var(--text),
    1.5px 1.5px 0 var(--text);
}
.brandmark span { color: #fff; }
.brandmark__icon {
  /* Taller than the caps on purpose, and centred on them: vertical-align
     drops it half its overhang below the baseline. Negative block margins
     keep it from stretching the line box. */
  height: 1.7em;
  width: auto;
  vertical-align: -0.2em;
  margin-right: -0.03em;
  margin-top: -0.45em;
  margin-bottom: -0.45em;
}

/* The legal pages stay in Portuguese; the notice only matters to other readers. */
.legal__notice {
  margin: -8px 0 26px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--bg-alt);
  border-radius: 0 8px 8px 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}
:root[lang="pt-PT"] .legal__notice { display: none; }

/* Language switcher */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
}
.lang__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.lang__flag {
  width: 17px;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(22,20,19,0.18);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.lang__btn:hover { color: var(--text); }
.lang__btn:hover .lang__flag { opacity: 1; }
.lang__btn.active { background: var(--accent); color: #fff; }
.lang__btn.active .lang__flag { opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,0.5); }
.lang__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .lang { padding: 2px; }
  .lang__btn { padding: 4px 6px; gap: 4px; font-size: 0.64rem; }
  .lang__flag { width: 15px; }
  .header__actions { gap: 8px; }
}
/* 460 and not 400: between those two the switcher still spelled out PT/EN/ES
   and the header ran 8px past the viewport - a band that covers a lot of real
   phones held upright. The flags alone say the same thing in half the width. */
@media (max-width: 460px) {
  .lang__code { display: none; }
  .lang__btn { padding: 5px; }
}
/* Below this the logo and the controls stop fitting on one line and the whole
   page slides sideways - measured at 15px over at a 345px viewport and 55px at
   305px, which is what made the page scroll horizontally on small phones.
   Nothing is hidden: the brand and the three controls just get smaller. */
@media (max-width: 380px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .logo { font-size: 0.95rem; }
  .logo__icon { height: 30px; }
  .header__actions { gap: 6px; }
  .cart-toggle svg { width: 19px; height: 19px; }
  .nav-toggle { font-size: 1.3rem; }
}
/* The folding phones' cover screen, around 265px of viewport. Rare, but it is
   the width at which the header still ran 40px over. */
@media (max-width: 300px) {
  .logo { font-size: 0.8rem; }
  .logo__icon { height: 24px; }
  .lang__flag { width: 13px; }
  .lang__btn { padding: 4px; }
  .header__actions { gap: 4px; }
}
.cart-toggle {
  position: relative;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  display: flex;
}
.cart-toggle__count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Hero — kept short on purpose. Everything here is worth showing, but none of
   it sells: the first row of lupas has to be reachable without scrolling, so
   the spacing is the tightest that still lets the block breathe. */
.hero {
  position: relative;
  padding: clamp(52px, 6vw, 76px) 0 clamp(44px, 5vw, 60px);
  background: #100e0d;
  overflow: hidden;
  isolation: isolate;
}
.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.band__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.band__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 50% 8%, rgba(200,29,37,0.30), transparent 62%),
    radial-gradient(50% 60% at 50% 100%, rgba(212,165,61,0.12), transparent 70%);
}
.band__glow--soft {
  background:
    radial-gradient(85% 110% at 50% 0%, rgba(200,29,37,0.17), transparent 66%),
    radial-gradient(60% 80% at 50% 100%, rgba(212,165,61,0.07), transparent 72%);
}
.band__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 78%);
}
.hero__lens {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 42%);
  height: auto;
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__lens .rivets {
  stroke-width: 3;
  stroke-dasharray: 0.1 16.2;
}
.hero__lens .lens { fill: url(#rl-lensfill); }

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.hero__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: 16px;
  text-shadow:
    -2px -2px 0 var(--text),
    2px -2px 0 var(--text),
    -2px 2px 0 var(--text),
    2px 2px 0 var(--text),
    4px 4px 0 rgba(0,0,0,0.35);
}
.hero__brand span { color: #fff; }
.hero__brand-icon {
  height: clamp(40px, 5.2vw, 58px);
  width: auto;
  display: block;
  margin-right: clamp(-6px, -0.5vw, -3px);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.42em;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 18px;
  text-indent: 0.42em;
}
.hero__rule {
  width: clamp(28px, 8vw, 78px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,165,61,0.65));
}
.hero__rule:last-child { background: linear-gradient(90deg, rgba(212,165,61,0.65), transparent); }
.hero__eyebrow-logo {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
  /* Carries the gap down to the buttons now that no subtitle sits between
     them. On the h1 rather than on .hero__actions, which the thank-you and
     404 pages reuse. */
  margin-bottom: 26px;
}
.hero h1 span {
  position: relative;
  color: transparent;
  background: linear-gradient(100deg, var(--accent-light), var(--accent) 55%, #8f1219);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 26px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
  color: rgba(255,255,255,0.42);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero__trust li { position: relative; }
.hero__trust li + li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(212,165,61,0.7);
  transform: translateY(-50%);
}

.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn__icon { width: 19px; height: 19px; flex-shrink: 0; }
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(200,29,37,0.85);
}
.btn--primary:hover { background: var(--accent-light); box-shadow: 0 16px 32px -12px rgba(200,29,37,0.9); }
.btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.24);
}
.btn--ghost:hover { border-color: rgba(255,255,255,0.55); color: #fff; }

@media (max-width: 560px) {
  .hero { padding: 88px 0 78px; }
  .hero__trust { margin-top: 40px; font-size: 0.68rem; gap: 8px 20px; }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
}

/* Sections */
.section { padding: 90px 0; }
/* The catalogue is what the visitor came for, so it starts close under the hero
   instead of a full section's breath below it. Only the section right after the
   hero is pulled up; the rest of the page keeps its rhythm. */
.hero + .section { padding-top: 46px; }

/* Dark band — shares the hero's visual identity */
.section--dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #100e0d;
  color: #fff;
}
.section--dark .container { position: relative; z-index: 1; }
.section--dark .section__title { color: #fff; }
.section--dark .about__text,
.section--dark .section__subtitle,
.section--dark .instagram__subtitle { color: rgba(255,255,255,0.6); }

/* Customer photos — a full-bleed strip. Arrows matter here: a mouse has no
   sideways gesture, so without them desktop visitors simply can't move it. */
.clientes__viewport { position: relative; }
.strip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(16,14,13,0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.strip-nav:hover { background: rgba(16,14,13,0.92); border-color: rgba(255,255,255,0.4); }
.strip-nav:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.strip-nav--prev { left: clamp(8px, 2vw, 24px); }
.strip-nav--next { right: clamp(8px, 2vw, 24px); }
.clientes__strip.dragging { cursor: grabbing; }
.clientes__strip.dragging img { pointer-events: none; }

.clientes__strip {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* No scroll-snap here: the loop nudges scrollLeft, and snapping would
     fight that and make the seam visible. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 clamp(16px, 5vw, 60px) 4px;
}
.clientes__strip::-webkit-scrollbar { display: none; }
.clientes__strip img {
  flex: 0 0 auto;
  width: clamp(150px, 21vw, 220px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  -webkit-user-drag: none;
  user-select: none;
}
.clientes__strip { cursor: grab; }

/* Oakley model silhouettes */
.models-pattern { position: absolute; inset: 0; }
.model {
  position: absolute;
  height: auto;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.085;
}
.model .bolt { fill: #fff; stroke: none; }
.model--1 { top: 12%; left: 2%; width: 250px; transform: rotate(-8deg); }
.model--2 { top: 7%; right: 4%; width: 215px; transform: rotate(5deg); opacity: 0.07; }
.model--3 { bottom: 10%; right: 12%; width: 265px; transform: rotate(-4deg); opacity: 0.06; }
.model--4 { bottom: 15%; left: 11%; width: 200px; transform: rotate(9deg); opacity: 0.07; }
.model--5 { top: 14%; left: 5%; width: 235px; transform: rotate(6deg); }
.model--6 { bottom: 12%; right: 6%; width: 255px; transform: rotate(-7deg); opacity: 0.07; }
.model--7 { top: 56%; left: 14%; width: 185px; transform: rotate(-3deg); opacity: 0.055; }
.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 40px;
}
.section__subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 48px;
}
.section__title:has(+ .section__subtitle) { margin-bottom: 12px; }
.section__title:has(+ .cats) { margin-bottom: 24px; }

/* Reassurances at the buy button — the answers people look for before paying */
.assurances {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.assurances li { display: flex; align-items: center; gap: 10px; }
.assurances svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* What ships in the box — the same for every model */
.includes {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.includes__title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.includes__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 0.92rem;
}
.includes__list li { display: flex; align-items: center; gap: 8px; }
.includes__list svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Decorative sunglasses pattern */
.section--pattern { position: relative; overflow: hidden; }
.shades-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.shades {
  position: absolute;
  width: 130px;
  /* 130 wide at the viewBox's 100:40 ratio. Stated rather than derived, so the
     browser reserves the box before the SVG is parsed instead of resizing it
     afterwards — this was the largest single layout shift on the home page. */
  height: 52px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.05;
}
.shades:nth-of-type(1) { top: 6%; left: 4%; transform: rotate(-8deg); }
.shades:nth-of-type(2) { top: 65%; left: 78%; width: 100px; transform: rotate(10deg); }
.shades:nth-of-type(3) { top: 40%; left: 42%; width: 160px; transform: rotate(-4deg); opacity: 0.035; }
.shades:nth-of-type(4) { top: 82%; left: 10%; width: 90px; transform: rotate(14deg); }

/* Decorative skull pattern */
.skull {
  position: absolute;
  width: 70px;
  fill: var(--text);
  opacity: 0.045;
}
.skull--catalogo:nth-of-type(5) { top: 78%; left: 88%; width: 55px; fill: var(--accent); opacity: 0.06; transform: rotate(-12deg); }
.skull--catalogo:nth-of-type(6) { top: 12%; left: 60%; width: 45px; fill: var(--text); opacity: 0.04; transform: rotate(15deg); }

/* Category tabs — one per category found in the catalogue */
.cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 34px;
}
.cats:has(+ .section__subtitle) { margin-bottom: 14px; }
.cats__tab {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cats__tab:hover { color: var(--text); border-color: var(--text-muted); }
.cats__tab.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.cats__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Products */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(28,27,25,0.08); }
.product-card__image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #eeece5, #f8f7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  overflow: hidden;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card__image { text-decoration: none; }

/* Leafing through a model's photos without leaving the catalogue */
.product-card__media { position: relative; }
.card-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.card-track::-webkit-scrollbar { display: none; }
.card-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  -webkit-user-drag: none;
}
.card-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(22,20,19,0.3);
  /* Out of the way until wanted — but always there on touch, which has no hover */
  opacity: 0;
  transition: opacity 0.18s, background 0.18s;
}
.card-nav--prev { left: 8px; }
.card-nav--next { right: 8px; }
.product-card:hover .card-nav,
.card-nav:focus-visible { opacity: 1; }
.card-nav:hover { background: #fff; }
@media (hover: none) {
  .card-nav { opacity: 1; }
}
.product-card__body { padding: 18px 20px 22px; }
.product-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  color: var(--text);
  text-decoration: none;
}
.product-card__name:hover { color: var(--accent); text-decoration: underline; }
.product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 14px;
}
.price__now { color: var(--accent); font-weight: 700; font-size: 1.15rem; }
.price__old {
  color: var(--text-muted);
  font-size: 0.88rem;
  text-decoration-thickness: 1.5px;
}
.price__off {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

/* Available colours */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Wraps because a model can carry a lot of variants — Plate has seven. */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 10px; }
.swatch {
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 1.5px rgba(255,255,255,0.22);
}
button.swatch { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
button.swatch:hover { transform: scale(1.12); }
button.swatch.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent),
    inset 0 1px 1.5px rgba(255,255,255,0.22);
}
button.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.product-detail__info .swatches { margin: 14px 0 4px; }
.product-detail__info .swatch { width: 18px; height: 18px; }
/* Several variants of a model can share an armação and differ only in the
   lente, so the dots need a caption to be read on a phone, where there is no
   tooltip. */
.color-name { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 2px; }
.cart-item__color {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 2px 0 4px;
}
.cart-item__color .swatch { width: 11px; height: 11px; }
.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card__btn {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--text);
  color: var(--text);
  padding: 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.product-card__btn:hover { background: var(--text); color: #fff; }

/* About */
.about { max-width: 720px; margin: 0 auto; text-align: center; }
.about__text { color: var(--text-muted); font-size: 1.05rem; margin-top: 10px; }

/* Contact */
.contact__text { color: var(--text-muted); margin-bottom: 12px; }
.contact__text strong { color: var(--text); }
.contact__text a { color: var(--accent); text-decoration: none; }

/* Instagram */
.instagram {
  padding: 110px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.instagram__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 430px;
  opacity: 0.22;
  filter: brightness(1.45) saturate(1.25);
  pointer-events: none;
}
.instagram__content {
  position: relative;
  text-align: center;
}
.instagram__subtitle {
  color: var(--text-muted);
  max-width: 480px;
  margin: 16px auto 32px;
}

/* Footer */
.footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 32px 0;
  background: #0b0a09;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255,255,255,0.42);
  font-size: 0.85rem;
}
.footer__note { font-size: 0.78rem; color: rgba(255,255,255,0.34); }
.footer a { color: rgba(255,255,255,0.66); }
.footer a:hover { color: #fff; }

/* Product detail page */
.product-page { padding-top: 50px; }
.back-link {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--accent); }
.product-page__missing { text-align: center; padding: 60px 0; }
.product-page__missing p { color: var(--text-muted); margin-bottom: 20px; }

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.product-detail__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eeece5, #f8f7f3);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.product-detail__stage .lightbox__nav { background: rgba(255,255,255,0.9); }

/* Photos side by side; the browser's own snap does the swiping */
.gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  user-select: none;
  -webkit-user-drag: none;
}
.product-detail__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.product-detail__thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--bg-alt);
}
.product-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail__thumb.active { border-color: var(--accent); }

.product-detail__info h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom: 10px;
}
.product-detail__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 20px;
}
.product-detail__price .price__now { font-size: 1.5rem; }
.product-detail__price .price__old { font-size: 1rem; }
.product-detail__price .price__off { font-size: 0.76rem; }
.product-detail__history {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.product-detail__history h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--text);
}
.product-detail__history p {
  color: var(--text-muted);
  line-height: 1.7;
}

@media (max-width: 760px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* Gallery arrows — kept for the product page, which reuses these classes */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.lightbox__nav:hover { background: var(--surface); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

/* Cart drawer */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.cart-drawer.open { display: block; }
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,27,25,0.4);
}
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,0.12);
}
.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}
.cart-drawer__close {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}
.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.cart-drawer__empty { color: var(--text-muted); text-align: center; margin-top: 40px; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cart-item__thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--bg-alt);
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item__info { flex: 1; }
.cart-item__name { font-size: 0.9rem; font-weight: 600; }
.cart-item__price { font-size: 0.82rem; color: var(--text-muted); }
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-item__qty button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.cart-item__remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 4px;
}
.cart-drawer__footer {
  padding: 20px 24px 26px;
  border-top: 1px solid var(--border);
}
.cart-drawer__total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.cart-drawer__checkout { width: 100%; }
.cart-drawer__note {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 760px) {
  .nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: none;
  }
  .nav.open { display: flex; }
  .nav-toggle { display: block; }
}

/* Consent banner. Both buttons are deliberately identical in size, weight and
   contrast: EU guidance treats a prominent "accept" beside a faint "reject" as
   consent that was never freely given. Only appears once consent.js has a
   pixel id to ask about. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(22, 20, 19, 0.10);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}
.consent__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.consent__text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.consent__link {
  color: var(--text);
  text-decoration: underline;
  white-space: nowrap;
}
.consent__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.consent__btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px 26px;
  border: 1px solid var(--text);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-width: 118px;
}
.consent__btn:hover { background: var(--bg-alt); }
.consent__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1; min-width: 0; }
}

/* The withdraw control inside the privacy policy. */
.consent__inline {
  font: inherit;
  font-size: 0.95rem;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.consent__inline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Country picker in the cart. The rate depends on where the parcel goes and
   Stripe cannot decide that from an address typed after checkout starts, so
   the choice has to be made here — and be visible next to the total. */
.cart-ship {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.cart-ship select {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.cart-ship select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Discount code. Deliberately quieter than the checkout button below it: a
   customer with a code goes looking for the field, and one without should not
   be told twice that a better price exists somewhere. */
.cart-coupon {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.cart-coupon__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.9rem;
  /* No text-transform here on purpose. Codes are matched exactly, so drawing a
     lowercase code in capitals would show the customer a code that looks right
     and then tell them it does not exist. The field shows what was typed; the
     keyboard is asked for capitals instead, by autocapitalize on the input. */
  letter-spacing: 0.04em;
  color: var(--text);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cart-coupon__input::placeholder {
  letter-spacing: normal;
  color: var(--text-muted);
}
.cart-coupon__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cart-coupon__apply {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  cursor: pointer;
  white-space: nowrap;
}
.cart-coupon__apply:hover { border-color: var(--text-muted); }
.cart-coupon__apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reserved whether or not there is anything to say, so applying a code does
   not shove the total and the button down the drawer. */
.cart-coupon__msg {
  min-height: 1.15rem;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.cart-coupon__msg--good { color: #1c7c46; }
.cart-coupon__msg--bad { color: var(--accent); }

.cart-drawer__discount {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #1c7c46;
}
.cart-drawer__discount-value { font-weight: 600; }

/* Customer reviews. Hidden entirely when a model has none — Google requires
   review markup to match something the visitor can actually read, so the
   section and the schema appear and disappear together. */
.reviews { margin-top: 38px; }
.reviews h2 { font-size: 1.2rem; margin-bottom: 14px; }
.reviews__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.reviews__summary strong { color: var(--text); font-size: 1.05rem; }
.stars {
  color: var(--gold);
  letter-spacing: 0.06em;
  font-size: 0.98rem;
  white-space: nowrap;
}
.review {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.review__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 0.88rem;
}
.review__head strong { color: var(--text); }
.review__head time { color: var(--text-muted); font-size: 0.82rem; }
.review__text { color: var(--text-muted); line-height: 1.65; }