/* Moleano storefront header + announcement bar.
   Extracted verbatim from the storefront app so the account pages carry
   the identical top bar rather than a lookalike. */

/* The storefront's global reset, scoped to the header. Without it the header's
   links fall back to the browser's default blue underline, because the app's
   own rules set colour but rely on `a { text-decoration: none }` globally. */
.announce, .announce *,
.site-header, .site-header *{ box-sizing: border-box; }
.site-header a,
.announce a{ color: inherit; text-decoration: none; }
.site-header img{ max-width: 100%; display: block; }
.site-header button{ font-family: inherit; cursor: pointer; border: none; background: none; }
.site-header .wrap{ margin: 0 auto; }
.announce{ margin: 0; padding: 0; }

:root {
  --obsidian: #0A0A0A;
  --graphite: #1A1D23;
  --panel: #12141A;
  --panel-2: #171A21;
  --silver: #C7CCD4;
  --silver-dim: #8A9099;
  --white: #F4F6F9;
  --blue: #4FA9FF;
  --blue-deep: #2B6FD6;
  --blue-glow: rgba(79, 169, 255, 0.35);
  --green: #22c07a;
  --line: rgba(199, 204, 212, 0.10);
  --line-soft: rgba(199, 204, 212, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --shadow: 0 20px 60px rgba(0,0,0,0.55);
  --font-display: "Raleway", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Matches the storefront's bar exactly: one message looping inside a narrow
   window in the middle, on every screen size. It used to be a static row of
   five phrases here and a moving one on the home page, which read as two
   different sites sharing a logo. */
.announce {
  background: #050506;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.announce .marquee {
  position: relative; overflow: hidden; height: 40px;
  width: min(440px, 76vw); margin: 0 auto;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.announce .marquee-track {
  display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap;
  width: max-content; will-change: transform;
  animation: mq-scroll 36s linear infinite;
}
.announce .mq-copy { display: inline-flex; align-items: center; }
.announce .mq-item {
  display: inline-flex; align-items: center; gap: 9px; padding: 0 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); white-space: nowrap;
}
.announce .mq-item b { color: var(--white); font-weight: 800; }
.announce .mq-item svg { width: 14px; height: 14px; stroke: var(--blue); fill: none; flex: none; }
.announce .mq-sep { color: var(--blue); opacity: 0.55; font-size: 8px; line-height: 1; }
.announce .marquee:hover .marquee-track { animation-play-state: paused; }
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,10,11,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 28px; height: 78px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand .wordmark b {
  font-family: var(--font-display); font-weight: 800; color: var(--white);
  font-size: 22px; letter-spacing: 0.34em; padding-left: 2px;
}
.brand .wordmark small {
  font-size: 7px; letter-spacing: 0.32em; color: var(--silver-dim);
  text-transform: uppercase; margin-top: 4px;
}
.main-nav { display: flex; align-items: center; gap: 30px; margin-left: 8px; }
.main-nav a {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: 0.06em; color: var(--silver); position: relative; padding: 6px 0;
  transition: color 0.2s;
}
.main-nav a:hover, .main-nav a.active { color: var(--white); }
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--blue); transition: width 0.25s;
}
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.main-nav .caret { font-size: 9px; opacity: 0.6; margin-left: 3px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.icon-btn {
  color: var(--silver); display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px; transition: 0.2s;
}
.icon-btn:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 12px; color: var(--white); font-weight: 600;
  font-size: 14px; transition: 0.2s; position: relative;
}
.cart-btn:hover { border-color: rgba(79,169,255,0.5); }
.cart-btn svg { width: 18px; height: 18px; stroke: var(--blue); }
.cart-btn .count {
  position: absolute; top: -8px; left: 24px;
  background: var(--blue); color: #041022; font-size: 10px; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center;
  padding: 0 4px;
}
/* ---------- Wishlist heart ---------- */
.wish-btn { position: relative; }
.wish-btn.has-items { color: var(--blue); }
.wish-btn.has-items svg { fill: rgba(79,169,255,0.18); }
.wish-btn .wish-count {
  position: absolute; top: -2px; right: -2px;
  background: var(--blue); color: #041022; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; border-radius: 9px; display: none; place-items: center;
  padding: 0 4px; line-height: 16px; letter-spacing: 0;
  box-shadow: 0 0 0 2px #0A0A0B;
}
.wish-btn.has-items .wish-count { display: grid; }

/* Two identical copies in the track, so translating half its width lands
   on the seam and the loop is invisible. */
@keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Account-page adjustments: the app fills the logo via JS, so size it here. */
.mlco-sitehead .brand img{ height:46px; width:auto; display:block; }
.mlco-sitehead .main-nav a.active{ color:var(--white); }
.mlco-sitehead .acct-initial{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--blue); color:#04101f; font-family:var(--font-display); font-weight:800; font-size:14px;
  text-decoration:none; }
body.mlco-account .mlco{ padding-top:26px; }


/* Responsive + marquee animation, from the storefront */
@media (max-width: 768px) {
  .site-header{ top: env(safe-area-inset-top, 0px); }
  .announce{ padding-top: env(safe-area-inset-top, 0px); }
}

@media (max-width: 768px) {
  .announce .marquee { width: 86vw; }
  .announce .mq-item { font-size: 11px; letter-spacing: 0.1em; padding: 0 16px; }
}
}

/* MOTION-OPT-OUT (announcement marquee): kept running deliberately - see the
   reduced-motion note in app/index.html. Only the scroll reveals opt out. */

@media (max-width: 900px) {
  .main-nav, .cart-btn span.txt { display: none; }
}

@media (max-width: 560px) {
  .announce .mq-item { font-size: 11px; padding: 0 16px; }
}

@media (max-width: 768px) {
  .header-actions .icon-btn[aria-label="Search"]{ display:none; }
  /* the wishlist heart stays reachable on phones */
  .header-actions .wish-btn{ display:grid !important; }
}

/* Compact enough for brand + heart + account + cart on a phone. */
@media (max-width: 768px){
  .site-header .wrap{ gap:10px; padding-left:14px; padding-right:14px; }
  .brand{ gap:9px; min-width:0; }
  .brand img, .mlco-sitehead .brand img{ height:38px; }
  .brand .wordmark b{ font-size:18px; letter-spacing:0.24em; }
  .brand .wordmark small{ font-size:6.5px; letter-spacing:0.24em; }
  .header-actions{ gap:6px; }
  .header-actions .icon-btn{ width:34px; height:34px; }
  .header-actions .icon-btn svg{ width:19px; height:19px; }
  .wish-btn .wish-count{ top:-1px; right:-1px; min-width:15px; height:15px; line-height:15px; font-size:9.5px; }
}
@media (max-width: 380px){
  .brand img, .mlco-sitehead .brand img{ height:34px; }
  .brand .wordmark b{ font-size:16px; letter-spacing:0.18em; }
  .brand .wordmark small{ display:none; }
}

@media (max-width: 768px) {
  .site-header{
    background:#0A0A0B;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    -webkit-transform:translateZ(0); transform:translateZ(0);
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
  }
  .site-header .wrap{ height:62px; }
}

@keyframes mq-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }