/* WiMs Shop header. This file styles only the header (templates/includes/header.html).
   The footer has its own file: footer.css. Colours come from the theme variables. */

.hd{background:#fff;box-shadow:0 2px 0 var(--pink);position:sticky;top:0;z-index:9999}

/* thin bar on top */
.hd-announce{background:linear-gradient(90deg,var(--lilac),var(--pink-deep),var(--blue-deep));color:var(--ink);font-size:13px;font-weight:700}
.hd-announce-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hd-announce a{color:var(--ink);text-decoration:none}
.hd-announce a:hover{text-decoration:underline}
.hd-announce-links{display:flex;gap:20px;white-space:nowrap}

/* logo, search, buttons */
.hd-main{display:flex;align-items:center;gap:20px;padding:14px 0}
.hd-menu-btn{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--pink);color:var(--accent-dark);font-size:18px;cursor:pointer;place-items:center}
.hd-brand{flex:0 0 auto;display:flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1;color:var(--accent);text-decoration:none}
.hd-brand img{display:block;width:auto;height:auto;max-width:260px;max-height:64px;object-fit:contain}

.hd-search{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;height:50px;padding:0 5px 0 18px;background:#F4F9FF;border:2px solid var(--blue);border-radius:999px}
.hd-search:focus-within{border-color:var(--accent)}
.hd-search-icon{color:var(--ink-soft)}
.hd-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.hd-search button{height:38px;border:0;border-radius:999px;padding:0 22px;background:var(--accent);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.hd-search button:hover{background:var(--accent-dark)}

.hd-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.hd-act{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px 0 4px;border-radius:999px;color:var(--ink);text-decoration:none}
.hd-act:hover{background:var(--accent-soft)}
.hd-ico{width:40px;height:40px;border-radius:50%;background:var(--pink);color:var(--accent-dark);display:grid;place-items:center;font-size:17px}
.hd-act-text{display:flex;flex-direction:column;line-height:1.15}
.hd-act-text small{font-size:11px;color:var(--ink-soft)}
.hd-act-text b{font-size:14px}
.hd-badge{position:absolute;top:1px;left:28px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}

/* category bar underneath keeps its existing styles from site.css */
.hd .nav{border-top:2px solid var(--pink);border-bottom:0}
/* the old stylesheet forces this button green with !important; the theme colour wins here */
.hd .nav .all-categories{background:var(--accent) !important;color:#fff !important;border-radius:999px;padding:0 20px !important;height:38px;align-self:center}

/* phone menu: hidden unless opened by the hamburger or the bottom "Categories" button */
.hd-drawer{display:none}
.hd-drawer-inner{padding-top:8px;padding-bottom:16px}
.hd-drawer-head{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-family:var(--font-display);font-size:20px;color:var(--accent)}
.hd-drawer-close{width:44px;height:44px;border:0;border-radius:50%;background:var(--pink);color:var(--accent-dark);font-size:26px;line-height:1;cursor:pointer}
.hd-d-group{padding:8px 0;border-top:1px solid var(--pink)}
.hd-d-main{display:block;min-height:44px;line-height:44px;font-weight:800;color:var(--ink);text-decoration:none}
.hd-d-subs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:6px}
.hd-d-subs a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#F4F9FF;border:2px solid var(--blue);color:var(--ink);font-weight:700;text-decoration:none}
.hd-d-links{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--pink)}
.hd-d-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--pink);color:var(--ink);font-weight:800;text-decoration:none}

@media (max-width:950px){
  /* the old stylesheet pins its category bar 120px from the top on phones, on top of the search box */
  .hd{position:relative}
  .hd .nav{display:none !important}
  .hd-drawer.open{display:block;position:absolute;top:100%;left:0;right:0;z-index:9999;max-height:75vh;overflow-y:auto;background:#fff;border-top:2px solid var(--pink);box-shadow:0 18px 30px rgba(59,42,58,.18)}
}
@media (max-width:1000px){
  .hd-act{padding:0 4px}
  .hd-act-text{display:none}
  .hd-badge{left:26px}
}
@media (max-width:760px){
  .hd-announce-links{display:none}
  .hd-announce-inner{justify-content:space-between;text-align:left;min-height:38px;gap:8px}
  .hd-tagline{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-announce-inner:not(:has(.hd-cur)) .hd-tagline{text-align:center}
  .hd-main{flex-wrap:wrap;gap:10px 8px;padding:10px 0}
  .hd-menu-btn{display:grid;order:0}
  .hd-brand{order:1;flex:1 1 0;min-width:0;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hd-brand img{max-height:50px;max-width:200px}
  .hd-actions{order:2}
  .hd-search{order:3;flex:1 1 100%;height:46px}
  .hd-search button{padding:0 16px}
}

/* currency switcher in the top bar */
.hd-cur{flex:0 0 auto;display:inline-flex;gap:4px;margin:0 6px 0 0;padding:3px;border-radius:999px;background:rgba(255,255,255,.55)}
.hd-cur button{min-width:44px;min-height:28px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.hd-cur button.on{background:var(--accent);color:#fff}
.hd-cur button:not(.on):hover{background:rgba(255,255,255,.9)}

/* ---- pop-up menus: Support, and the currency choice on phones ---- */
.hd-pop{position:relative}
button.hd-act{border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.hd-pop-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:10000;min-width:250px;padding:10px;border-radius:22px;background:#fff;border:2px solid var(--pink);box-shadow:0 18px 40px rgba(59,42,58,.22)}
.hd-pop-menu[hidden]{display:none}
.hd-pop-title{margin:2px 8px 8px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.hd-pop-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:16px;background:none;color:var(--ink);font:inherit;font-weight:700;text-decoration:none;text-align:left;cursor:pointer}
.hd-pop-item:hover,.hd-pop-item:focus-visible{background:var(--accent-soft)}
.hd-pop-item i{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px}
.hd-pop-item.whatsapp i{background:#25D366}
.hd-pop-item.messenger i{background:#0084FF}
.hd-pop-item.instagram i{background:linear-gradient(135deg,#F9A825,#E1306C,#833AB4)}
.hd-pop-item.facebook i{background:#1877F2}
.hd-pop-item.call i{background:var(--accent)}
.hd-curpop{display:none}
.hd-curpop .hd-pop-menu{min-width:130px}
.hd-curpop .hd-pop-item{justify-content:center;font-weight:800}
.hd-curpop .hd-pop-item.on{background:var(--accent);color:#fff}
.hd-curbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:2px solid var(--blue-deep);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.hd-curbtn i{font-size:11px;color:var(--accent)}
/* on computers the three currency buttons sit at the right end of the menu line */
.hd-cur-nav{margin-left:auto;margin-right:0;background:#fff;box-shadow:inset 0 0 0 2px var(--pink)}
.hd-cur-nav button.on{background:var(--accent);color:#fff}
@media (max-width:950px){.hd-curpop{display:block}}
@media (max-width:760px){.hd-pop-menu{min-width:230px}}
@media (max-width:480px){
  .hd-brand{font-size:22px}
  .hd-curbtn{min-height:38px;padding:0 10px;font-size:13px}
  .hd-actions{gap:2px}
}