/*
#####  Palette URL: http://colorschemedesigner.com/#0112vr4kl----4xn--
*** Primary Color:
   var. 1 = #A21C19 = rgb(162,28,25)  Reddish Brown   Main Color
   var. 2 = #51302F = rgb(81,48,47)  Nice Dark Brown
   var. 3 = #310100 = rgb(49,1,0) Almost Black
   var. 4 = #FF9693 = rgb(255,150,147)  Almost Pink
   var. 5 = #FFF4F4 = rgb(255,244,244) Off White
*/
body {
	background-color:#fff2f2;
	font-family: Tahoma, Helvetica, sans-serif;
	font-size: 1rem;
	max-width: 1920px;
}

svg {fill:currentColor;}

h1,h2,h3,h4{ color:#51302F;margin:1px;}
h4{line-height:20px;margin:1px;margin-left:20px;text-align:left;}
li {color:#A21C19;text-align:left;}
blockquote{text-align:justify;}
#wrapper {
	background-color:#fff9f9;
	border: 4px solid #A21C19;
	border-radius: 8px; 
	box-shadow: 0px 2px 8px black; 
	margin-left: auto;margin-right: auto;
	margin-top: 1rem;
	padding: 0rem;
	max-width: 90%;
}
.section {background-color:#fff9f9; border: 3px solid #A21C19;}
.header {
	background-image:  url(https://boergoatshome.com/images/header_spacer.jpg);
	color: White;
	font-size: x-small;
	font-family: Arial, Helvetica, sans-serif;
}
.header_nav {
	background-color:#7D1C16;
	color: White;
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
}
.head {font-size:1.1em;}
A.head:link {color: silver;}
A.head:active {color: Silver;}
A.head:visited {color: white;   }
A.head:hover {color: white;}

A.content:link {color: Black;}
A.content:active {color: 7e1c17;}
A.content:visited {	color: 7e1c17;}
A.content:hover {color: Red;}



p {text-align:justify;}
#leftside{background-color:#FFFAFA;border: 1px solid #A21C19;width:160px;}
#rightside{background-color:#FFFAFA;border: 1px solid #A21C19;width:160px;}
ul.submenu {list-style-type: none;margin:0px;	margin-left:4px; padding:0px;text-align:left;}
li.submenu{ text-decoration:none;margin-top:5px; }
li.submenu a {font-type:Tahoma,Arial;font-size:14px;font-weight:normal;font-style:normal; text-decoration:none; display:block;}
li.submenu a:hover {background-color:#7D1C16;color:white;}
/*#shopcart{border:2px #801714 double;margin:10px;}*/
.footer {
	background-image:  url(https://boergoatshome.com/images/footer_spacer.jpg);
	color: White;
	font-size: xx-small;
	font-family: Arial, Helvetica, sans-serif;
	padding-right: 5px;
	vertical-align: bottom;
}
.kidcalc {
	border: 10pt ridge black;
}

#slogan{font-size: .8rem;font-style: italic;}
/*  ################    NEW VERSION  ###############   */
#hfeMenu{ 
	border: 1px solid black;
	box-shadow: 0px 2px 8px black; 
	margin-bottom: 1rem; 
	padding:2 rem;
}

.dropdown-menu.wide{ postition:static;left:-100vw;width: 1000px; max-width: 90vw;}

.col-auto > .dropdown-item{padding: .2rem;}

#menuBar{ margin-bottom: 1rem; box-shadow: 0px 2px 8px black; }

.dropdown-menu { border-radius: 8px !important; box-shadow: 0px 2px 8px black !important; color:black;}

.boxShadow{ border-radius: 8px !important; box-shadow: 0px 2px 8px black !important;}

.bg-light{ line-height: 1.2rem; padding: 0;}

a.dropdown-item:hover{color:white; background: #666;}

.dropdown-menu-3 {min-width: 600px; }
.dropdown-menu-2 {min-width: 400px; }	

.text-hfe-green{ color:darkgreen; }
/* ############  */

.itsus {color:gray;font-size:xx-small;border: 0px;}
A.itsus:link {color: darkblue;font-size:xx-small}
A.itsus:visited {color:darkblue; font-size:xx-small  }
A.itsus:hover {color: red; font-style:italic}
A.itsus:active {color: darkblue;font-size:xx-small}

/* ###    b1BuyNow #######  */
.b1BuyNow{ border-radius: 8px; border:4px double blue; box-shadow: 0px 2px 8px darkgreen; margin: 6px; font-size: 1 rem; overflow-wrap: break-all; min-width: 220px; max-width:1000px;}
.b1Name{color: darkgreen; font-size: 1.2rem; text-align: center !important;}
.b1NowName {color: green; font-size: .8rem; font-weight: bold; text-decoration: underline; margin-left: .3rem;}
.b1NowPriceTable{margin: auto; padding:0px; vertical-align: middle;}
.b1NowRetail{color:black;font-size: .8rem; font-weight:normal;text-decoration: line-through;}
.b1NowRetailPrice {color:black;font-size: .8rem; font-weight:normal;text-decoration: line-through;}
.b1NowSave {color:darkgreen;font-size: .7rem;}
.b1NowPrice {color:red;font-size: 1rem;font-weight:bold;}

.b1NowDesc {
	background-color:white; 
	font-size: 1rem; 
	text-align: left ; 
	vertical-align: top; 
	padding: 6px;
    white-space: wrap;
	overflow: hidden;
}
/* ###    b2BuyNow #######  */
.b2BuyNow{border-radius: 8px; border:4px double brown !important; box-shadow: 0px 2px 8px green; margin: 6px;font-size: 1 rem; overflow-wrap: break-all; min-width: 220px;}
.b2Name{color: darkgreen; font-size: 1.2rem; text-align: center !important;}
.b2Name2{color: darkgreen; font-size: .8rem; text-align: center !important;}
.b2NowPrice {color:red;font-size: 1rem;font-weight:bold;}
.b2NowRetailPrice {color:black;font-size: 1rem; font-weight:normal;text-decoration: line-through;}
 
#addresses{
    background-color: #fff9f9;
    max-width: 60rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}
#showBilling{background-color: white;}
#showShipping{background-color: white;}
#shopcart{
    background-color: white;
    max-width: 60rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.cartHR{ background-color: #51302F; min-height: 2px; color: white;}

.userinfo{ }

/* Bootstrap 5 Grid Standard Sizes */

@media (max-width: 575px) {  /* Change for eXtra Small xs */
	
}
	 
@media (min-width: 576px) {  /* Change for Small  sm */
	
}
	
@media (min-width: 768px) { /* Change for  Medium md */
	.additem{font-size: .8rem !important;}  
	.b1NowName {font-size: 1rem; color: blue;}
}

@media (min-width: 992px) { /* Change for  Large lg */
	
}

@media (min-width: 1200px) { /* Change for  Extra Large xlg */
	
}

@media (min-width: 1400px) { /* Change for  Extra Extra Large xxlg */
	
}

	
	
/* ===================================================================
   Bootstrap removal (2026-07-05) — see MIGRATION.md "Bootstrap →
   vanilla CSS/JS". Below: (1) new grid/flex layout classes replacing
   container-fluid/row/col-*, (2) a hand-rolled utility set standing
   in for the Bootstrap utility classes the templates already used
   (names kept so DB content / render.go do not need to change),
   (3) native <dialog> styling replacing the Bootstrap modal.
   =================================================================== */

/* ---- Header layout (was container-fluid > row > col-*) ---- */
.site-header__top{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.5rem 1rem;}
.site-header__search{flex:1 1 auto;}
.site-header__edit{flex:0 0 auto;}

/* ---- Page layout (was container-fluid > row > col-*) ----
   Named grid areas make the visual order (title / left / main / right / foot)
   independent of source order and independent of whether the left sidebar
   is present — fixes the "left column renders below main" bug noted in
   MIGRATION.md. */
.page-grid{
	display:grid;
	grid-template-columns:240px 1fr 240px;
	grid-template-areas:
		"title title title"
		"left  main  right"
		"foot  foot  foot";
	gap:1rem;
	padding:1rem;
}
.page-grid__title{grid-area:title;}
.page-grid__left{grid-area:left;}
.page-grid__main{grid-area:main;min-width:0;}
.page-grid__right{grid-area:right;}
.page-grid__foot{grid-area:foot;}
@media (max-width:768px){
	.page-grid{grid-template-columns:1fr;grid-template-areas:"title" "main" "left" "right" "foot";}
}

/* ---- Product layout (was container-fluid > row > col-*) ---- */
.product-grid{
	display:grid;
	grid-template-columns:1fr 240px;
	grid-template-areas:"main aside";
	gap:1rem;
	padding:1rem;
}
.product-grid__main{grid-area:main;min-width:0;}
.product-grid__aside{grid-area:aside;}
@media (max-width:900px){
	.product-grid{grid-template-columns:1fr;grid-template-areas:"main" "aside";}
}
.product-media{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin:.5rem 0;}
.product-media__image{flex:0 1 260px;}
.product-media__buy{flex:1 1 300px;min-width:0;}
.product-extra{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:.5rem 0;}

/* ---- Search layout (was container-fluid > row > col-*) ---- */
.search-page{max-width:900px;margin:0 auto;padding:1rem;}

/* ---- BuyNow layouts (was container-fluid > row > col-*) ---- */
.buynow-list{display:flex;flex-direction:column;gap:.75rem;}
.b1-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem;}
.b1-row__name{flex:1 1 100%;}
.b1-row__image{flex:0 0 auto;max-width:200px;}
.b1-row__image img{max-width:100%;height:auto;}
.b1-row__price{flex:1 1 200px;}
.buynow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;}

/* ---- Hand-rolled utilities (replace Bootstrap utility classes) ---- */
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-danger{color:#dc3545;}
.img-fluid{max-width:100%;height:auto;}
.border{border:1px solid #dee2e6;}
.border-success{border:1px solid #28a745;}
.border-danger{border:1px solid #dc3545;}
.border-primary{border:1px solid #0d6efd;}
.d-flex{display:flex;}
.align-items-center{align-items:center;}
.align-self-center{align-self:center;}
.align-self-end{align-self:flex-end;}
.clearfix::after{content:"";display:table;clear:both;}
.float-left{float:left;}
.media{display:flex;align-items:flex-start;}
.h4{font-size:1.5rem;font-weight:500;line-height:1.2;}
.h5{font-size:1.25rem;font-weight:500;line-height:1.2;}
.h6{font-size:1rem;font-weight:500;line-height:1.2;}
.p-0{padding:0;}
.p-2{padding:.5rem;}
.p-4{padding:1.5rem;}
.pt-1{padding-top:.25rem;}
.pr-0{padding-right:0;}
.pl-0{padding-left:0;}
.m-2{margin:.5rem;}
.mt-2{margin-top:.5rem;}
.mb-2{margin-bottom:.5rem;}
.my-4{margin-top:1.5rem;margin-bottom:1.5rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.p-3{padding:1rem;}
.ml-3{margin-left:1rem;}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.h3{font-size:1.75rem;font-weight:500;line-height:1.2;}

.btn{display:inline-block;padding:.375rem 1rem;border:1px solid transparent;border-radius:6px;font-size:1rem;cursor:pointer;text-decoration:none;}
.btn-success{background:#28a745;color:#fff;border-color:#28a745;}
.btn-success:hover{background:#218838;}
.btn-secondary{background:#6c757d;color:#fff;border-color:#6c757d;}
.btn-secondary:hover{background:#5a6268;}
.btn-close{background:transparent;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:#000;}

.input-group{display:flex;}
.input-group .form-control{border-radius:6px 0 0 6px;}
.input-group .btn{border-radius:0 6px 6px 0;}
.input-group-lg .form-control,.input-group-lg .btn{padding:.75rem 1rem;font-size:1.25rem;}
.form-control{flex:1 1 auto;padding:.5rem;border:1px solid #A21C19;border-radius:6px;font-size:1rem;}

/* ---- Native <dialog> (replaces Bootstrap modal + bootstrap.bundle.min.js) ---- */
dialog.dialog{border:none;border-radius:8px;padding:0;max-width:90vw;width:auto;box-shadow:0 2px 12px rgba(0,0,0,.4);}
dialog.dialog::backdrop{background:rgba(0,0,0,.5);}
dialog#videoModal{width:640px;max-width:90vw;}
.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid #ddd;}
.dialog-body{padding:1rem;text-align:center;}
.dialog-footer{padding:.75rem 1rem;border-top:1px solid #ddd;text-align:right;}
.ratio-16x9{position:relative;width:100%;padding-top:56.25%;}
.ratio-16x9 iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}