/* ==========================================================================
   responsive-header.css  v1.30
   ========================================================================== */

/* main.css sets padding on #Header — zero out left/right so header content
   aligns with #container (catMenuPanel left edge, mainContent right edge).
   Full-bleed children (redStrip, menubar, search) no longer need negative
   margins to compensate since header padding-left is now 0. */
#Header {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
#Header .redStrip,
#Header .rsp-hdr-menubar,
#Header .rsp-hdr-search,
#Header .DarkGreyBG {
    margin-left: 0;
    margin-right: 0;
}

/* font-size:0 fix — main.css sets it on #Header */
#Header .rsp-hdr-topbar,
#Header .rsp-hdr-login,
#Header .rsp-hdr-right,
#Header .rsp-hdr-cart,
#Header .rsp-hdr-cart-total,
#Header .rsp-hdr-util-nav,
#Header .rsp-hdr-social { font-size: 10pt; }
.rsp-hdr-menubar { font-size: 9pt; }
.rsp-hdr-search  { font-size: 8pt; }

/* ==========================================================================
   DESKTOP TOP BAR  (> 900px)
   Mirrors production float layout exactly:
     brand      float:left  padding-top:16px
     login      float:left  padding-top:53px
     rsp-hdr-right float:right, padding-top:48px, flex-row:
       rsp-hdr-cart  = flex-col: [amount] [util-nav]
       rsp-hdr-social = padding-top:29px (77-48 = 29px relative to right)
   ========================================================================== */
#Header .rsp-hdr-topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    min-height: 94px;       /* prevents collapse; content can't change height — login is nowrap */
    padding: 3px 5px 8px 5px;
    box-sizing: border-box;
}

#Header .rsp-hdr-brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
}
#Header .rsp-hdr-brand a img { display: block; }

#Header .rsp-hdr-phone {
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    font-size: 9pt;
    color: #CC3300;
    white-space: nowrap;
    padding-top: 1px;
}
#Header .rsp-hdr-phone a,
#Header .rsp-hdr-phone a:link,
#Header .rsp-hdr-phone a:visited { color: #CC3300; text-decoration: none; }
#Header .rsp-hdr-phone a:hover   { text-decoration: underline; }

#Header .rsp-hdr-login {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 53px;
    padding-left: 3px;
    white-space: nowrap;
    overflow: hidden;
}

/* Right group: cart column + social column */
#Header .rsp-hdr-right {
    flex: 0 0 auto;
    flex-shrink: 0;         /* never squeeze — prevents qty jumping on resize */
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding-top: 48px;
}

#Header .rsp-hdr-cart {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* util-nav always anchors to the bottom */
    padding-right: 5px;
    padding-bottom: 6px;
    /* Reserve the height of a populated cart-total (~2 lines) so the
       right group doesn't shrink and lift util-nav + social when empty. */
    min-height: 38px;
}

#Header .rsp-hdr-cart-total {
    display: block;
    text-align: center;
    padding: 0 0 2px 52px;
    white-space: nowrap;
    line-height: 0.9;
}
#Header .rsp-hdr-cart-total br { display: inline; }

#Header .rsp-hdr-util-nav {
    display: block;
    font-size: 8pt;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.3;
    text-align: right;
}
/* Social: padding-top:29px so its absolute top = 48+29 = 77px, matching production */
#Header .rsp-hdr-social {
    display: block;
    padding-right: 5px;
    padding-left: 3px;
    padding-bottom: 2px;    /* sits just above util-nav baseline */
}
#Header .rsp-hdr-social .share-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   NAV BAR
   ========================================================================== */
.rsp-hdr-menubar {
    display: flex;
    align-items: stretch;
    background-color: #223F7F;
    box-sizing: border-box;
    min-height: 24px;
}

.rsp-hdr-date {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 8pt;
    color: #ffffff;
    white-space: nowrap;
}

.rsp-hdr-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: auto;
}
.rsp-hdr-nav a {
    display: inline-block;
    padding: 0 9px;
    line-height: 24px;
    white-space: nowrap;
    font-size: 9pt;
    color: #ffffff;
    text-decoration: none;
}
.rsp-hdr-nav a:hover { text-decoration: underline; }

.rsp-hdr-navsep {
    display: inline-flex;
    align-items: center;
    line-height: 24px;
}

.rsp-hdr-hamburger {
    display: none;
    background: #223F7F;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-self: center;
}
.rsp-hdr-hamburger span {
    display: block;
    width: 22px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
}

/* ==========================================================================
   SEARCH PANEL
   ========================================================================== */
.rsp-hdr-search {
    padding: 6px 8px 4px;
    box-sizing: border-box;
}
.rsp-hdr-search-toggle {
    display: none;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: #333333;
    font-size: 9pt;
    font-weight: bold;
    text-align: left;
    padding: 4px 2px;
}
.rsp-hdr-search-panel { display: block; }
.rsp-hdr-search-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}
.rsp-hdr-search-label {
    font-size: 9pt;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    flex: 0 0 auto;
}
.rsp-hdr-select,
.rsp-hdr-input,
.rsp-hdr-btn {
    height: 26px;
    box-sizing: border-box;
    font-size: 10pt;
    border-radius: 4px;
}
.rsp-hdr-select {
    border: 1px solid #b8bcc4;
    background: #ffffff;
    color: #333333;
    padding: 0 4px;
    flex: 0 1 auto;
    min-width: 60px;
}
/* input + buttons share one combined border */
.rsp-hdr-input-wrap {
    display: flex;
    flex: 1 1 160px;
    min-width: 120px;
    height: 26px;
    border: 1px solid #b8bcc4;
    border-radius: 4px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.rsp-hdr-input-wrap:focus-within {
    border-color: #7aacde;
    box-shadow: 0 0 0 2px rgba(122,172,222,.25);
}
.rsp-hdr-input {
    flex: 1 1 auto;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 8px;
    background: transparent;
    color: #333333;
    font-size: 8pt;
    border-radius: 0;
}
/* x reset — hidden until text typed */
.rsp-hdr-btn-reset {
    flex: 0 0 24px;
    width: 24px;
    height: 100%;
    border: none;
    border-left: 1px solid #e8eaed;
    background: transparent;
    color: #bbb;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, color .12s;
}
.rsp-hdr-btn-reset::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #777;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
}
.rsp-hdr-btn-reset.rsp-reset-vis { visibility: visible; opacity: 1; }
.rsp-hdr-btn-reset:hover::after { background-color: #333; }
.rsp-hdr-btn-reset:hover { color: #555; }
/* search icon — #223F7F cap */
.rsp-hdr-btn-find {
    flex: 0 0 30px;
    width: 30px;
    height: 100%;
    border: none;
    border-left: 1px solid #1a3266;
    background: #223F7F;
    color: #ffffff;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 0 3px 3px 0;
    transition: background .12s;
}
.rsp-hdr-btn-find::after {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    background-color: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 18 18'%3E%3Ccircle cx='6.2' cy='6.2' r='6.2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cline x1='11' y1='11' x2='15' y2='15' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 18 18'%3E%3Ccircle cx='6.2' cy='6.2' r='6.2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cline x1='11' y1='11' x2='15' y2='15' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex-shrink: 0;
}
.rsp-hdr-btn-find:hover { background: #1a3266; color: #ffffff; }
.rsp-hdr-search-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 3px 0 2px 2px;
    margin-top: 6px;
    font-size: 8pt;
    color: #333333;
}

/* ==========================================================================
   TABLET  641px – 900px
   topbar wraps into 3 full-width rows:
     Row 1: brand
     Row 2: rsp-hdr-right (cart qty + social), right-aligned
     Row 3: login
   ========================================================================== */
@media (max-width: 900px) {
    #Header .rsp-hdr-topbar {
        flex-wrap: wrap;
        min-height: 0;          /* cancel desktop fixed min-height */
        padding: 6px 8px;
        gap: 4px 0;
    }
    #Header .rsp-hdr-brand  { order: 1; flex: 1 1 100%; padding-top: 0; }
    #Header .rsp-hdr-login  { order: 2; flex: 1 1 100%; padding-top: 0; white-space: normal; overflow: visible; }
    #Header .rsp-hdr-right  { order: 3; flex: 1 1 100%; padding-top: 0; justify-content: flex-end; align-items: center; }
    /* reset desktop flex-column trick — both children just centre in the row */
    #Header .rsp-hdr-cart   { display: block; min-height: 0; }

    /* social: no offset needed */
    #Header .rsp-hdr-social { padding-top: 0; }
    /* hide dollar, keep qty above cart icon */
    #Header .rsp-hdr-cart-total a:first-child { display: none; }
    #Header .rsp-hdr-cart-total br            { display: none; }

    .rsp-hdr-hamburger { display: flex; }
    .rsp-hdr-nav { display: none; flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding: 4px 0; }
    .rsp-hdr-nav.rsp-hdr-nav--open { display: flex; }
    .rsp-hdr-nav a { padding: 2px 7px; }
    .rsp-hdr-search-row select:nth-of-type(3) { display: none; }
    .rsp-hdr-search-row select:nth-of-type(2) { display: none; }
}

/* ==========================================================================
   NARROW TABLET  641px – 700px
   Search row starts getting tight: hide the label, cap button widths so
   they don't overflow or disappear before the 640px snap.
   ========================================================================== */
@media (max-width: 700px) {
    .rsp-hdr-search-label { display: none; }
    .rsp-hdr-select       { display: none; }
    .rsp-hdr-input-wrap   { flex: 1 1 auto; }
    .rsp-hdr-btn-find     { flex: 0 0 34px; width: 34px; }
    .rsp-hdr-btn-reset    { flex: 0 0 28px; width: 28px; }
}

/* ==========================================================================
   <= 480 px
   ========================================================================== */
@media (max-width: 480px) {
    /* Hide "Search in current results" first (now position 3) */
    .rsp-hdr-search-checks span.CheckBox:nth-child(3) { display: none; }
}

/* ==========================================================================
   <= 360 px
   ========================================================================== */
@media (max-width: 360px) {
    /* Also hide "Show ready to ship products" (position 2) */
    .rsp-hdr-search-checks span.CheckBox:nth-child(2) { display: none; }
}

/* ==========================================================================
   MOBILE  <= 640 px
   Row 1: brand (centered)
   Row 2: login
   Row 3: rsp-hdr-right full-width — qty left, social right, both centered vertically
   ========================================================================== */
@media (max-width: 640px) {
    #Header .rsp-hdr-topbar { flex-wrap: wrap; min-height: 0; padding: 6px 8px; gap: 4px 0; }
    #Header .rsp-hdr-brand  { order: 1; flex: 1 1 100%; padding-top: 0; align-items: center; }
    #Header .rsp-hdr-login  { order: 2; flex: 1 1 100%; padding-top: 0; white-space: normal; overflow: visible; }
    #Header .rsp-hdr-right  { order: 3; flex: 1 1 100%; padding-top: 0; justify-content: space-between; align-items: center; }
    /* reset desktop flex-column trick — both children just centre in the row */
    #Header .rsp-hdr-cart   { display: block; min-height: 0; flex: 0 0 auto; }
    #Header .rsp-hdr-social { padding-top: 0; }

    /* hide dollar, keep qty — desktop padding works here too */
    #Header .rsp-hdr-cart-total a:first-child { display: none; }
    #Header .rsp-hdr-cart-total br            { display: none; }

    .rsp-hdr-menubar { flex-wrap: wrap; }
    .rsp-hdr-hamburger { order: 1; }
    .rsp-hdr-date { flex: 1; order: 2; }
    .rsp-hdr-nav {
        order: 3;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0;
        padding: 4px 0 6px 0;
        background-color: #223F7F;
        width: 100%;
    }
    .rsp-hdr-navsep { display: none; }
    .rsp-hdr-nav a { padding: 7px 14px; width: 100%; box-sizing: border-box; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .rsp-hdr-nav a:last-of-type { border-bottom: none; }
    .rsp-hdr-search-toggle { display: none; }
    .rsp-hdr-search-panel  { display: block; padding-top: 4px; }
    .rsp-hdr-select { display: none; }
    .rsp-hdr-search-label { display: none; }
    .rsp-hdr-search-row { flex-wrap: nowrap; }
    .rsp-hdr-input-wrap { flex: 1 1 auto; height: 34px; }
    .rsp-hdr-input      { font-size: 16px; } /* 16px prevents iOS auto-zoom on focus */
    .rsp-hdr-btn-find  { width: 38px; font-size: 16px; }
    .rsp-hdr-btn-reset { width: 30px; }
    .rsp-hdr-search-checks { gap: 6px; }
}

/* ==========================================================================
   SimpleLayout pages — keep header in desktop mode down to 640px
   Pages using SimpleLayout.master (Login, Register, ReturnAuthorization,
   OrderDetail, Contact, About, Terms, etc.) have content that stays at
   desktop width until 640px, so the header must match.
   Cancel the 900px collapse rules and rely solely on the 640px block above.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 900px) {
    body.SimpleLayout #Header .rsp-hdr-topbar,
    body.ProfileLayout #Header .rsp-hdr-topbar,
    body.CheckoutLayout #Header .rsp-hdr-topbar {
        flex-wrap: nowrap;
        min-height: 94px;
        padding: 3px 5px 8px 5px;
        gap: 0;
    }
    body.SimpleLayout #Header .rsp-hdr-brand,
    body.ProfileLayout #Header .rsp-hdr-brand,
    body.CheckoutLayout #Header .rsp-hdr-brand  { order: unset; flex: 0 0 auto; padding-top: 16px; }
    body.SimpleLayout #Header .rsp-hdr-login,
    body.ProfileLayout #Header .rsp-hdr-login,
    body.CheckoutLayout #Header .rsp-hdr-login  { order: unset; flex: 1 1 auto; padding-top: 53px; white-space: nowrap; overflow: hidden; }
    body.SimpleLayout #Header .rsp-hdr-right,
    body.ProfileLayout #Header .rsp-hdr-right,
    body.CheckoutLayout #Header .rsp-hdr-right  { order: unset; flex: 0 0 auto; flex-direction: row; align-items: flex-end; padding-top: 48px; justify-content: flex-end; }
    body.SimpleLayout #Header .rsp-hdr-cart,
    body.ProfileLayout #Header .rsp-hdr-cart,
    body.CheckoutLayout #Header .rsp-hdr-cart   { display: flex; flex-direction: column; min-height: 38px; }
    body.SimpleLayout #Header .rsp-hdr-social,
    body.ProfileLayout #Header .rsp-hdr-social,
    body.CheckoutLayout #Header .rsp-hdr-social { padding-top: 29px; }
    body.SimpleLayout #Header .rsp-hdr-cart-total a:first-child,
    body.ProfileLayout #Header .rsp-hdr-cart-total a:first-child,
    body.CheckoutLayout #Header .rsp-hdr-cart-total a:first-child { display: inline; }
    body.SimpleLayout #Header .rsp-hdr-cart-total br,
    body.ProfileLayout #Header .rsp-hdr-cart-total br,
    body.CheckoutLayout #Header .rsp-hdr-cart-total br            { display: inline; }
    body.SimpleLayout .rsp-hdr-hamburger,
    body.ProfileLayout .rsp-hdr-hamburger,
    body.CheckoutLayout .rsp-hdr-hamburger { display: none; }
    body.SimpleLayout .rsp-hdr-nav,
    body.ProfileLayout .rsp-hdr-nav,
    body.CheckoutLayout .rsp-hdr-nav       { display: flex !important; flex-direction: row; flex-wrap: nowrap; width: auto; padding: 0; }
}