/* =================================================================
   UNIQ — Base: reset, typography, layout, chrome (header/footer/cart)
   ================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--text-on-dark);
  background: var(--bg-stage);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: var(--r-xs); }

/* ---------- Typography helpers ---------- */
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-tight); line-height: 0.92; text-transform: uppercase; }
.font-editorial { font-family: var(--font-editorial); font-weight: 300; letter-spacing: var(--tracking-tight); line-height: 1.02; }
.eyebrow {
  font-size: var(--fs-micro); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.6em;
}
.eyebrow::before { content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.5; }
[dir='rtl'] .eyebrow { letter-spacing: 0; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); z-index: var(--z-content); }
.section--paper { background: var(--bg-paper); color: var(--text-on-paper); }
.section--stage { background: var(--bg-stage); color: var(--text-on-dark); }
.section--flush { padding-block: 0; }
.stack > * + * { margin-top: var(--sp-3); }

/* ---------- Film grain + atmosphere ---------- */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: var(--z-grain);
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 7s steps(6) infinite;
}
@keyframes grain-shift {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); } 60% { transform: translate(-3%,-2%); } 80% { transform: translate(4%,2%); }
}

/* Crystal ghost watermark */
.ghost-crystal {
  position: absolute; pointer-events: none; opacity: 0.05;
  color: currentColor; z-index: 0;
}

/* ---------- Real logo ---------- */
.uniq-logo { display: block; width: auto; }
.brand-lockup .uniq-logo { filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--c-ink) 30%, transparent)); }

/* ---------- Loading splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center; gap: var(--sp-3);
  background:
    radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--c-green) 40%, transparent), transparent 70%),
    var(--c-ink);
  transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
#splash.hide { opacity: 0; visibility: hidden; }
#splash .uniq-logo { height: clamp(140px, 24vh, 230px); animation: splash-rise var(--dur-4) var(--ease-spring) both; }
#splash .splash-bar { width: 120px; height: 2px; background: color-mix(in srgb, var(--c-cream) 18%, transparent); overflow: hidden; border-radius: 2px; }
#splash .splash-bar::after { content: ''; display: block; height: 100%; width: 40%; background: var(--c-gold); animation: splash-load 1.2s var(--ease-out) infinite; }
@keyframes splash-rise { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes splash-load { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { #splash .uniq-logo, #splash .splash-bar::after { animation: none; } }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  pointer-events: none; z-index: var(--z-cursor);
  transform: translate(-50%, -50%); will-change: transform;
  mix-blend-mode: difference;
}
.cursor-dot { width: 6px; height: 6px; background: var(--c-cream); }
.cursor-ring {
  width: 38px; height: 38px; border: 1px solid var(--c-cream);
  transition: width var(--dur-2) var(--ease-spring), height var(--dur-2) var(--ease-spring), opacity var(--dur-2);
}
.cursor-ring.is-hover { width: 64px; height: 64px; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-cream));
  z-index: var(--z-header); will-change: transform;
}
[dir='rtl'] .scroll-progress { transform-origin: 100% 50%; }

/* =================================================================
   Announcement bar — fixed strip above the header, kinetic ticker
   ================================================================= */
.announce-bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: calc(var(--z-header) + 1);
  height: var(--announce-h, 2.35rem);
  display: flex; align-items: center; overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-gold) 10%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--c-gold) 10%, transparent)),
    linear-gradient(180deg, var(--c-green), var(--c-green-900));
  color: var(--c-cream);
  border-bottom: 1px solid color-mix(in srgb, var(--c-gold) 22%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--c-green-900) 30%, transparent);
}
.announce-bar__track {
  display: inline-flex; align-items: center; gap: 2.6rem; white-space: nowrap;
  padding-inline-start: 2.6rem;
  animation: marquee-x calc(40s / var(--motion)) linear infinite;
  will-change: transform;
}
[dir='rtl'] .announce-bar__track { animation-direction: reverse; }
.announce-bar:hover .announce-bar__track { animation-play-state: paused; }
.announce-bar__item {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase;
}
[dir='rtl'] .announce-bar__item { letter-spacing: 0.04em; }
.announce-bar__dot { color: var(--c-gold); font-size: 0.6rem; }
.is-studio-preview .announce-bar { pointer-events: none; }

body.has-announce { --announce-h: 2.35rem; padding-block-start: var(--announce-h); }
body.has-announce .site-header { inset-block-start: var(--announce-h); }
body.has-announce .scroll-progress { top: var(--announce-h); }

@media (max-width: 920px) {
  .announce-bar { height: var(--announce-h, 2.1rem); }
  body.has-announce { --announce-h: 2.1rem; }
  .announce-bar__track { gap: 1.8rem; padding-inline-start: 1.8rem; }
  .announce-bar__item { font-size: 0.6rem; letter-spacing: 0.16em; }
}

/* =================================================================
   Header / nav
   ================================================================= */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--gutter);
  transition: background var(--dur-2) var(--ease-out), padding var(--dur-2) var(--ease-out), border-color var(--dur-2);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--c-ink) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line);
  padding-block: calc(var(--sp-1) * 1.4);
}
/* Pages that don't open on a dark hero get a permanently solid header + top offset */
body.solid-header .site-header {
  background: color-mix(in srgb, var(--c-ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
body.solid-header main#app { padding-top: 76px; }

.brand-lockup { display: flex; align-items: center; gap: 0.7rem; }
.brand-lockup .mark { width: 30px; height: 38px; color: var(--c-cream); }
.brand-lockup .word { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 0.02em; line-height: 1; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.4rem); }
.nav-link {
  position: relative; font-size: var(--fs-small); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500; padding-block: 0.4rem;
}
.nav-link::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: inherit;
  transition: transform var(--dur-2) var(--ease-spring);
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 0.4rem; }
.icon-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-pill);
  position: relative; transition: background var(--dur-1), transform var(--dur-1) var(--ease-spring);
}
.icon-btn:hover { background: color-mix(in srgb, var(--c-cream) 12%, transparent); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 4px; inset-inline-end: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--c-gold); color: var(--c-ink); border-radius: var(--r-pill);
  font-size: 0.62rem; font-weight: 700; display: grid; place-items: center; line-height: 1;
}
.lang-toggle {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.05em;
  padding: 0.45rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.lang-toggle:hover { background: var(--c-cream); color: var(--c-ink); border-color: var(--c-cream); }
.menu-toggle { display: none; }

/* The fixed header sits over the page's first section before it's scrolled.
   Its default cream text/icons assume a dark "stage" hero underneath — on
   pages that open with the light "paper" surface (checkout, account) that
   makes the header unreadable until .is-scrolled kicks in. */
body:has(#app > .section--paper:first-child) .site-header:not(.is-scrolled) { color: var(--text-on-paper); }
body:has(#app > .section--paper:first-child) .site-header:not(.is-scrolled) .brand-lockup .mark { color: var(--c-green); }
body:has(#app > .section--paper:first-child) .site-header:not(.is-scrolled) .icon-btn:hover { background: color-mix(in srgb, var(--c-green) 10%, transparent); }

@media (max-width: 920px) {
  .nav { position: fixed; inset: 0; height: 100svh; flex-direction: column; justify-content: center; gap: var(--sp-3);
    background: color-mix(in srgb, var(--c-ink) 96%, transparent); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transform: translateY(-16px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring), visibility var(--dur-2);
    z-index: 55; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-link { font-size: 1.6rem; }
  .menu-toggle { display: grid; }
}

/* =================================================================
   Buttons
   ================================================================= */
.btn {
  --btn-bg: var(--c-cream); --btn-fg: var(--c-ink);
  position: relative; display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.8rem; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-fg);
  overflow: hidden; isolation: isolate;
  transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-2);
  box-shadow: var(--shadow-1);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom;
  background: var(--c-green); transition: transform var(--dur-2) var(--ease-spring);
}
.btn:hover { color: var(--c-cream); box-shadow: var(--shadow-float); }
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: scale(0.97); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border: 1px solid var(--line-strong); box-shadow: none; }
.btn--ghost::before { background: var(--c-cream); }
.btn--ghost:hover { color: var(--c-ink); }
.btn--block { width: 100%; justify-content: center; }
.btn .arr { transition: transform var(--dur-2) var(--ease-spring); }
.btn:hover .arr { transform: translateX(4px); }
[dir='rtl'] .btn:hover .arr { transform: translateX(-4px) scaleX(-1); }
[dir='rtl'] .btn .arr { transform: scaleX(-1); }

.magnetic { will-change: transform; }

/* =================================================================
   Cart drawer
   ================================================================= */
.drawer-scrim {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--c-ink) 60%, transparent);
  backdrop-filter: blur(3px); opacity: 0; visibility: hidden; z-index: var(--z-drawer);
  transition: opacity var(--dur-2), visibility var(--dur-2);
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 92vw);
  background: var(--bg-paper); color: var(--text-on-paper); z-index: calc(var(--z-drawer) + 1);
  transform: translateX(100%); transition: transform var(--dur-3) var(--ease-spring);
  display: flex; flex-direction: column; box-shadow: var(--shadow-float);
}
[dir='rtl'] .cart-drawer { transform: translateX(-100%); }
.cart-drawer.is-open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.cart-head h3 { font-family: var(--font-editorial); font-size: var(--fs-h3); }
.cart-items { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.cart-empty { margin: auto; text-align: center; color: var(--text-on-paper-dim); padding: var(--sp-5) 0; }
.cart-line { display: grid; grid-template-columns: 74px 1fr auto; gap: var(--sp-2); align-items: center; }
.cart-line img { width: 74px; height: 92px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.cart-line .meta { font-size: var(--fs-small); }
.cart-line .meta strong { display: block; font-weight: 600; }
.cart-line .meta span { color: var(--text-on-paper-dim); }
.qty { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.qty button { width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); display: grid; place-items: center; transition: background var(--dur-1); }
.qty button:hover { background: var(--c-green); color: var(--c-cream); }
.cart-foot { padding: var(--sp-3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); }
.cart-row { display: flex; justify-content: space-between; font-size: var(--fs-small); }
.cart-row.total { font-size: var(--fs-h3); font-family: var(--font-editorial); }
.cart-row.discount span:last-child { color: var(--c-gold); font-weight: 600; }
.cart-vat { color: var(--text-on-paper-dim); font-size: var(--fs-micro); }
.cart-pay { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }

/* =================================================================
   Footer
   ================================================================= */
.site-footer { background: var(--c-ink); color: var(--text-on-dark); padding-block: var(--sp-6) var(--sp-3); position: relative; overflow: hidden; }

/* ---------- Utilities ---------- */
.split-line { display: block; overflow: hidden; }
.split-line > span { display: inline-block; will-change: transform; }
.reveal-up { opacity: 0; transform: translateY(28px); }
.is-inview .reveal-up, .reveal-up.is-inview { opacity: 1; transform: none; }
.divider { height: 1px; background: var(--line); width: 100%; }
.pill-tag {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* faceted clip echoing crystal */
.facet-clip { clip-path: polygon(0 0, 100% 0, 100% 86%, 92% 100%, 0 100%); }

/* WhatsApp floating order button */
.wa-fab {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: #25d366;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45), 0 2px 6px color-mix(in srgb, var(--c-ink) 30%, transparent);
  transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-2);
  animation: wa-pop var(--dur-4) var(--ease-spring) both;
}
.wa-fab:hover { transform: scale(1.08); box-shadow: 0 12px 30px rgba(37,211,102,0.55); }
.wa-fab:active { transform: scale(0.94); }
@keyframes wa-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 820px) { .wa-fab { inset-block-end: 88px; width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } }

/* Studio preview overlays (only when storefront is embedded in the builder) */
.is-studio-preview [data-block-id] { position: relative; cursor: pointer; }
.is-studio-preview [data-block-id].is-hover-outline { outline: 2px dashed color-mix(in srgb, var(--c-gold) 80%, transparent); outline-offset: -2px; }
.is-studio-preview [data-block-id].is-selected-outline { outline: 2px solid var(--c-gold); outline-offset: -2px; box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--c-gold) 5%, transparent); }
.is-studio-preview .site-header { pointer-events: none; }