/*
 * Store Designer — header builder.
 * Layout of a header arranged in the admin: rows (top / main / bottom) > start, center, end > elements.
 * The rows keep the theme's own classes, so colours and shapes still come from the theme.
 */
#rd-hb { display: contents; }
.rd-hb-row[hidden], #rd-hb-pool { display: none !important; }
.rd-hb-inner { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 auto; min-width: 0; }
.rd-hb-col { display: flex; align-items: center; gap: .4rem; }
.rd-hb-start { flex: 1 1 0; justify-content: flex-start; }
.rd-hb-center { flex: 0 1 auto; justify-content: center; }
.rd-hb-end { flex: 1 1 0; justify-content: flex-end; }
.rd-hb-col.rd-hb-grow { flex: 4 1 0; min-width: 0; }
/* with nothing in the middle, an empty side gives its room away */
.rd-hb-center:empty ~ .rd-hb-end:empty, .rd-hb-start:empty:has(+ .rd-hb-center:empty) { display: none; }
.rd-hb-inner:has(> .rd-hb-grow) > .rd-hb-col:empty { display: none; }
.rd-hb-top .rd-hb-col { gap: 1.25rem; }
.rd-hb-el { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.rd-hb-el.rd-hb-fill { flex: 1 1 auto; }
.rd-hb-el.rd-hb-fill > * { flex: 1 1 auto; min-width: 0; }
.rd-hb-row:not(.rd-hb-bottom) .rd-hb-el-menu > * { margin: 0; }
.rd-hb-el-menu .navbar { padding-block: 0; }
.rd-hb-text { font-size: .9rem; white-space: nowrap; }
.rd-hb-btn { white-space: nowrap; }
.rd-hb-divider { width: 1px; height: 22px; background: currentColor; opacity: .22; }
.rd-hb-space { width: 28px; }
.rd-hb-links, .rd-hb-social { display: inline-flex; align-items: center; gap: 1rem; white-space: nowrap; }
.rd-hb-social { gap: .85rem; font-size: 1.05rem; }
.rd-hb-social a { color: inherit; }
@media (max-width: 767.98px) {
  .rd-hb-top .rd-hb-inner { gap: .75rem; }
  .rd-hb-top .rd-hb-col { gap: .9rem; }
  .rd-hb-main .rd-hb-inner { flex-wrap: wrap; gap: .6rem; }
  .rd-hb-main .rd-hb-col { flex: 0 1 auto; }
  /* what comes first stays at its side, the rest goes to the other */
  .rd-hb-main .rd-hb-start:not(:empty), .rd-hb-main .rd-hb-start:empty + .rd-hb-center { margin-inline-end: auto; }
  /* the search box and the category menu take a line of their own */
  .rd-hb-main .rd-hb-col:has(> .rd-hb-el-search:not(.rd-hb-s-icon):not(.rd-hb-s-ghost)) { display: contents; }
  .rd-hb-main .rd-hb-el-search:not(.rd-hb-s-icon):not(.rd-hb-s-ghost) { order: 5; flex: 1 1 100%; }
  .rd-hb-main .rd-hb-el-search:not(.rd-hb-s-icon):not(.rd-hb-s-ghost) > * { flex: 1 1 auto; max-width: none; margin: 0; }
  .rd-hb-main .rd-hb-col:has(> .rd-hb-el-menu) { order: 4; flex: 1 1 100%; }
}
/* elements away from the row their theme drew them in */
.rd-hb-top .rd-hb-btn { padding: .15rem .9rem; font-size: .8rem; line-height: 1.5; min-height: 0; height: auto; }
.rd-hb-row:not(.rd-hb-bottom) .s3-cats > ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
/* search as an icon: the theme's box opens under it (the coloured icon takes the store's colour from the saved design) */
.rd-hb-sicon { display: none; }
.rd-hb-el.rd-hb-s-icon, .rd-hb-el.rd-hb-s-ghost { position: relative; flex: 0 0 auto; }
.rd-hb-s-icon > .rd-hb-sicon, .rd-hb-s-ghost > .rd-hb-sicon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; font-size: 1.02rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s, filter .15s; }
.rd-hb-s-icon > .rd-hb-sicon { background: #4f46e5; color: #fff; }
.rd-hb-s-icon > .rd-hb-sicon:hover { filter: brightness(1.1); }
.rd-hb-s-ghost > .rd-hb-sicon { background: transparent; color: inherit; }
.rd-hb-s-ghost > .rd-hb-sicon:hover, .rd-hb-s-ghost.rd-open > .rd-hb-sicon { background: rgba(127, 127, 127, .14); }
.rd-hb-s-icon > :not(.rd-hb-sicon), .rd-hb-s-ghost > :not(.rd-hb-sicon) { display: none; position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 1050; width: min(360px, 86vw); max-width: none; margin: 0; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .4); }
.rd-hb-s-icon.rd-open > :not(.rd-hb-sicon), .rd-hb-s-ghost.rd-open > :not(.rd-hb-sicon) { display: block; }
/* cart as an icon: the button loses its text (a count badge stays) and becomes a round icon */
.rd-hb-c-icon #cart button[class*="-cart-btn"], .rd-hb-c-ghost #cart button[class*="-cart-btn"] { display: inline-grid; place-items: center; position: relative; width: 44px; min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 50%; font-size: 1.02rem; line-height: 1; box-shadow: none; transform: none; }
.rd-hb-c-icon #cart button[class*="-cart-btn"] > span:not([class*="-count"]), .rd-hb-c-ghost #cart button[class*="-cart-btn"] > span:not([class*="-count"]) { display: none; }
.rd-hb-c-icon #cart button[class*="-cart-btn"]::after, .rd-hb-c-ghost #cart button[class*="-cart-btn"]::after { display: none; }
.rd-hb-c-icon #cart button[class*="-cart-btn"] { background: #4f46e5; color: #fff; }
.rd-hb-c-icon #cart button[class*="-cart-btn"]:hover { filter: brightness(1.1); }
.rd-hb-c-ghost #cart button[class*="-cart-btn"] { background: transparent; color: inherit; }
.rd-hb-c-ghost #cart button[class*="-cart-btn"]:hover, .rd-hb-c-ghost #cart button[class*="-cart-btn"].show { background: rgba(127, 127, 127, .14); }