/* ============================================================================
 * styles.css — LAVA SHOP overrides.
 *
 * Loaded AFTER plugins.css + style.css (the template stylesheet). This layer:
 *   - self-hosts Roobert (replaces DM Sans)
 *   - sets the #0a0a0a / white dark theme
 *   - turns the template cursor into a pill on category hover
 *   - styles the new pieces: currency preloader, categories grid, products,
 *     filter bar, currency switcher
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * ROOBERT — converted from /fonts/roobert via fonttools (see fonts/README.txt)
 * ------------------------------------------------------------------------- */
@font-face { font-family: "Roobert"; src: url("../fonts/roobert/RoobertLight.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert"; src: url("../fonts/roobert/RoobertLightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roobert"; src: url("../fonts/roobert/RoobertRegular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert"; src: url("../fonts/roobert/RoobertMedium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert"; src: url("../fonts/roobert/RoobertMediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roobert"; src: url("../fonts/roobert/RoobertSemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roobert"; src: url("../fonts/roobert/RoobertBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

body, button, input, select, textarea { font-family: "Roobert", "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* Hide the system cursor on the page — the custom #mouseCursor replaces it.
   (Scoped to body only; restored at the viewport edge via JS in scripts.js.) */
body { cursor: none; }

/* Custom cursor — fixed + centered on the pointer (movement set via left/top in scripts.js) */
#mouseCursor {
  position: fixed !important;
  transform: translate(-50%, -50%) !important;
}

/* ---------------------------------------------------------------------------
 * Dark theme — force #0a0a0a background + white text
 * ------------------------------------------------------------------------- */
body.dark {
  --mainColor: #ffffff !important;
  --mainBackground: #0a0a0a !important;
  --secondaryBackground: #0a0a0a !important;
}

/* Horizontal page padding — matches the template wrapper (max-width: 90%, ~5% gutters) */
:root { --wrapper-padding: 5%; }

/* ============================================================================
 * HERO headline — override template .text-h1 sizing to spec
 * ========================================================================== */
.hero-headline {
  font-size: clamp(1.8rem, 5.8vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: justify;
  text-align-last: left;       /* last line flush left, not justified */
  -moz-text-align-last: left;
}
/* Hero text box — 72% of the wrapper, centered; width drives the line breaks */
.hero-textbox { width: 72%; margin: 0 auto; }

/* Mouse-following mask on the hero image — a 130px transparent hole at the
   pointer (--cx/--cy set on the image by hero-anim.js; default centered). */
#hero-image {
  -webkit-mask-image: radial-gradient(circle 130px at var(--cx, 50%) var(--cy, 50%), transparent 30%, black 100%);
  mask-image: radial-gradient(circle 130px at var(--cx, 50%) var(--cy, 50%), transparent 30%, black 100%);
  transition: mask-position 0.05s ease;
}
.hero-headline .hh-medium { font-weight: 500; text-transform: uppercase; }
.hero-headline .hh-light { font-weight: 300; } /* sentence case, kept as authored */

/* Non-link hero text blends individually (wrapper no longer carries `blend`) */
.blend-text { mix-blend-mode: difference; }

/* Inline category links inside the hero text.
   Each link OWNS its blend (not inherited from a parent), so hover can cancel it
   and reveal the true --link-color. mix-blend-mode also makes its own stacking
   context, so the underline isn't clipped. */
.hero-link {
  color: white;
  text-decoration: none;
  position: relative;          /* containing block for the ::before hit area */
  display: inline-block;
  pointer-events: auto;
  mix-blend-mode: difference;
  padding-bottom: 5px;          /* push the underline away from the text */
  /* Underline via background-image gradient (thickness in em scales with font) */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 0.06em;
  background-repeat: no-repeat;
  background-position: right bottom 0px;
  transition: background-size 0.6s ease, color 0.6s ease;
}
/* Invisible expanded hit area — 12px vertical, 10px horizontal, no layout impact */
.hero-link::before {
  content: '';
  position: absolute;
  inset: -12px -10px;
}
.hero-link:hover {
  color: var(--link-color);
  mix-blend-mode: normal; /* cancel blend on hover so the true color shows */
  background-size: 100% 0.06em;
  background-position: left bottom 0px;
}

.hero-link--branding { --link-color: #9765F6; }
.hero-link--social   { --link-color: #F0DE18; }
.hero-link--design   { --link-color: #22C55E; }
/* Design link: expand the hit area upward (top -20px), no downward expansion (clips otherwise) */
.hero-link--design::before { inset: -20px -10px 0px -10px; }

/* Hero section — lock to one viewport so the absolute bottom row never crowds the text.
   !important needed: .section.fullscreen { height:auto } outranks .hero-section on specificity. */
.hero-section {
  position: relative;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden;
}

/* Hero wrapper — center the headline vertically in the 100vh hero */
.section.fullscreen .hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.section.fullscreen .hero-wrapper > div { float: none; }

/* Bottom row — absolute, 40px from hero bottom; circular left, © block right */
.hero-bottom-row {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0 var(--wrapper-padding);
  pointer-events: none; /* don't intercept hover/clicks meant for the hero text/links */
}
.hero-bottom-left { align-self: center; } /* circular centered to the text block */
.hero-bottom-right {
  margin-left: auto;       /* push to the right edge */
  text-align: right;
  /* no color override — inherits white (var(--mainColor)) */
}
.hero-bottom-right p { margin: 0; }
.hero-bottom-right .hbr-studio { max-width: 22ch; margin-left: auto; } /* wrap to lines 2–3 */

/* ============================================================================
 * CURSOR → PILL on category hover.
 * The template adds .hover-text (+ shows data-cursor-text) on .cursor-text
 * elements. We reshape that state from a circle into a rounded pill.
 * ========================================================================== */
#mouseCursor.hover-text {
  width: auto !important;
  height: auto !important;
  border-radius: 100px;
  background: #ffffff;
  padding: 16px 30px;
  overflow: visible;
  opacity: 1 !important;
}
#mouseCursor.hover-text svg,
#mouseCursor.hover-text .mouse-cursor-icon { display: none; }
#mouseCursor.hover-text .mouse-cursor-text {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  color: #0a0a0a;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 400;
  text-transform: none; /* sentence case — keep label as authored */
  letter-spacing: 0.01em;
}
#mouseCursor.hover-text .mouse-cursor-text span { transform: none; }

/* ============================================================================
 * CURRENCY PRELOADER — full-screen first-visit overlay
 * ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the template page-loader */
  display: none; /* preloader.js sets flex on first visit */
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.preloader--hidden { opacity: 0; pointer-events: none; }
.preloader__inner { text-align: center; padding: 2rem; max-width: 680px; }
.preloader__title {
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: #fff;
}
.preloader__subtitle { color: rgba(255,255,255,0.6); margin: 0 0 2.5rem; font-size: 1.05rem; }
.preloader__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .preloader__choices { grid-template-columns: 1fr; } }
.preloader__btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 2rem 1rem;
  background: #141414;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: #fff;
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.preloader__btn:hover { border-color: #fff; transform: translateY(-2px); }
.preloader__flag { font-size: 2rem; }

/* ============================================================================
 * NAV — currency switcher (lives in the header)
 * ========================================================================== */
.currency-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}
.currency-switch button {
  background: none; border: none; cursor: pointer;
  color: var(--mainColor); font-family: inherit; font-size: inherit;
  opacity: 0.45; padding: 0; transition: opacity 0.2s ease;
}
.currency-switch button:hover { opacity: 0.8; }
.currency-switch button.is-active { opacity: 1; font-weight: 600; }
.currency-switch .sep { opacity: 0.3; }

/* ============================================================================
 * CATEGORIES GRID — full-width 2×2, full-bleed images, no text (cursor pill)
 * ========================================================================== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}
.category-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #141414;
}
.category-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.category-card:hover img { transform: scale(1.05); }
/* Dark overlay on hover */
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.category-card:hover::after { opacity: 1; }
@media (max-width: 720px) {
  .categories-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * PRODUCTS + FILTER BAR (products.html)
 * ========================================================================== */
.shop-filters {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin: 0 0 2.5rem;
}
.shop-filters button {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--mainColor);
  font-family: inherit; font-size: 0.9rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.shop-filters button:hover { border-color: #fff; }
.shop-filters button.is-active { background: #fff; color: #0a0a0a; border-color: #fff; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.card {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.card.is-hidden { display: none; }
.card:hover { transform: translateY(-4px); border-color: #fff; }
.card__media { aspect-ratio: 4 / 3; background: #1d1d1d; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.card__cat {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45); margin: 0 0 0.5rem;
}
.card__title { margin: 0 0 0.4rem; font-size: 1.15rem; font-weight: 600; }
.card__desc { margin: 0 0 1.25rem; color: rgba(255,255,255,0.6); font-size: 0.9rem; flex: 1; }
.card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.card__price { font-weight: 700; font-size: 1.1rem; }

.btn {
  font-family: inherit; font-weight: 600; cursor: pointer;
  border: none; border-radius: 999px;
  padding: 0.65rem 1.3rem; font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.1s ease;
}
.btn--buy { background: #fff; color: #0a0a0a; }
.btn--buy:hover { background: #ff5722; color: #fff; }
.btn--buy:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: progress; }

.shop-section { padding: clamp(7rem, 12vw, 11rem) 0 6rem; }
.shop-empty { color: rgba(255,255,255,0.5); padding: 2rem 0; }

/* ============================================================================
 * CIRCULAR TEXT — muted color on all viewports
 * ========================================================================== */
.nayla-circular-text,
.nayla-circular-text .circle-char,
.nayla-circular-text .circle-word,
.nayla-circular-text .circle-text,
.nayla-circular-text span.material-icons {
  color: #77747a;
}

/* ============================================================================
 * RESPONSIVE — mobile (<= 767px)
 * ========================================================================== */
@media (max-width: 767px) {

  /* --- NAV: no overlap; logo left, Shop/currency right, wrap if needed --- */
  #header .header-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
  }
  #header .header-wrapper > div {
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto;
  }
  #header .site-logo img { max-height: 26px; width: auto; }
  #header #site-navigation.classic ul.main-menu {
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }
  #header #site-navigation.classic ul.main-menu > li > a { font-size: 0.9rem; }
  .currency-switch { font-size: 0.85rem; }

  /* --- HERO TEXT: full-width, left-aligned, natural wrapping on mobile --- */
  .hero-textbox { width: 100%; }
  .hero-headline {
    font-size: clamp(2.8rem, 9vw, 4.5rem);
    line-height: 1.05;
    text-align: left;
    -moz-text-align-last: left;
    text-align-last: left;
  }

  /* --- CIRCULAR TEXT: shrink ~180px -> ~100px (100/180 ≈ 0.56) --- */
  .nayla-circular-text {
    transform: scale(0.56);
    transform-origin: center bottom;
  }
}