/* HAVALORO — commerce UI (drawers, search, mobile nav, badges, toast)
 * Uses the global palette tokens from index.html :root. Square corners,
 * hairlines, warm neutrals — consistent with the approved editorial system. */

body.hv-noscroll { overflow: hidden; }

/* desktop mega-menu (§3) */
.nav-mega-wrap{position:relative;display:inline-flex}
.mega-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:220px;
  background:var(--ivory);color:var(--ink);border:1px solid var(--hairline);box-shadow:0 30px 60px -30px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:150;padding:10px 0;margin-top:6px}
.nav-mega-wrap:hover .mega-panel,.nav-mega-wrap:focus-within .mega-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-inner{display:flex;flex-direction:column}
.mega-panel a{display:block;padding:9px 24px;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);white-space:nowrap;transition:color .25s,background .25s}
.mega-panel a::after{display:none}
.mega-panel a:hover{color:var(--ink);background:var(--greige)}
@media (max-width:960px){.mega-panel{display:none}}
@media (prefers-reduced-motion: reduce){.mega-panel{transition:none}}

/* mobile nav (§) — on small phones keep only language + cart + menu on the bar;
   search / account / wishlist stay reachable inside the hamburger drawer so the
   cart and menu never get pushed off-screen. */
@media (max-width:640px){
  .nav-utils{gap:14px}
  .nav-utils .ic[data-open="search"],
  .nav-utils .ic[data-open="account"],
  .nav-utils .ic[data-open="wishlist"]{display:none}
}

/* product card native links (image cover / title / View Product) */
.card .card-cover{position:absolute;inset:0;z-index:3}
.card .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.card:hover .media img{transform:scale(1.03)}

.card .body .nm{display:inline-block;transition:color .3s}
.card .body .nm:hover{color:var(--terracotta)}
.card .pdp-link{display:inline-block;margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);border-bottom:1px solid var(--hairline);padding-bottom:3px;transition:color .3s,border-color .3s}
.card .pdp-link:hover{color:var(--ink);border-color:var(--ink)}

/* language switch */
.lang{display:inline-flex;gap:4px;align-items:center;margin-right:6px}
.lang button{background:none;border:0;color:inherit;cursor:pointer;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;padding:6px 4px}
.lang button.on{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--terracotta)}

/* scrim */
.hv-scrim {
  position: fixed; inset: 0; z-index: 400; background: rgba(20,18,15,.55);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease, ease);
}
body.hv-noscroll .hv-scrim { opacity: 1; pointer-events: auto; }

/* utility icon buttons (§20 — real buttons, 44px targets, visible focus) */
.nav .ic {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer;
  padding: 0; opacity: .9; transition: opacity .3s;
}
.nav .ic:hover { opacity: 1; }
.nav .ic svg { width: 19px; height: 19px; flex: none; }
.ic-badge {
  position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--terracotta); color: var(--ivory);
  font-family: var(--sans); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  opacity: 0; transform: scale(.6); transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.ic-badge.on { opacity: 1; transform: none; }

/* ---------------- drawers (cart / wishlist / account) ---------------- */
.hv-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 500;
  width: min(440px, 92vw); background: var(--ivory); color: var(--ink);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .5s var(--ease); box-shadow: -30px 0 60px -30px rgba(0,0,0,.5);
}
.hv-drawer.open { transform: none; }
.hv-drawer-head, .hv-search-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px; border-bottom: 1px solid var(--hairline);
}
.hv-x {
  background: none; border: 0; font-size: 30px; line-height: 1; color: var(--ink);
  cursor: pointer; width: 44px; height: 44px; opacity: .7; transition: opacity .3s;
}
.hv-x:hover { opacity: 1; }
.hv-drawer-body { flex: 1; overflow-y: auto; padding: 8px 26px 26px; }
.hv-drawer-foot { border-top: 1px solid var(--hairline); padding: 22px 26px; }
.hv-sub { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; letter-spacing: .02em; }
.hv-sub span:last-child { font-family: var(--serif); font-size: 20px; }
.hv-note { font-size: 11px; color: var(--taupe); margin: 6px 0 18px; }
.hv-full { width: 100%; justify-content: center; margin-bottom: 10px; }

/* cart / wishlist line */
.hv-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.hv-line-img { width: 72px; height: 90px; background: var(--ivory) center/contain no-repeat; }
.hv-line-nm { font-family: var(--serif); font-size: 16px; }
.hv-line-spec { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); margin: 4px 0 12px; }
.hv-line-pr { font-size: 13px; font-weight: 500; white-space: nowrap; }
.hv-qty { display: flex; align-items: center; gap: 10px; }
.hv-qb { width: 26px; height: 26px; border: 1px solid var(--hairline); background: none; color: var(--ink);
  cursor: pointer; font-size: 15px; line-height: 1; }
.hv-qb:hover { border-color: var(--ink); }
.hv-qn { min-width: 18px; text-align: center; font-size: 13px; }
.hv-remove { background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--taupe);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 0 0 2px; margin-left: 6px; }
.hv-remove:hover { color: var(--terracotta); }

/* empty states (§27) */
.hv-empty { text-align: center; padding: 60px 10px; }
.hv-empty .serif { font-family: var(--serif); font-size: 22px; margin-bottom: 8px; }
.hv-empty p { color: var(--charcoal); font-weight: 300; margin-bottom: 20px; }

/* ---------------- search overlay ---------------- */
.hv-search-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: var(--ivory); color: var(--ink);
  transform: translateY(-100%); transition: transform .5s var(--ease);
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 30px 60px -30px rgba(0,0,0,.4);
}
.hv-search-overlay.open { transform: none; }
.hv-search-bar input { flex: 1; background: none; border: 0; outline: none; font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px); color: var(--ink); padding: 8px 0; }
.hv-search-bar input::placeholder { color: var(--taupe); }
.hv-search-results { overflow-y: auto; padding: 10px 26px 30px; }
.hv-search-hint { padding: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.hv-search-hint .eyebrow { width: 100%; margin-bottom: 6px; }
.hv-search-hint a { font-size: 13px; border-bottom: 1px solid var(--hairline); padding-bottom: 3px; }
.hv-sr { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.hv-sr-img { width: 56px; height: 70px; background: var(--ivory) center/contain no-repeat; }
.hv-sr-nm { font-family: var(--serif); font-size: 16px; display: block; }
.hv-sr-spec { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); }
.hv-sr-pr { font-size: 13px; font-weight: 500; }
.hv-sr:hover .hv-sr-nm { color: var(--terracotta); }

/* ---------------- mobile nav (§3) ---------------- */
.hv-mobilenav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 500; width: min(420px, 100vw);
  background: var(--ink); color: var(--greige); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .5s var(--ease);
}
.hv-mobilenav.open { transform: none; }
.hv-mobilenav .hv-drawer-head { border-color: var(--hairline-light); }
.hv-mobilenav .wordmark { font-family: var(--serif); font-size: 22px; letter-spacing: .16em; }
.hv-mobilenav .wordmark .hv { color: var(--greige); } .hv-mobilenav .wordmark .lo { color: var(--terracotta); }
.hv-mobilenav .hv-x { color: var(--ivory); }
.hv-mn-body { flex: 1; overflow-y: auto; padding: 10px 26px 30px; }
.hv-mn-top, .hv-mn-group > summary {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--hairline-light);
  font-family: var(--serif); font-size: 20px; color: var(--ivory); cursor: pointer; list-style: none;
}
.hv-mn-group > summary::-webkit-details-marker { display: none; }
.hv-mn-group > summary::after { content: "+"; float: right; color: var(--sand); font-family: var(--sans); }
.hv-mn-group[open] > summary::after { content: "\2212"; }
.hv-mn-group > div { padding: 4px 0 14px 14px; display: flex; flex-direction: column; }
.hv-mn-group a { padding: 9px 0; font-size: 14px; color: rgba(242,238,231,.72); }
.hv-mn-group a:hover { color: var(--ivory); }
.hv-mn-utils { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hv-mn-utils button { flex: 1 1 40%; background: none; border: 1px solid var(--hairline-light);
  color: var(--ivory); padding: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.hv-mn-utils button:hover { border-color: var(--sand); }

/* ---------------- toast ---------------- */
#hv-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 600;
  background: var(--ink); color: var(--ivory); padding: 14px 22px; font-size: 12px; letter-spacing: .08em;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease);
  max-width: 90vw; text-align: center;
}
#hv-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .hv-scrim, .hv-drawer, .hv-search-overlay, .hv-mobilenav, #hv-toast, .ic-badge { transition: none !important; }
}