body{
	background-image:url(../css/background.gif);
}
h4{font-size: medium;}
a{color:#00853F;}

#wrapper{
	background-color: white;
	 border-radius: 8px;
	 box-shadow: 0px 2px 8px black;
	 margin-left: auto;margin-right: auto;
	 margin-top: 1rem;
	 padding: 0rem;
	 max-width: 90%;
}

.header{
	background-image:url(../css/header-spacer.gif) !important;
	background-repeat: repeat-x;
}
.navbar-nav{
	border-radius: 6px;
	box-shadow: 0px 2px 8px DarkGreen;
	flex-direction: unset !important;
	margin-left: .5rem;
}

.dropdown.dropdown-menu-4 {position:fixed ; width: 89%; }

@media (min-width: 992px) {
	 .navbar-logoXX{ height: 80%; }
	.buyNow{background-color:gold !important;}
	/* Increase the font-size for > medium size */
	.dropdown-toggle{font-size:1.4rem !important; }
	.dropdown-item{font-size:1.4rem !important; }
}

#navbarMenu > .col{
	padding-left: 5px; padding-right: 5px;
}

@media (max-width: 768px) {
/*	#navbarMenu{max-width: 200px;}*/

}

#hfeMenu{
	border: 1px solid black;
	box-shadow: 0px 2px 8px black;
	margin-bottom: 1rem;
	padding:2 rem;
}

.wide{ postition:static; left:-100vw;width: 600px; 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;}

.bannerShadow{ border-radius: 8px !important; box-shadow: 0px 2px 8px black !important;}
.bannerShadow:hover{ border-radius: 8px !important; box-shadow: 0px 2px 16px blue !important;}

.bg-light{ background-color: white; 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; }

#videoDialog {
      max-width: 1000px;
      margin: 30px auto;
  }

/* ############  */

.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 #006400; box-shadow: 0px 2px 8px darkgreen; margin: 6px; font-size: 1 rem; overflow-wrap: break-all; min-width: 220px; max-width:98%;}
.b1Name{color: darkgreen; font-size: 1.2rem; text-align: center !important;}
.b1NowName {color: blue; font-size: .7rem; 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;}
 	.bAdd{  padding: 0px; padding-top: 0px; padding-left: 0px; }

.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 #006400 !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;}
.b2NowRetail{color:black;font-size: 1rem; font-weight:normal;text-decoration: line-through;}
.b2NowSave {color:darkgreen;font-size: .7rem;}
.b2NowPrice {color:red;font-size: 1rem;font-weight:bold;}


#addresses{
    background-color: white;
    max-width: 60rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

#shopcart{
    background-color: white;
    max-width: 60rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.cartHR{ background-color: #90EE90; min-height: .2rem;}

.userinfo{ }

.bImage{margin: 0; width: 100%; text-align: center;  }
 /* ###  Changes for Media Size  ###  */
@media (max-width: 575px) {  /* Change for eXtra Small xs */
	h1{font-size: medium;}
	.b1NowPrice {color:red;font-size: .8rem;font-weight:bold;}
	.b2Name {font-size: .8rem;font-weight:bold;}

}
@media (min-width: 576px) {  /* Change for Small  sm */

}
@media (min-width: 768px) { /* Change for  Medium md */
	.b1NowImg{max-width: 150px; max-height: 150px; }
	.additem{font-size: .8rem !important;}
	.bAdd{margin: 0; width: 100%; text-align: center;  }
	.bImageXXX{margin: 0; width: 100%; text-align: center;  }
	.b1NowName {font-size: 1rem; color: blue;}
	.show-for-xxlarge{display: none;}
}

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

}

svg {fill:currentColor;}


/* =====================================================================
   Osprey / Bootstrap removal (2026-07-07) — see MIGRATION.md "Bootstrap →
   vanilla CSS/JS". Below: (1) grid/flex layout classes replacing
   container-fluid/row/col-*, (2) 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, (4) vanilla <details> mega menu.
   Copied from the shared starter block first used on bgh/mgfv/btog.
   ===================================================================== */

/* ---- 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__brand{display:flex;align-items:center;gap:.75rem;}
.site-header__search{flex:0 1 260px;min-width:0;margin-left:auto;}
.site-header__edit{flex:0 0 auto;}

/* ---- Page layout (was container-fluid > row > col-*) ---- */
.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;}

/* ---- 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-start{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;}
.m-2{margin:.5rem;}
.m-4{margin:1.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;}
.btn{display:inline-block;padding:.375rem 1rem;border:1px solid transparent;border-radius:6px;font-size:1rem;cursor:pointer;text-decoration:none;}
.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;}

/* ---- 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-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;}

/* ---- MKRS mega menu — vanilla <details> dropdowns (replaces BS navbar) ---- */
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:.4rem 1rem;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom:1px solid #dee2e6;}
.site-nav .nav-link{text-decoration:none;white-space:nowrap;}
.nav-drop{position:relative;}
.nav-drop>summary{cursor:pointer;list-style:none;white-space:nowrap;}
.nav-drop>summary::-webkit-details-marker{display:none;}
.nav-drop>summary::after{content:" \25BE";font-size:.8em;}
.nav-drop[open]>.drop-menu{position:absolute;left:0;top:100%;z-index:1000;min-width:230px;background:#fff;border:1px solid #dee2e6;border-radius:.25rem;box-shadow:0 4px 10px rgba(0,0,0,.15);padding:.25rem 0;}
.drop-menu .dropdown-item{display:block;padding:.3rem 1rem;text-decoration:none;color:#212529;white-space:nowrap;}
.drop-menu .dropdown-item:hover{background:#e9ecef;}
/* wide multi-column variant (Garden of Life mega-dropdown) */
.nav-drop[open]>.drop-menu.wide{display:flex;flex-wrap:wrap;gap:0 1.5rem;min-width:600px;max-width:90vw;padding:.75rem 1rem;}
.drop-menu.wide .drop-col{display:flex;flex-direction:column;min-width:180px;}
.drop-menu.wide .drop-heading{font-weight:bold;text-transform:uppercase;font-size:.75rem;color:#622E9A;padding:.3rem 0 .1rem;}

/* ---- Grid track collapse fix: grid-template-columns keeps a fixed
   track's width even when no item occupies it, so an absent left/right
   sidebar (or product aside) would squeeze main content into a ~520px
   column no matter the viewport. page.tmpl/product.tmpl add these
   modifier classes when a column has no content; each variant redefines
   grid-template-columns/areas so the unused track actually collapses. ---- */
.page-grid.no-left{grid-template-columns:1fr 240px;grid-template-areas:"title title" "main right" "foot foot";}
.page-grid.no-right{grid-template-columns:240px 1fr;grid-template-areas:"title title" "left main" "foot foot";}
.page-grid.no-left.no-right{grid-template-columns:1fr;grid-template-areas:"title" "main" "foot";}
.product-grid.no-aside{grid-template-columns:1fr;grid-template-areas:"main";}

/* ---- CSE search box ----
   The real button/input styling comes from the original Manatee framework
   stylesheet (/styles/manatee-search.css, linked in head_site.tmpl) - the
   proven design (gray gradient button, violet placeholder), not reinvented
   here. This block only scales it down and right-aligns it in the smaller
   Osprey header, matching bgh/mgfv/btog. mkrs's old aws-makers.css had its
   own now-unused gsc-search-button gradient/shadow rules and dead
   gsc-input-boxXX overrides (XX suffix = already disabled) — dropped, not
   carried forward, since manatee-search.css supersedes them. */
#gcse-search-div{width:100%;max-width:260px;}
#gcse-search-div .gsc-control-cse{margin-top:0 !important;}
#gcse-search-div input.gsc-input,
#gcse-search-div input.gsc-input.focus,
#gcse-search-div input.gsc-input.visited{font-size:14px !important;}
#gcse-search-div ::placeholder{font-size:14px !important;}
#gcse-search-div .gsc-search-button-v2{padding:4px 10px;}
#gcse-search-div td.gsib_b{display:none;}
@media (max-width:576px){
	.site-header__search{flex:1 1 100%;margin-left:0;order:3;}
	#gcse-search-div{max-width:100%;}
}

/* ---- list_links() cross-sell widget (2026-07-07) - plain heading + link
   list for a keyword-tagged product group, distinct from the full
   buy-now boxes show_keyword() renders. Shared shape across all sites. ---- */
.link-list{padding:1rem;margin:.75rem 0;background:#fff;}
.link-list__heading{font-weight:bold;text-transform:uppercase;font-size:.85rem;margin-bottom:.5rem;}
.link-list__items{list-style:none;padding:0;margin:0;}
.link-list__items li{padding:.15rem 0;}

/* ---- BuyNow1 (list-style buynow box) flex layout — this was missing
   entirely from aws-makers.css (present on bgh/mgfv already), so name/image/
   price/description just stacked vertically with no side-by-side layout.
   Copied from bgh/mgfv, 2026-07-07. ---- */
.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;}
.b1-row__desc{flex:1 1 260px;min-width:0;}
.buynow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;}

/* ---------------------------------------------------*/
/* More Info buyNow button — ported verbatim from Manatee
   /home/Manatee/resources/styles/manatee.css (2026-07-11).
   .btn base already exists above; .btn-sm is the Bootstrap 4 size
   the templates always paired with it. */
.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem;}

/* C ~ Button up */
.btn-lightblue,
.btn-lightblue:focus,
.btn-lightblue:visited {
  background-color: #B7DBFF;
  background: linear-gradient(to top, #B7DBFF, #1E90FF, #003B73);
  border-radius: 8px;
  border-color: #003B73;
  color: white;
  text-shadow: 1px 1px 0px black;
  box-shadow: 5px 5px 5px steelblue; }

/* C ~ Button hover */
.btn-lightblue:hover {
  background: linear-gradient(to top, #B7DBFF, #1E90FF, #003B73);
  color: PaleGoldenRod;
  text-shadow: 1px 1px 0px black;
  box-shadow: 2px 2px 0px steelblue; }

/* C ~ Button down */
.btn-lightblue:active {
  background: linear-gradient(to top, Azure, LightSkyBlue, #B7DBFF, #1E90FF);
  color: yellow;
  text-shadow: 1px 1px 0px black;
  box-shadow: 0px 2px 1px 1px black inset; }

/* ---------------------------------------------------*/
/* Admin edit-bar buttons (ITSUS only) — ported verbatim from Manatee
   /home/Manatee/resources/styles/manatee.css (2026-07-11).
   .btn-hfe = green Edit button, .btn-red = red Content button. */
.btn-hfe,
.btn-hfe:focus,
.btn-hfe:visited {
  background-color: #03AA4C;
  background: linear-gradient(to top, #008239, #25B965, #6FD99D);
  border-radius: 6px;
  color: white;
  text-shadow: 1px 1px 0px black;
  box-shadow: 5px 5px 5px darkgreen; }

.btn-hfe:hover {
  background-color: #03AA4C;
  background: linear-gradient(to top, #008239, #03AA4C, #25B965, #45C77D, #6FD99D);
  color: PaleGoldenRod;
  text-shadow: 1px 1px 0px black;
  box-shadow: 2px 2px 0px darkgreen; }

.btn-hfe:active {
  background-color: #03AA4C;
  background: linear-gradient(to top, #03AA4C, #25B965, #45C77D, #6FD99D, #FFFA83);
  color: Yellow;
  text-shadow: 1px 1px 0px black;
  box-shadow: 0px 2px 1px 1px darkgreen inset; }

.btn-red,
.btn-red:focus,
.btn-red:visited {
  background-color: Red;
  background: linear-gradient(to top, DarkRed, FireBrick, Crimson, Red, Tomato, OrangeRed);
  border-color: IndianRed;
  border-radius: 6px;
  color: white;
  text-shadow: 1px 1px 0px black;
  box-shadow: 5px 5px 5px Crimson; }

.btn-red:hover {
  background-color: crimson;
  background: linear-gradient(to top, DarkRed, FireBrick, Crimson, Red, Tomato, OrangeRed);
  border-color: crimson;
  color: PaleGoldenRod;
  text-shadow: 1px 1px 0px black;
  box-shadow: 2px 2px 0px DarkRed; }

.btn-red:active {
  background-color: OrangeRed;
  background: linear-gradient(to top, Crimson, Red, Tomato, OrangeRed, MistyRose);
  border-color: red;
  color: yellow;
  text-shadow: 1px 1px 0px black;
  box-shadow: 0px 2px 1px 1px darkred inset; }

/* ---------------------------------------------------*/
/* HFE-specific fit of the Osprey vanilla nav + sidebars (2026-07-11):
   match the old .navbar-nav green rounded box + 1.4rem links, and keep
   sidebar/aside images inside their grid column. */
.site-nav{border-radius:6px;box-shadow:0px 2px 8px DarkGreen;margin:.5rem;padding:.25rem .5rem;background:white;}
.site-nav summary{font-size:1.4rem;color:#00853F;}
.site-nav > a.nav-link{font-size:1.4rem;color:#00853F;}
@media (min-width: 992px){
	.nav-drop .drop-menu .dropdown-item{font-size:1.4rem;}
}
.page-grid__right img, .product-grid__aside img{max-width:100%;height:auto;}
.page-grid__right, .product-grid__aside{min-width:0;}
/* GoL wide dropdown: 4 columns side by side like live PHP (old .wide 600px rule is too narrow) */
.nav-drop[open]>.drop-menu.wide{min-width:840px;flex-wrap:nowrap;}