:root{
    --contentWidth:900px;
}

/*  Box sizing  */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

.rad-hard{ border-radius: 0; }
.rad-soft{ border-radius: 3px; }
.rad-vsoft{ border-radius: 8px;}
.rad-round{ border-radius: 1em; }

.talign-left{text-align: left;}
.talign-center{text-align: center;}
.talign-right{text-align: right;}

.strike{ text-decoration: line-through;}

.cur-pointer{cursor:pointer;}

.outline-1{ border:1px solid;}

.uppercase{text-transform: uppercase;}

.expand{ width:100%; }

.no-wrap{ white-space: nowrap;}

.cw{ width:var(--contentWidth);}

.d-ib{ display: inline-block;}
.d-n{display: none;}
.invisible{ visibility: hidden; }

a { text-decoration: underline; }
a:hover { text-decoration: underline; }

.mono{
    font-family: var(--fontFamMono);
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}


[data-clickgoto]{
    cursor: pointer;
}

.scrollable{
	overflow-x:auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.scrollable.has-overflow{
	animation:flash_border 1s linear infinite;

}

.scrollable.has-overflow.ind-left{
	border-left:2px dashed transparent;
}

.scrollable.has-overflow.ind-right{
	border-right:2px dashed transparent;
}


.scrollable.has-overflow.ind-left.ind-right{
    border-right:2px dashed transparent;
    border-left:2px dashed transparent;
}



/* Works on Chrome, Edge, and Safari */
.scrollable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
}



@keyframes flash_border {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: rgba(0, 24, 150, 0.78);
  }
  100% {
    border-color: transparent;
  }
}


input[type=number].flat::-webkit-inner-spin-button,
input[type=number].flat::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* _____________________________________________________________________________________

    bxicons
_____________________________________________________________________________________ */
.bx{
vertical-align: middle;
line-height: 1;

}


/* _____________________________________________________________________________________

    btt
_____________________________________________________________________________________ */
#btt{
    position: fixed;
    bottom:1em;right:1em;
    visibility: hidden;
    opacity: 0;
    transition: opacity 2s;
}
#btt button{
    background-color:var(--color-dark);
    color:#fff;
    border-radius: 1em;
    display: flex;
    gap:1em;
    align-items: center;
    box-shadow: 0px 0px 40px -8px rgba(0,0,0,0.75);

}
#btt button:hover{
    color:rgb(255, 245, 149)
}
.show-btt #btt{
    visibility: visible;
    opacity: 1;
}

/* _____________________________________________________________________________________

    ModalLayer
_____________________________________________________________________________________ */

#modalLayer{
position: fixed;
top:0;right:0;bottom:0;left:0;
z-index:60000;
overscroll-behavior: none;
display: none;
}
#modalLayer .mdlr-bg{
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    width:100vw;
    height:100vh;
    background-image:url('../img/loader.svg');
    background-repeat:no-repeat;
    background-position: center center;
    background-size:8em;
}

#modalLayer .mdlr-content{
    position: fixed;
    top:2em;right:2em;bottom:2em;left:2em;
    background:#fff;
    border-radius:.25em;
    box-shadow: 0 0 32px -.25em rgba(0,0,0,0.8);
    display: none;
    overflow-y:auto;
}

#modalLayer .mdlr-content .close-btn{
    position: fixed;
    top:2.5rem;
    right:2.5rem;
    font-size:2em;
    z-index:5;
    background-color:rgba(255,255,255, .9);
    color:rgba(0,0,0,0.8);
    padding:1px;
    border-radius: 50%;
    line-height: .5;
}

body.mdlr-open{ overflow: hidden;     padding-right:var(--sbw); }
.mdlr-open #modalLayer{ display: block; }
.mdlr-open #modalLayer .mdlr-bg{ display: block;}
.mdlr-open #modalLayer.loaded .mdlr-content{ display: block; }
.mdlr-open #modalLayer.loaded .mdlr-bg{ background-image:none; }


img.mz{
    cursor: pointer;
    cursor:zoom-in;
}

#modalLayer.size-auto .mdlr-content{
    width:auto;
    top:auto;right:auto;bottom:auto;left:auto;
    top: 50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
    min-width:2em;
}

#modalLayer.size-small .mdlr-content{
    width:300px;
    top:auto;right:auto;left:auto;
    top: 50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
    min-width:2em;
    min-height: 2em;
}

#modalLayer.size-iz .mdlr-content{
    width:auto;
    top:auto;right:auto;bottom:auto;left:auto;
    top: 50%;
    left:50%;
    background-color: #000;
    transform: translateY(-50%) translateX(-50%);
}

#modalLayer.size-iz .mdlr-content img.modal-zoom-img{
    max-height:90vh;
    max-width:90vw;
    min-width:8em;
    display: block;
}
#modalLayer.size-iz .mdlr-content .close-btn{display: none;}
#modalLayer.size-iz .mdlr-bg::before{

    content: "\ec8e";

    font-family: "boxicons";
    position: fixed;
    top:2.5rem;
    right:2.5rem;
    font-size:2em;
    z-index:5;
    background-color:rgba(255,255,255, .9);
    padding:1px;
    border-radius: 50%;

}


/* _____________________________________________________________________________________


_____________________________________________________________________________________ */

.indicate-load{
    position: relative;
    background-color: var(--color-beigeMid);
    pointer-events: none;

}
.indicate-load::before{
    position: absolute;
    pointer-events: none;
    top:0;right:0;bottom:0;left:0;
    z-index: 2;
    content:"";
    overflow: hidden;
    -webkit-animation-duration: 2.2s;
            animation-duration: 2.2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-name: shimmer;
            animation-name: shimmer;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    background: var(--color-beigeMid);
    background: linear-gradient(to right, #f5f5ef 8%, #e0ded9 18%, #f5f5ef 33%);
    background-size: 1200px 100%;
    opacity: .95;
}



@-webkit-keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}
@keyframes shimmer {
  0% {
    background-position: -1200px 0;
  }
  100% {
    background-position: 1200px 0;
  }
}



/* _____________________________________________________________________________________


_____________________________________________________________________________________ */
.shake-it {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}





/* _____________________________________________________________________________________

    FORMS
_____________________________________________________________________________________ */


input.ae:not([type="button"]),
input.ae:not([type="submit"]),
input.ae:not([type="reset"]),
input.ae:not([type="checkbox"]),
input.ae:not([type="radio"]),
textarea.ae,
select.ae,
[contenteditable].ae,
.ae-btn{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    padding: .5em .75em;
    font-size:1em;
	line-height:1.125;
    font-weight: inherit;
    border: 1px solid transparent;
}


::placeholder{
    color:rgba(0,0,0,0.2)
}

input.ae:disabled{
    opacity: .75;
}

input.ae:not([type="button"]).inset,
input.ae:not([type="submit"]).inset,
input.ae:not([type="reset"]).inset,
input.ae:not([type="checkbox"]).inset,
input.ae:not([type="radio"]).inset,
[contenteditable].ae.inset,
textarea.ae.inset{
box-shadow: inset 0px 3px 6px -5px rgba(0,0,0,0.5);
background-color: rgba(0,0,0,0.05);
}
.ae-btn.flex-row{
	display: inline-flex;
	flex-flow: row wrap;
}

textarea.ae{
	resize: vertical;
	min-height: 3em;
}




.verror-msg{
	color:var(--color-red);
}


input.ae:not([type="button"]).verror,
input.ae:not([type="submit"]).verror,
input.ae:not([type="reset"]).verror,
input.ae:not([type="checkbox"]).verror,
input.ae:not([type="radio"]).verror,
[contenteditable].ae.verror,
textarea.ae.verror,
select.ae.verror{
	border-color:var(--color-red) !important;
	background-color: rgba(255,20,20,0.05);
}


/*  for raw text as button  */
button.plain{
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    font: inherit;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
    cursor: pointer;
	text-align: left;
}



input.ae.thin{
	padding:.25em;
}


input.ae.plain{
	border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: none;
}


select.ae{
	padding-right:2em;
	border:1px solid rgba(0,0,0,0.4);
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
	--lr-padding:.75em;
}
select.ae:disabled{
	background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(#fff 0%,#e5e5e5 100%);
}
select.ae.thin{
	--lr-padding:.25em;
	padding-top:var(--lr-padding);
	padding-bottom:var(--lr-padding);
	padding-left:var(--lr-padding);
}
select.ae.no-caret{
	padding-right:var(--lr-padding);
	background:linear-gradient(#fff 0%,#e5e5e5 100%);
}

/* _____________________________________________________________________________________

    Button
_____________________________________________________________________________________ */

.ae-btn {
	background:#fff;
	cursor: pointer;
	text-decoration: none;
	color:inherit;
	text-align: center;
}

.ae-btn:hover{
	filter:brightness(1.1);
}


a.ae-btn{
	text-decoration: none;
}

.ae-btn:active {
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.4) inset;
}

.ae-btn:disabled,
.ae-btn.disabled{
	filter: saturate(.5) opacity(.5);
	pointer-events:none;
}


.ae-btn.pop{
	box-shadow: 0 -2px 0px 0px rgba(0,0,0,0.2) inset;;
}

.ae-btn.pop:active{

	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.4) inset;;
}


.ae-btn.thin{
	padding: .25em .5em;
}


.btn{
    text-decoration: none;
    display: inline-flex;
    gap:.25em;
    align-items: center;
}


/* _____________________________________________________________________________________

    PRINT
_____________________________________________________________________________________ */


@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}





/* _____________________________________________________________________________________


_____________________________________________________________________________________ */


:root{
    --headerHeight:3rem;
    --color-link:rgb(0, 90, 214);
    --color-dark: rgba(27,27,27);
    --color-blue: rgb(0, 106, 232);
    --color-blueInv: rgba(255,138,0);
    --color-blueDark: rgb(90, 108, 143);
    --color-yellow: rgb(255, 207, 0);
    --color-green: rgb(9, 182, 0);
    --color-greenDark: rgb(13, 131, 7);
    --color-greenSoft: rgb(235, 245, 228);
    --color-red: rgb(228, 0, 62);
    --color-beige: rgb(250, 249, 245);
    --color-beigeMid:rgb(244, 242, 237);
    --color-menuBg:rgb(68, 76, 79);
    --color-menuTxt:rgb(177, 177, 177);
    --color-menuLink:#fff;
    --color-text:rgb(64,64,64);

    --fontFamSans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --fontFamMono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
}


/*  Box sizing  */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

html{
	font-family:var(--fontFamSans);
    background: #fff;
}

html.page-loading::after{
    content:"";
    position: fixed;
    top:0;right:0;bottom:0;left:0;
    background-image:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_6KQt{animation:spinner_4IqM 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}@keyframes spinner_4IqM{0%{transform:translate(12px,12px) scale(0);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}</style><path class="spinner_6KQt" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    cursor: wait;
}

body{
    background: var(--color-beige);
    color:var(--color-text);
	overscroll-behavior-y: none;
    opacity: 0;
    transition: opacity .25s;
    position: relative;
}





html.page-loading body{}
html.page-loaded body{
    opacity: 1;
}


body.noscroll{
	overflow: hidden;
	pointer-events: none;
	height: 100%;
    touch-action: none;
    padding-right:var(--sbw);

}




/* _____________________________________________________________________________________


_____________________________________________________________________________________ */

#outerWrap{
    position: relative;
}

header{
    position: sticky;
    top:0;

    z-index: 20;
    width:100%;
    line-height: 1;
    background:var(--color-menuBg);
    color:var(--color-menuTxt);
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

main{
    max-width: 1200px;
    min-height:80vh;
    margin:0 auto;
    padding:2em .5em 3em;
    top:var(--hh)
}



footer{
    background-image: linear-gradient(to bottom, var(--color-menuBg) 0%,#362f2f 100%);

    color:var(--color-menuTxt);
    border-top:1px solid rgba(0,0,0,0.2);
    padding:9em .5em 6em;
    margin-top:10em;
    min-height: 50vh;
}

a{
    color:var(--color-link);
    cursor: pointer;
}




/* _____________________________________________________________________________________

HEADER
_____________________________________________________________________________________ */

header {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

header a{ text-decoration: none;}
header a:hover{text-decoration: none;}

header #siteTitle{
    margin-right:1rem;
    flex:0 0 15rem;
    position: relative;
    align-self: flex-start;
}


header #siteTitle a{
    background-image:url(../img/_img.ha-ref-title.svg);
    background-size:contain;
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
    width:100%;
    height:5em;
    font-size: 1rem;
    position: absolute;
    top:-.25em;
    filter: drop-shadow(0 10px 5px var(--color-menuBg));
}


header nav ul.shelf{
    display: flex;
    flex-flow:row nowrap;
    align-items: stretch;
    padding:.5em 0;
}


header nav .mitem{
    color: #fff;
    border: none;
    margin: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    font: inherit;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    cursor: pointer;
    display: inline-block;
    padding:.75em 1em;
    border-radius: .25em;
}

header nav .mitem:hover{
    background-color: rgba(255, 255, 255, 0.15);
    color: rgb(250, 255, 148);

}

header nav li.shelf-item{
    position: relative;
}



header nav ul.drawers{
    background:var(--color-menuBg);
    color:var(--color-menuTxt);
    position: absolute;
    min-width:30ch;
    z-index: 100;
    visibility: hidden;
    transition: 280ms all 120ms ease-out;
    transform: rotateX(-90deg);
     transform-origin: top center;
     visibility: hidden;
     opacity: 0.3;
     box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}


header nav ul.drawers{
    padding:.5em;
}
header nav .drawer-item{
}
header nav .drawer-item a{
    display: block;
    padding:1em 1em;
    color:inherit;
    border-radius: .25em;
}
header nav .drawer-item a:hover{
    background-color: rgba(255, 255, 255, 0.15);
}

header nav .drawer-item a span:first-child{
    display: block;
    font-weight: 600;
    margin-bottom:.25em;
    color:var(--color-menuLink);
    white-space: nowrap;
}
header nav .drawer-item a:hover span:first-child{
    color: rgb(250, 255, 148);
}

header nav .drawer-item a p{
    display: block;
    font-size:.75em;
    line-height: 1.4;
}


header nav li.shelf-item:focus-within ul.drawers,
header nav li.shelf-item:hover ul.drawers{
opacity: 1;
transform: rotateX(0);
visibility: visible;
}



header #cartDisplay{
    padding-right:.25em;
    margin-left:auto;

}

header #cartDisplay .go-to-cart{
    padding:.5rem 1rem;
    color:#fff;
    background:rgba(255,255,255,.1);
    border-radius: .25em;
    display: block;
}
header #cartDisplay .go-to-cart:hover{
    background:rgba(255,255,255,.2);
}
header #cartDisplay .go-to-cart i{
    font-size:2em;
}
header #cartDisplay .go-to-cart > span{
    font-size:.9em
}

header #cartDisplay .go-to-cart .cart-tally{
    display: flex;
    align-items: center;
    gap:.5rem;
    position: relative;
}
header #cartDisplay .go-to-cart .cart-tally .qty{
    position: absolute;
    background:var(--color-yellow);
    padding:.125em .25em;
    z-index: 12;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.5);
    border:1px solid rgba(0,0,0,0.3);
    font-size:.7em;
    font-weight: 700;
    letter-spacing: .0375em;
    border-radius: .5em;
    top:-.25em;
    left:-.25em;
    color:var(--color-dark);
}

header #cartDisplay .go-to-cart .cart-tally .amt{
    color:var(--color-yellow);
}

header #cartDisplay .go-to-cart .cart-tally .qty:empty{display: none;}
header #cartDisplay .go-to-cart .cart-tally .amt:empty{display: none;}


/* _____________________________________________________________________________________

    BREAD CRUMBS
_____________________________________________________________________________________ */


.breadcrumbs{
    margin:3rem 0;
    display: inline-block;
    font-size:.85em;
    padding:1em;
    background:rgba(0,0,0,0.05);
}
.breadcrumbs ul{
    display: flex;
    flex-flow: row wrap;
    gap:.25em .5em;
    vertical-align: middle;
}
.breadcrumbs ul li{
    flex:0 0 auto;
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
    gap:.5em;
}

.breadcrumbs ul li::after{
    content:"\ea50";
    display: block;
    font-family: boxicons;
}
.breadcrumbs ul li:last-child::after{
    content:'';
}
.breadcrumbs ul li a{
    color:inherit;
    text-decoration: underline;
}
.breadcrumbs ul li:last-child a{
    text-decoration: none;
    pointer-events: none;
}


/* _____________________________________________________________________________________

    pagination
_____________________________________________________________________________________ */

.pgn{
    display: inline-flex;
    flex-flow:row nowrap;
    align-items: center;
    border:1px solid rgba(0,0,0,0.3);
    background-image: linear-gradient(to bottom, #ffffff 0%,#e7e7e7 100%);
    border-radius: .25em;
    font-size:.75em;
}
.pgn .pg-sel{
    border-left:1px solid rgba(0,0,0,0.2);
    border-right:1px solid rgba(0,0,0,0.2);
    padding-left:.5em;
    white-space: nowrap;
}
.pgn select{
    border:none;
    font-weight: 900;
}

.pgn li a{
    display: flex;
    align-content: center;
    justify-content: center;
    padding:.5em .5em;
    font-size: 1.25em;
}
.pgn li a:hover,
.pgn li select:hover{
    background-color:rgba(0,0,0,0.05);
    filter:brightness(.95);
}

.pgn button{
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	font: inherit;
	line-height: normal;
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	cursor: pointer;
	padding:.5em 1em;
    color:var(--color-link);
}
.pgn button[disabled]{
    color:rgba(0,0,0,0.25);
}
.pgn button:not([disabled]):hover{
	background-color: rgba(0,0,0,0.05);
}




/* _____________________________________________________________________________________

    Re-used classes
_____________________________________________________________________________________ */

/*--  part number  --*/
.partnum {
    font-weight: 600;
    font-family: var(--fontFamMono);
    /* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;

}
.partnum b{
    font-weight: inherit;
    padding-right:.1em;
    white-space: nowrap;
}

.partnum b:last-child{
    padding-right:0;
}



/* _____________________________________________________________________________________

    FOOTER
_____________________________________________________________________________________ */
footer nav{
    max-width: 1200px;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow:row wrap;
    gap:1em;
    padding:0 1em;
    color:var(--color-menuTxt);
}

footer a{
    color:var(--color-menuLink);
    text-decoration: none;
}

footer nav .compnay-deets{
    flex:1 1 auto;
    padding-right:2em;
    text-align: right;
    display: flex;
    align-items: flex-end;
    flex-flow:column;
}

footer nav .compnay-deets h2 img{
    display: block;
    width:12em;
}

footer nav .compnay-deets p{
    line-height: 1.4;
    font-size: .8em;
}

footer nav ul.link-cols{
display: flex;
flex-flow:row wrap;
justify-content: flex-start;
gap:2em;
flex:1 1 auto;
}

footer nav li.link-col{
}

footer nav li.link-col h3{
    font-weight: 600;
    font-size:.85em;
}
footer nav li.link-col li{
    margin:.75em 0;
}












@media (max-width: 768px) {
    html{
        font-size: .85em;
    }

    header #siteTitle{
        flex:0 0 3rem;
        left:0;
    }

    #emailSignupBtn{
        position: static;
    }

    header #siteTitle a{
        background-image:url(../img/_img.ha-ref-logo.svg);
    }

    header nav li.shelf-item{
        position: static;
    }
    header nav ul.drawers{
        left:0;right:0;
        width:100%;
    }

    header nav .mitem{
        padding:.75rem 1rem;
    }

    header #cartDisplay > a span{
        display: none;
    }

    header #cartDisplay > a .cart-tally .amt{
        display: none;
    }




}
@media (max-width: 480px) {

    html{
        font-size: .75em;
    }
    :root{
        --hh:0 !important;
    }

    header{
        position: relative;
    }

    header #siteTitle{
        flex:0 0 3rem;
        left:0;
        margin:0;
    }


    header #siteTitle a{
        background-image:url(../img/_img.ha-ref-logo.svg);
    }
    header nav .mitem{
        padding:.75rem .5rem;
    }


    footer nav{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow:row wrap;
    }
    footer nav .compnay-deets{
        flex:1 1 280px;
        padding:0 1em;
        text-align: center;
        display: flex;
        align-items: center;
        flex-flow:column;
    }

    footer nav ul.link-cols{
        justify-content: center;
    }

}