/* 100 Rose BD — Header (modern dropdown + icons + mobile tweaks) */

/* ============== Base ============== */
#hrx-header.hrx *{ box-sizing:border-box }
#hrx-header.hrx{
  position:sticky; top:0; left:0; z-index:1000; background:#fff;
  padding-top: env(safe-area-inset-top, 0);
}

/* WP admin bar fix */
@media (min-width:783px){ body.admin-bar #hrx-header.hrx{ top:32px } }
@media (max-width:782px){ body.admin-bar #hrx-header.hrx{ top:46px } }

/* Tokens */
#hrx-header.hrx{
  --rose-25:#fff7f8; --rose-50:#fff1f2; --rose-100:#ffe4e6;
  --rose-600:#e11d48; --rose-700:#be123c;
  --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; --bg:#ffffff;
  --ring: 0 0 0 4px rgba(225,29,72,.18);
  --shadow-sm: 0 2px 6px rgba(16,24,40,.08);
  --shadow: 0 10px 30px rgba(16,24,40,.12);
  --radius: 12px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* Container */
#hrx-header .hrx-container{ max-width:1240px; margin:0 auto; padding:0 8px }
@media(min-width:768px){ #hrx-header .hrx-container{ padding:0 8px } }

/* ============== Topbar ============== */
#hrx-header .hrx-topbar{ display:none; background:var(--rose-50); color:#9f1239; border-bottom:1px solid var(--rose-100) }
@media(min-width:768px){ #hrx-header .hrx-topbar{ display:block } }
#hrx-header .hrx-topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:14px }
#hrx-header .hrx-topbar__right{ display:flex; align-items:center; gap:16px; font-weight:600 }
#hrx-header .hrx-topbar__phone{ display:inline-flex; gap:8px; align-items:center; color:#9f1239; text-decoration:none }
#hrx-header .hrx-topbar__phone:hover{ color:var(--rose-700) }
#hrx-header .hrx-topbar__phone:focus-visible,
#hrx-header .hrx-topbar__btn:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }
#hrx-header .hrx-topbar__btn{ padding:6px 12px; border-radius:999px; background:var(--rose-600); color:#fff; font-size:12px; text-decoration:none; transition:background .18s var(--ease) }
#hrx-header .hrx-topbar__btn:hover{ background:var(--rose-700) }

/* ============== Main header ============== */
#hrx-header .hrx-main{ background:#fff; border-bottom:1px solid var(--line) }
#hrx-header .hrx-main__inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 }

/* Logo */
#hrx-header .hrx-logo .hrx-site-logo img{ display:block; max-height:100% }
#hrx-header .hrx-logo__text{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:24px; color:var(--rose-700); text-decoration:none }

/* Search (desktop) */
#hrx-header .hrx-search--desktop{ display:none; flex:1; max-width:640px; margin:0 16px }
@media(min-width:768px){ #hrx-header .hrx-search--desktop{ display:flex } }
#hrx-header .hrx-search{ display:flex; width:100%; border:1px solid #e5e7eb; border-radius:999px; overflow:hidden; box-shadow:var(--shadow-sm) }
#hrx-header .hrx-search-input{ flex:1; padding:10px 14px; font-size:14px; border:0; outline:0 }
#hrx-header .hrx-search-input:focus-visible{ outline:2px solid rgba(248,187,208,.55) }
#hrx-header .hrx-search-btn{ width:48px; display:flex; align-items:center; justify-content:center; background:var(--rose-600); color:#fff; border:0; cursor:pointer; transition:background .18s var(--ease) }
#hrx-header .hrx-search-btn:hover{ background:var(--rose-700) }
#hrx-header .hrx-search-btn:focus-visible{ outline:none; box-shadow:var(--ring) }

/* ============== Actions ============== */
#hrx-header .hrx-actions{ display:flex; align-items:center; gap:14px }
#hrx-header .hrx-action{ display:none; align-items:center; gap:8px; color:#475569; text-decoration:none; font-weight:600; transition:color .18s var(--ease) }
@media(min-width:768px){ #hrx-header .hrx-action{ display:inline-flex } }
#hrx-header .hrx-action:hover{ color:var(--rose-600) }
#hrx-header .hrx-action:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }
#hrx-header .hrx-cart{ position:relative; padding-right:6px }
#hrx-header .hrx-cart-count--badge{
  position:absolute; top:-6px; right:-8px; background:var(--rose-600); color:#fff; border-radius:999px;
  font-size:11px; line-height:1; padding:3px 6px; min-width:18px; text-align:center
}

/* Mobile actions */
#hrx-header .hrx-m-actions{ display:flex; align-items:center; gap:12px }
@media(min-width:768px){ #hrx-header .hrx-m-actions{ display:none } }
#hrx-header .hrx-m-btn,
#hrx-header .hrx-m-actions .hrx-burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; cursor:pointer; transition:border-color .18s var(--ease)
}
#hrx-header .hrx-m-btn:hover,
#hrx-header .hrx-m-actions .hrx-burger:hover{ border-color:var(--rose-600) }
#hrx-header .hrx-m-actions .hrx-burger:focus-visible,
#hrx-header .hrx-m-btn:focus-visible{ outline:none; box-shadow:var(--ring) }
#hrx-header .hrx-m-actions .hrx-ic{ width:22px; height:22px }

/* ============== Icons (account / cart / menu) ============== */
#hrx-header .hrx-ic{ display:inline-block; width:22px; height:22px; background-repeat:no-repeat; background-position:center; background-size:contain }
#hrx-header .hrx-ic--user{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#hrx-header .hrx-ic--bag{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7h12l-1.2 10H7.2z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3Ccircle cx='9' cy='21' r='1.8'/%3E%3Ccircle cx='18' cy='21' r='1.8'/%3E%3C/svg%3E");
}
#hrx-header .hrx-ic--menu{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============== Desktop Nav + Dropdown ============== */
#hrx-header .hrx-nav{ display:none; border-bottom:1px solid var(--line) }
@media(min-width:992px){ #hrx-header .hrx-nav{ display:block } }

#hrx-header .hrx-menu,
#hrx-header .hrx-menu ul{ list-style:none; margin:0; padding:0 }
#hrx-header .hrx-menu{
  display:flex; gap:28px; justify-content:center; align-items:center;
  padding:12px 0; font-weight:700; font-size:14px;
}
#hrx-header .hrx-menu > li{ position:relative }
#hrx-header .hrx-menu > li > a{
  color:#334155; text-decoration:none; padding:8px 6px; border-radius:8px;
  display:inline-flex; align-items:center; gap:8px;
  transition: color .18s var(--ease), background .18s var(--ease)
}
#hrx-header .hrx-menu > li > a:hover{ color:var(--rose-600); background:var(--rose-25) }
#hrx-header .hrx-menu > li > a:focus-visible{ outline:none; box-shadow:var(--ring) }

/* dropdown panel */
#hrx-header .hrx-menu .sub-menu{
  position:absolute; left:50%; top: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px) scale(.98);
  transform-origin: top center;
  min-width: 240px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow);
  display:block; opacity:0; pointer-events:none; transition: transform .18s var(--ease), opacity .18s var(--ease);
  z-index: 10000;
}
#hrx-header .hrx-menu > li:hover > .sub-menu,
#hrx-header .hrx-menu > li:focus-within > .sub-menu{
  opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0) scale(1);
}

/* arrow caret */
#hrx-header .hrx-menu > li .sub-menu::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line);
  box-shadow:-2px -2px 4px rgba(16,24,40,.02);
}

/* submenu items */
#hrx-header .hrx-menu .sub-menu > li{ position:relative }
#hrx-header .hrx-menu .sub-menu > li > a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; text-decoration:none;
  color:#334155; font-weight:600; font-size:13px;
  transition: background .16s var(--ease), color .16s var(--ease)
}
#hrx-header .hrx-menu .sub-menu > li > a:hover{ background:#f8fafc; color:var(--rose-600) }
#hrx-header .hrx-menu .sub-menu > li + li{ margin-top:2px }

/* 3rd-level flyout */
#hrx-header .hrx-menu .sub-menu .sub-menu{
  top: -8px; left: calc(100% + 10px);
  transform: translateY(6px) scale(.98);
  min-width: 220px; padding: 8px;
  opacity: 0; pointer-events: none; transition: transform .18s var(--ease), opacity .18s var(--ease);
}
#hrx-header .hrx-menu .sub-menu > li:hover > .sub-menu,
#hrx-header .hrx-menu .sub-menu > li:focus-within > .sub-menu{
  opacity:1; pointer-events:auto; transform: translateY(0) scale(1);
}

/* caret indicators */
#hrx-header .hrx-menu .menu-item-has-children > a::after{
  content:""; width:0; height:0; border:5px solid transparent; border-top-color:#64748b; margin-left:6px; transform:translateY(2px)
}
#hrx-header .hrx-menu .sub-menu .menu-item-has-children > a::after{
  border-top-color:transparent; border-left-color:#64748b; transform:translateY(0)
}

/* optional: right-edge align helper */
#hrx-header .hrx-menu > li.align-right > .sub-menu{ left:auto; right:0; transform:translateY(6px) scale(.98) }
#hrx-header .hrx-menu > li.align-right:hover > .sub-menu{ transform:translateY(0) scale(1) }
#hrx-header .hrx-menu > li.align-right .sub-menu::before{ left:auto; right:24px; transform:rotate(45deg) }

/* ============== Drawer (mobile) ============== */
#hrx-header .hrx-drawer{
  position:fixed; top:0; left:0; height:100dvh; width:86vw; max-width:330px;
  background:#fff; box-shadow:var(--shadow); z-index:1200;
  transform:translateX(-110%); transition:transform .28s var(--ease); will-change:transform; overflow:auto;
}
#hrx-header .hrx-drawer.is-open{ transform:none }
#hrx-header .hrx-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line) }
#hrx-header .hrx-brand{ font-weight:800; color:var(--rose-600); font-size:18px }
#hrx-header .hrx-drawer__close{ background:none; border:0; font-size:28px; color:var(--rose-600); cursor:pointer }
#hrx-header .hrx-drawer__close:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px }
#hrx-header .hrx-drawer__body{ padding:16px }

/* Tabs */
#hrx-header .hrx-tabs{ display:flex; border-bottom:1px solid var(--line) }
#hrx-header .hrx-tab{ flex:1; text-align:center; padding:10px 12px; background:#fff; border:0; cursor:pointer; font-weight:700; color:#475569 }
#hrx-header .hrx-tab.is-active{ color:#be123c; border-bottom:2px solid var(--rose-600) }
#hrx-header .hrx-tab:focus-visible{ outline:none; box-shadow: inset 0 -3px 0 rgba(248,187,208,.75) }

/* Drawer search */
#hrx-header .hrx-tabpanel{ padding-top:14px }
#hrx-header .hrx-dsearch{ display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:14px }
#hrx-header .hrx-dsearch input{ flex:1; border:0; padding:8px 10px; font-size:13px; outline:0 }
#hrx-header .hrx-dsearch input:focus-visible{ outline:2px solid rgba(248,187,208,.55) }

/* Drawer lists */
#hrx-header .hrx-dmenu,
#hrx-header .hrx-qlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-weight:600 }

/* Mobile menu items — smaller font as requested */
#hrx-header .hrx-dmenu li a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px; border:1px solid #f1f5f9; border-radius:10px; color:#334155; text-decoration:none;
  font-size:13px; /* smaller text */
}

/* Quick links — left align force */
#hrx-header .hrx-qlist li a{
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  padding:10px 12px; border:1px solid #f1f5f9; border-radius:10px; color:#334155; text-decoration:none;
  font-size:13px; text-align:left;
}

#hrx-header .hrx-dmenu li a:hover,
#hrx-header .hrx-qlist li a:hover{ border-color:var(--rose-600); color:var(--rose-700); background:#fff }

/* Mobile submenu (accordion) */
#hrx-header .hrx-dmenu .menu-item-has-children{ position:relative; border:1px solid #f1f5f9; border-radius:10px; padding:0 }
#hrx-header .hrx-dmenu .menu-item-has-children > a{ padding:12px; display:flex; align-items:center; justify-content:space-between }
#hrx-header .hrx-subtoggle{
  margin-left:10px; border:1px solid #e5e7eb; background:#fff; border-radius:9px; padding:4px 8px; font-size:12px; line-height:1; color:#334155;
}
#hrx-header .hrx-subtoggle:focus-visible{ outline:none; box-shadow:var(--ring) }
#hrx-header .hrx-dmenu .sub-menu{
  display:none; padding:6px 10px 10px 12px; margin:0 8px 10px 8px; border-left:3px solid #f1f5f9; border-radius:0 0 10px 10px; background:#fff;
}
#hrx-header .hrx-dmenu .menu-item-has-children.is-open > .sub-menu{ display:block; animation: hrx-accordion .18s var(--ease) both }
#hrx-header .hrx-dmenu .sub-menu a{ display:block; padding:8px 8px; border-radius:8px; color:#334155; text-decoration:none; font-weight:600; font-size:13px }
#hrx-header .hrx-dmenu .sub-menu a:hover{ background:#f8fafc; color:var(--rose-600) }

@keyframes hrx-accordion{
  from{ opacity:0; transform:translateY(-2px) }
  to{ opacity:1; transform:none }
}

/* Drawer social (visible icons) */
#hrx-header .hrx-qsocial{ display:flex; gap:10px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line) }
#hrx-header .qicon{
  width:40px; height:40px; border:1px solid #e5e7eb; border-radius:10px; display:inline-block; background:#fff;
  background-repeat:no-repeat; background-position:center; background-size:20px; transition:border-color .16s var(--ease)
}
#hrx-header .qicon:hover{ border-color:var(--rose-600) }

/* Social icon images */
#hrx-header .q-fb{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23111' viewBox='0 0 24 24'%3E%3Cpath d='M22 12.07C22 6.48 17.52 2 11.93 2 6.35 2 1.86 6.48 1.86 12.07c0 4.99 3.64 9.13 8.39 10v-7.07H7.9v-2.93h2.35V9.41c0-2.33 1.39-3.62 3.52-3.62 1.02 0 2.09.18 2.09.18v2.3h-1.18c-1.17 0-1.53.72-1.53 1.46v1.76h2.61l-.42 2.93h-2.19v7.07c4.75-.87 8.39-5.01 8.39-10z'/%3E%3C/svg%3E") }
#hrx-header .q-ig{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23111' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='%23111'/%3E%3C/svg%3E") }
#hrx-header .q-wa{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23111' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A10.5 10.5 0 0 0 3.73 18.4L3 22l3.7-.97A10.5 10.5 0 1 0 20.5 3.5Zm-8.3 16.8a8.7 8.7 0 1 1 7.26-13.63 8.7 8.7 0 0 1-7.26 13.63Zm4.1-6.5c-.23-.12-1.37-.68-1.58-.76-.21-.08-.36-.12-.5.12s-.58.76-.71.92c-.13.15-.26.17-.49.06-.23-.12-.95-.35-1.8-1.12-.67-.6-1.12-1.34-1.26-1.57-.13-.23-.01-.36.1-.48.1-.1.23-.26.35-.39.12-.13.16-.23.24-.39.08-.16.04-.3-.02-.42-.06-.12-.5-1.2-.68-1.64-.18-.44-.36-.38-.5-.39l-.43-.01c-.16 0-.4.06-.61.3-.21.23-.8.78-.8 1.9 0 1.11.82 2.18.94 2.33.12.16 1.62 2.47 3.92 3.36 2.3.9 2.3.6 2.71.57.41-.03 1.37-.56 1.57-1.1.2-.54.2-1.01.15-1.11-.05-.1-.21-.16-.44-.28Z'/%3E%3C/svg%3E") }
#hrx-header .q-yt{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23111' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.6 3.5 12 3.5 12 3.5s-7.6 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.8.6 9.4.6 9.4.6s7.6 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.5v-7l6 3.5-6 3.5z'/%3E%3C/svg%3E") }
#hrx-header .q-pin{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23111' viewBox='0 0 24 24'%3E%3Cpath d='M12.1 2C6.7 2 3.6 5.5 3.6 9.5c0 1.9.8 3.6 2.6 4.2.3.1.6 0 .7-.3l.3-1.2c.1-.3.1-.4-.2-.8-.5-.6-.8-1.5-.8-2.4 0-3.2 2.4-6 6.2-6 3.4 0 5.3 2.1 5.3 4.9 0 3.7-1.6 6.9-4 6.9-1.3 0-2.3-1.1-2-2.4.4-1.7 1.1-3.7 1.1-5 0-1.1-.6-2-1.8-2-1.4 0-2.6 1.5-2.6 3.6 0 1.3.4 2.1.4 2.1s-1.5 6.4-1.8 7.6c-.5 2.1-.1 4.7 0 5 0 .1.1.1.2 0 0-.2 2-2.7 2.7-5.1l1.1-4.1c.5 1 2 1.8 3.6 1.8 4.7 0 7.9-4.3 7.9-10S16.1 2 12.1 2z'/%3E%3C/svg%3E") }
#hrx-header .q-li{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23111' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5.001 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-.9 1.7-1.9 3.6-1.9 3.8 0 4.5 2.5 4.5 5.7V21h-4v-5.4c0-1.3 0-3-1.8-3s-2 1.4-2 2.9V21H9z'/%3E%3C/svg%3E") }
#hrx-header .q-x{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23111' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-7.1 8.1L23 22h-6.3l-4.9-6.4L6 22H2l7.6-8.7L1 2h6.4l4.4 5.8L18.9 2zM17.8 20h1.7L8.4 4H6.6l11.2 16z'/%3E%3C/svg%3E") }

/* Drawer backdrop */
#hrx-header .hrx-drawer__backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.45); opacity:0; pointer-events:none; transition:opacity .2s var(--ease); z-index:1100
}
#hrx-header .hrx-drawer__backdrop.is-open{ opacity:1; pointer-events:auto }

/* Misc mobile tweak */
@media (max-width: 767px){
  #hrx-header .hrx-main{ margin-top:10px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #hrx-header .hrx-drawer,
  #hrx-header .hrx-drawer__backdrop,
  #hrx-header .hrx-menu .sub-menu{ transition:none }
}