/* ===========================================================================
   OFFS — design system (ported from the Next.js app's globals.css)
   Cream-dominant, near-black ink, warm grey, soft-pink accent. Applied to the
   Elementor build via .offs-* utility classes assigned to elements.
   =========================================================================== */

:root {
  --offs-black: #101012;
  --offs-ink: #1a1a1a;
  --offs-graphite: #45433d;
  --offs-ash: #8c877d;
  --offs-silver: #c4bfb4;
  --offs-mist: #ddd8cc;
  --offs-stone: #e8e2d5;
  --offs-cream: #f1ebdd;
  --offs-bone: #f8f4ea;
  --offs-blush: #d9a3ab;
  --offs-blush-soft: #eed9dc;
  --offs-ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --offs-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Base ---- */
body {
  background: var(--offs-cream);
  color: var(--offs-ink);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.elementor-editor-active { overflow-x: visible; }

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

/* ---- Type treatments (inheritable; cascade into Elementor inner tags) ---- */
.offs-display,
.offs-display .elementor-heading-title {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
}
.offs-tight,
.offs-tight .elementor-heading-title {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.offs-eyebrow,
.offs-eyebrow .elementor-heading-title {
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  font-size: 0.6875rem;
}
.offs-serif,
.offs-serif .elementor-heading-title,
.offs-serif p {
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---- Width helpers ---- */
.offs-maxw-2xl { max-width: 42rem; }
.offs-maxw-xl { max-width: 36rem; }
.offs-maxw-md { max-width: 28rem; }

/* "View all" editorial link */
.offs-viewall {
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--offs-ink);
  text-decoration: none; border-bottom: 1px solid var(--offs-ink); padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.offs-viewall:hover { color: var(--offs-ash); border-color: var(--offs-ash); }

/* ---- Hairlines ---- */
.offs-hairline { border: 0; border-top: 1px solid var(--offs-silver); }

/* ---- Product card (matches components/ProductTile.tsx) ---- */
.offs-card-grad {
  background: linear-gradient(to bottom, var(--offs-bone), var(--offs-stone));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offs-aspect-45 { aspect-ratio: 4 / 5; }
/* faint baseline shadow under the silhouette */
.offs-card-grad::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 14%;
  height: 22px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.06);
  filter: blur(10px);
  z-index: 0;
}
.offs-card-grad img { position: relative; z-index: 1; }
/* badge / tag, top-left */
.offs-card-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  color: var(--offs-ash);
}
.offs-card-tag:empty { display: none; }
/* "View →" reveal, bottom-right */
.offs-view {
  position: absolute; bottom: 16px; right: 16px; z-index: 2;
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--offs-ink);
}
.offs-prodcard { text-decoration: none; }
.offs-prodcard:hover .offs-prodname .elementor-heading-title { text-decoration: underline; text-underline-offset: 3px; }
.offs-prodname .elementor-heading-title { font-family: "Inter", sans-serif; }

/* ---- Hero ---- */
.offs-hero-bg,
.offs-hero-bg .elementor-widget-container { position: absolute; inset: 0; height: 100%; width: 100%; margin: 0; }
.offs-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.9; }
.offs-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(16,16,18,0.88) 0%, rgba(16,16,18,0.25) 55%, rgba(16,16,18,0.38) 100%);
}
.offs-hero-h1 .elementor-heading-title { white-space: pre-line; }
.offs-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.offs-hero-link {
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--offs-bone);
  text-decoration: none; display: inline-flex; align-items: center; gap: 12px;
}
.offs-hero-link span { transition: transform .3s ease; }
.offs-hero-link:hover span { transform: translateX(4px); }
.offs-hero-link.muted { color: rgba(248,244,234,0.6); }
.offs-hero-link.muted:hover { color: var(--offs-bone); }
.offs-hero-link:not(.muted) { border-bottom: 1px solid rgba(248,244,234,0.5); padding-bottom: 4px; }

/* ---- Silver / chrome ---- */
.offs-chrome {
  background: linear-gradient(135deg, #eceae3 0%, #bdb8ac 36%, #f4f2eb 52%, #a9a49a 70%, #ded9ce 100%);
}

/* ---------------------------------------------------------------------------
   Editorial colour grade — one muted, warm filmic look across all imagery.
   --------------------------------------------------------------------------- */
.offs-grade img,
.offs-grade .elementor-widget-container > img,
img.offs-grade { filter: saturate(0.6) contrast(1.05) brightness(1) sepia(0.1); }

.offs-grade-soft img,
img.offs-grade-soft { filter: saturate(0.72) contrast(1.03) brightness(1.01) sepia(0.06); }

/* dark full-bleed heroes: keep mood, lift legibility, mute colour */
.offs-grade-dark img,
img.offs-grade-dark { filter: saturate(0.62) contrast(1.08) brightness(0.94) sepia(0.08); }

/* ---- Ken Burns drift on full-bleed editorial images ---- */
@keyframes offs-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.offs-kenburns img { animation: offs-kenburns 22s var(--offs-ease-expo) both; transform-origin: center; will-change: transform; }

/* ---- Subtle image-hover zoom on editorial tiles ---- */
.offs-zoom img { transition: transform 1.2s var(--offs-ease-editorial); }
.offs-zoom:hover img { transform: scale(1.05); }

/* ---- Marquee (announcement bar / strips) ---- */
@keyframes offs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Animated text-link underline (nav / CTAs) ---- */
.offs-ul .elementor-button,
.offs-ul a { position: relative; }

/* ---- Loop Grid: product card hover "View →" + name underline ---- */
.offs-prodcard .offs-view { opacity: 0; transform: translateY(4px); transition: all .5s var(--offs-ease-editorial); }
.offs-prodcard:hover .offs-view { opacity: 1; transform: translateY(0); }

/* Strikethrough compare-at price */
.offs-strike,
.offs-strike .elementor-heading-title { text-decoration: line-through; }

/* Hide horizontal scrollbars on carousels/filters */
.offs-nobar::-webkit-scrollbar { display: none; }
.offs-nobar { scrollbar-width: none; -ms-overflow-style: none; }

@media (prefers-reduced-motion: reduce) {
  .offs-kenburns img { animation: none; }
  .offs-zoom img, .offs-zoom:hover img { transition: none; transform: none; }
}