/* ============================================================
   RACK & BOX — component styles: header, footer, drawer, search
   ============================================================ */

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; width: 100%; }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marq 38s linear infinite; }
.marquee-item { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; }
.marquee-sep { margin: 0 26px; color: var(--accent); }
@keyframes marq { to { transform: translateX(-33.33%); } }

/* ---------- Header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 200; transition: background .5s var(--ease), box-shadow .5s var(--ease), color .5s; }
.announce { background: var(--c-deep); color: var(--c-paper); padding: 8px 0; }
.hdr-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gut); transition: padding .4s var(--ease);
  background: transparent;
}
.hdr.solid .hdr-bar { background: var(--bg); border-bottom: 1px solid var(--line); padding-top: 14px; padding-bottom: 14px; }
.hdr.solid { box-shadow: 0 8px 30px -22px rgba(0,0,0,0.4); }

/* transparent over hero: force light text */
.hdr.on-hero:not(.solid) .hdr-bar { color: #f4efe4; }
.hdr.on-hero:not(.solid) .navlink,
.hdr.on-hero:not(.solid) .ic-btn,
.hdr.on-hero:not(.solid) .rb-logo span,
.hdr.on-hero:not(.solid) .cur-btn { color: #f4efe4; }
.hdr.on-hero:not(.solid) .rb-logo span:nth-child(2) { color: var(--accent); }
.hdr.on-hero:not(.solid) .cur-toggle { border-color: rgba(244,239,228,0.32); }
.hdr.on-hero:not(.solid) .cur-btn.on { background: rgba(244,239,228,0.16); color: #fff; }

.hdr-left { display: flex; align-items: center; gap: 30px; }
.navitem { position: relative; }
.navlink {
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
  color: var(--ink); padding: 8px 0; position: relative; transition: color .3s; white-space: nowrap;
}
.navlink::after { content:""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right .4s var(--ease); }
.navlink:hover::after, .navlink.active::after { right: 0; }
.navlink:hover { color: var(--accent); }

.hdr-logo { display: flex; justify-content: center; }
.hdr-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.ic-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transition: background .3s, color .3s; color: var(--ink); }
.ic-btn:hover { color: var(--accent); }

/* ---------- Boutique header (stacked logo + centered nav) ---------- */
.hdr-boutique-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gut) 4px;
}
.hdr-boutique-top .hdr-burger { display: none; }
.hdr-boutique-logo { flex: 1; display: flex; justify-content: center; }
.hdr-boutique-icons { display: flex; align-items: center; gap: 16px; }
.hdr-boutique-nav {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  padding: 12px var(--gut) 16px; border-top: 1px solid var(--line);
}
.hdr.on-hero:not(.solid) .hdr-boutique-nav { border-top-color: rgba(244,239,228,0.18); }
@media (max-width: 1080px) {
  .hdr-boutique-nav { display: none; }
  .hdr-boutique-top .hdr-burger { display: grid; place-items: center; width: 40px; height: 40px; color: inherit; }
  .hdr-boutique-icons .cur-toggle { display: none; }
}
.ic-badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--accent); color: var(--on-accent); border-radius: 100px;
  font-size: 10px; font-weight: 600; display: grid; place-items: center; font-family: var(--font-sans);
}
.hdr-burger { display: none; }

/* currency toggle */
.cur-toggle { display: flex; border: 1px solid var(--line-2); border-radius: 100px; overflow: hidden; }
.cur-btn { font-size: 11px; letter-spacing: 0.08em; padding: 7px 12px; color: var(--ink-soft); transition: all .3s; }
.cur-btn.on { background: var(--ink); color: var(--bg); }
.hdr.on-hero:not(.solid) .cur-btn:not(.on) { color: rgba(244,239,228,0.7); }

/* mega menu */
.has-mega .mega {
  position: fixed; left: 0; right: 0; top: calc(100% + 0px);
  background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .35s var(--ease);
  box-shadow: var(--shadow); z-index: 50;
}
.hdr-bar { position: relative; }
.has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 40px; padding: 44px var(--gut); }
.mega-col { display: flex; flex-direction: column; gap: 6px; }
.mega-h { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.mega-link { text-align: left; font-family: var(--font-display); font-size: 22px; color: var(--ink); padding: 4px 0; transition: color .25s, padding-left .25s; width: fit-content; }
.mega-link:hover { color: var(--accent); padding-left: 8px; }
.mega-link.accent { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
.mega-feature { position: relative; text-align: left; border-radius: var(--radius); overflow: hidden; }
.mega-feature .ph { height: 100%; min-height: 260px; }
.mega-feature-cap { position: absolute; left: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; color: #f4efe4; z-index: 3; }
.mega-feature-cap .serif { color: #fff; }
.mega-feature-cap .link-arrow { color: #fff; border-color: var(--accent); }

/* mobile menu */
.mob-menu { position: fixed; inset: 0; background: var(--bg); z-index: 300; padding: 20px var(--gut); display: flex; flex-direction: column; animation: fadePage .3s var(--ease); }
.mob-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.mob-links { display: flex; flex-direction: column; padding-top: 14px; }
.mob-link { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 30px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.show-md { display: grid; }

/* ---------- Cart drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10,16,12,0.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; z-index: 400; }
body.anim-ready .scrim { transition: all .4s var(--ease); }
.scrim.show { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); background: var(--bg);
  z-index: 410; transform: translateX(100%);
  display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgba(0,0,0,0.5);
}
body.anim-ready .drawer { transition: transform .5s var(--ease); }
.drawer.open { transform: none; }
.drawer-head { padding: 24px 26px; border-bottom: 1px solid var(--line); }
.drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 40px; color: var(--ink-soft); }
.drawer-empty .ph, .drawer-empty svg { color: var(--ink-faint); }
.ship-meter { padding: 16px 26px; border-bottom: 1px solid var(--line); }
.ship-meter-txt { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.ship-meter-txt strong { color: var(--ink); }
.ship-bar { height: 3px; background: var(--line); margin-top: 12px; border-radius: 100px; overflow: hidden; }
.ship-bar span { display: block; height: 100%; background: var(--accent); transition: width .6s var(--ease); }
.drawer-items { flex: 1; overflow-y: auto; padding: 8px 26px; }
.ditem { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ditem-media { width: 84px; border-radius: var(--radius); overflow: hidden; }
.ditem-media .ph { height: 105px; }
.ditem-x { color: var(--ink-faint); transition: color .3s; }
.ditem-x:hover { color: var(--ink); }
.drawer-foot { padding: 22px 26px; border-top: 1px solid var(--line); }
.drawer-cont { width: 100%; text-align: center; margin-top: 12px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding: 6px; }
.drawer-cont:hover { color: var(--accent); }

/* qty stepper */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 100px; }
.qty button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); }
.qty button:hover { color: var(--accent); }
.qty span { min-width: 28px; text-align: center; font-size: 14px; }
.qty.sm button { width: 30px; height: 30px; }

/* ---------- Search overlay ---------- */
.search-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 500; }
.search-top { display: flex; align-items: center; gap: 18px; padding-top: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.search-input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--font-display); font-size: clamp(26px, 4vw, 44px); color: var(--ink); }
.search-input::placeholder { color: var(--ink-faint); }
.search-body { padding-top: 36px; }
.search-results { display: flex; flex-direction: column; }
.search-res { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; transition: padding-left .3s; }
.search-res:hover { padding-left: 8px; }
.search-res .ph { border-radius: var(--radius); overflow: hidden; }

/* ---------- Footer ---------- */
.footer { background: var(--footer-bg); color: var(--footer-ink); margin-top: 0; }
.footer-news { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 80px var(--gut) 60px; border-bottom: 1px solid rgba(244,239,228,0.14); }
.news-form { display: flex; gap: 0; border-bottom: 1px solid rgba(244,239,228,0.4); }
.news-input { flex: 1; background: transparent; border: none; outline: none; color: var(--footer-ink); font-size: 16px; padding: 14px 0; }
.news-input::placeholder { color: color-mix(in oklab, var(--footer-ink) 50%, transparent); }
.news-sub { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 4px 0 16px; white-space: nowrap; }
.news-sub:hover { gap: 16px; }
.news-done { color: var(--accent); display: flex; align-items: center; gap: 10px; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.1fr; gap: 36px; padding: 64px var(--gut); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-h { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.footer-col button { text-align: left; color: color-mix(in oklab, var(--footer-ink) 72%, transparent); font-size: 14.5px; transition: color .25s, padding-left .25s; width: fit-content; }
.footer-col button:hover { color: var(--footer-ink); padding-left: 5px; }
.footer-addr { color: color-mix(in oklab, var(--footer-ink) 66%, transparent); font-size: 14px; line-height: 1.6; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.fsoc { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(244,239,228,0.22); display: grid; place-items: center; color: var(--footer-ink); transition: all .3s; }
.fsoc:hover { background: var(--accent); color: var(--c-deep); border-color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px var(--gut); border-top: 1px solid rgba(244,239,228,0.14); font-size: 12px; color: color-mix(in oklab, var(--footer-ink) 60%, transparent); flex-wrap: wrap; }
.pay-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-chip { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border: 1px solid rgba(244,239,228,0.2); border-radius: 3px; color: color-mix(in oklab, var(--footer-ink) 70%, transparent); }

/* ---------- Responsive header ---------- */
@media (max-width: 1080px) {
  .hdr-left { display: none; }
  .hdr-burger { display: grid; place-items: center; width: 40px; height: 40px; color: inherit; }
  .hdr-bar { grid-template-columns: auto 1fr auto; }
  .hdr-logo { justify-content: flex-start; padding-left: 6px; }
  .cur-toggle { display: none; }
  .show-md { display: none; }
}
@media (max-width: 760px) {
  :root { --gut: 20px; }
  .footer-news { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .mega { display: none; }
}