/*
 Theme Name:   TGB Storefront Child
 Theme URI:    https://example.com/storefront-child
 Description:  Child theme for Storefront
 Author:       The Geek Basement
 Author URI:   https://example.com
 Template:     storefront
 Version:      1.0.0
*/


/*
colors:
light blue 43C9F5
dark blue 225FAC
yellowish FDB51B
alt blue 8EAFD7
orange F26624



*/
#primary {
  margin-bottom:0;
}

#main {
  margin-bottom:0;
}


/* Body text uses Inter */
body, input, textarea, select {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400;
}
.site .site-footer {
  background-color:#000;
  padding-bottom:1em;
}

.noBottomPad {
  padding-bottom:0;
}

h2.blackBgHeader {
  margin-bottom:0;
  padding: 34px 0 21px 0;
  font-size:3rem;
}

.separatorBarOuter{
  background-color: black;
}

.separatorBarInner {
  background-color:purple;
}


/* Headings use JetBrains Mono */
h1, h2, h3, h4, h5, h6 {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}
.custom-mobile-navigation li a {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;




    
}
.hamburger-modal .menu-item a {

    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;

}

body .wc-block-grid__product-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color:#000;
}




/* Hide "Select options" button on WooCommerce blocks on homepage */
body.home .wc-block-grid__product .wp-block-button__link {
    display: none !important;
}






/* BUTTON STYLES */
button, .wp-block-button__link.add_to_cart_button {
  text-transform: uppercase !important;
}
/* END BUTTON STYLES */

/* ===== Header Styles ===== */

/* Homepage - initial transparent header overlapping hero */
body .site-header {
  background-color: rgba(61, 61, 61, 0.8); /* Semi-transparent */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55); /* Always present */
  color: #111;
  height: 76px;
  margin-bottom: 0 !important;
  padding: 0;
  border-bottom: 0;
  position: sticky;
  top: 0;

  /* Slight transition */
  transition: background-color 0.25s ease;
}




body .site-header.is-scrolled {
  background-color: rgba(61, 61, 61, 0.98);
}


/* Other pages default header */
body:not(.home) .site-header {

}










/*wordpress adds overflow-x to .site for some reason, must set it back to default here for sticky header to work */
.site {
  overflow-x:visible !important;
}


.site-header > .col-full {
  height:100%;
}

/* ===== Layout Helpers ===== */

.custom-header-box {
  display: flex;
  justify-content: space-between;
  align-items:center;
  height:100%;
}

.site-branding {
  flex: 1 1 auto;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  max-width: 200px;
  margin: 0px 0 0 !important;
}

.site-branding .custom-logo-link img {

}

/* ===== Header Icons ===== */

.custom-header-icons {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header-icon-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-icon-item {
  padding: 0 8px;
  font-size: 1.1rem;
}

.header-icon-item a,
.header-icon-item button {
  color: #FFFFFF;
  position: relative;
}

/* Cart Count Badge */
.cart-count {
  position: absolute;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  top: -9px;
  right: -7px;
  padding: 0 6px;
  border-radius: 50%;
  /* background-color: #FDB51B; */
  background-color: #0077b6;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  min-width: 18px;
  min-height: 18px;
}

/* ===== Buttons Styling ===== */

button.search-toggle,
button.hamburger-menu-toggle,
#site-navigation-menu-toggle {
  background: transparent;
  border: 0;
  padding: 0;
}

button.search-toggle:hover,
button.hamburger-menu-toggle:hover {
  background: transparent;
  color:#b0b0b0;

}

/* ===== My Account Icon ===== */

a[aria-label="My Account"] i {
  transition: color 0.3s ease;
}

a[aria-label="My Account"]:hover i,
button[aria-label="Open search"]:hover i,
i.fa-cart-shopping:hover {
  transform: scale(1.1);
  color:#b0b0b0;
}


/* ===== Modal Styles ===== */

/* Search Modal */
.search-modal {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-modal.open {
  display: flex;
  opacity: 1;
}

.search-modal-content {
  width: 100%;
  max-width: 500px;
  padding: 2rem;
  background: rgb(61, 61, 61);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  animation: scaleIn 0.3s ease;
  text-align: center;
  position:relative;
  margin:0 .5rem;
}

.search-modal-title {
  color:#fff;
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.search-modal-close {
  position: absolute;
  top: 0;
  right: 1rem;
  font-size: 2rem;
  background: none;
  color: #fff;
  border: none;
  cursor: pointer;
  padding:0;
}

.search-modal-close:hover {
  background:none;
}

/* Search Form */
.search-form {
  margin: 2rem auto 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.search-field {
  padding: 0.8rem 1rem;
  font-size: 1.2rem;
  border-radius: 4px;
  border: none;
  width: 100%;
  max-width: 400px;
}

/* Category Suggestions */
.category-suggestions {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.category-suggestions li {
  padding:.5rem;
}

.category-suggestions li a {
  padding: 0.6rem 1.2rem;
  background: #333;
  border-radius: 25px;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease;
}

.category-suggestions li a:hover {
  background: #555;
}

/* ===== Mobile Navigation ===== */

.hamburger-menu-toggle {
  display: none;
}

.custom-mobile-navigation {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.mobile-menu-list {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.custom-mobile-navigation li {
  display: inline;
  padding: 0 1.3rem;
}

.custom-mobile-navigation li a {
  color: #fff;
  text-transform: uppercase;
  font-size:1.1rem;
  letter-spacing:1px;
  line-height:1rem;
}

.custom-mobile-navigation li a:hover {
  color:#b0b0b0;
}


/* Mobile nav responsive */

@media (max-width: 1023px) {
  .custom-mobile-navigation {
    display: none; /* Hidden by default */
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 999;
  }

  .hamburger-menu-toggle {
    display: block;
  }

  /* Show menu when active */
  .hamburger-menu-toggle.active + .custom-mobile-navigation,
  .custom-mobile-navigation.active {
    display: block;
  }

  .mobile-menu-list li {
    padding: 15px;
    border-bottom: 1px solid #ccc;
  }

  .mobile-menu-list a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    display: block;
  }

  .custom-header-icons {
    padding-left:32px;
  }
}

/* ===== User Icon with Online Dot ===== */

.user-icon-wrapper {
  position: relative;
  display: inline-block;
  color: #333;
}

.user-icon-wrapper .logged-in-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: #0077b6; /* green */
  border-radius: 50%;
  border: 1.5px solid #0077b6;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* ===== Hamburger Slide-in Modal ===== */

.hamburger-modal {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 80%;
  max-width: 320px;
  background: rgba(61, 61, 61, .97);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 10001;
  overflow-y: auto;
}

.hamburger-modal-content {
  padding:3rem 2rem;
}

.hamburger-modal .menu-item a {

	color: white;
	text-transform: uppercase;
	/* font-weight: bold; */
	font-size: 1.6rem;
	/* text-align: right; */

}

.hamburger-modal .menu-item {
  text-align:right;
}

.hamburger-modal.open {
  transform: translateX(0);
}

/* Overlay */
.hamburger-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 10000;
}

.hamburger-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Close button */
.hamburger-modal-close {
	background: none;
	border: none;
	/* font-size: 2rem; */
	position: absolute;
	top: 1rem;
	right: 2rem;
	cursor: pointer;
	padding: 0;
	color: white;
	font-size: 3rem;
	/* margin: 0; */
	/* height: 15px; */
}

.hamburger-modal-close:hover {
  background:none;
}

/* Menu list */
.hamburger-menu-list {
  list-style: none;
  margin: 4rem 0 0 0;
  padding: 0;
  font-size: 1.2rem;
  text-align: left;
  margin-top:3rem;
}

.hamburger-menu-list li {
  margin: 1rem 0;
}


.responsive-hero-banner {
  position:relative;
  margin-top:-76px;
}

.responsive-hero-banner img {
  border-radius:0px;
}

.hero-banner-text-overlay {
    position: absolute;
    top: 47%;
    left: 43%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    width: 80%;
    box-sizing: border-box;
}





.outline-text {
  transition: transform 0.3s ease;
}

@media (max-width: 600px) {
  .hero-banner-text-overlay {
    top:25%;
    left:50%;
  }
  .outline-text {
    transform: scale(1.2);
    /* transform-origin: center center; */
  }
}









.hero-image-left {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 80px; height: 80px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.hero-image-right {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 80px; height: 80px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}







































.custom-product-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: black;
    padding-top: 8px;
}

.custom-product-categories-grid a {
  position:relative;
  display:block;
}


.custom-product-categories-grid h3 {
  position: absolute;
  top: 11px;
  background-color: rgba(40, 40, 40, .4);
  padding: 0 10px;
  color: #fff;
  font-size: 1.6rem;
}

/* Adjustments for mobile */
@media (max-width: 767px) {
  .custom-product-categories-grid h3 {
    font-size: 1.2rem;  /* Smaller font size for mobile */
    top: 8px;  /* Adjusted top positioning for mobile */
  }
}

/* Adjustments for tablets */
@media (min-width: 768px) and (max-width: 1024px) {
  .custom-product-categories-grid h3 {
    font-size: 1.4rem;  /* Slightly smaller font for tablets */
    top: 10px;  /* Adjusted top positioning for tablets */
  }
}

/* Adjustments for large screens */
@media (min-width: 1025px) {
  .custom-product-categories-grid h3 {
    font-size: 1.6rem;  /* Default font size for larger screens */
    top: 11px;  /* Default top positioning */
  }
}















.custom-product-categories-grid .category-box {
    text-align: center;
    background: #f9f9f9;
    padding: 0px;
    border-radius: 0px;
    transition: box-shadow 0.3s, transform 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .custom-product-categories-grid .category-box:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      z-index: 10; /* Make sure it appears above neighbors */
  }
}


.custom-product-categories-grid .category-box img {
    max-width: 100%;
    height: auto;
    border-radius: 0px;
}

/* For phones/tablets up to 768px wide: 2 columns */
@media screen and (max-width: 768px) {
    .custom-product-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* For very small phones below 320px: 1 column */
@media screen and (max-width: 320px) {
    .custom-product-categories-grid {
        grid-template-columns: 1fr;
    }
}










.responsive-secondary-banner {
  position: relative;
}

.responsive-secondary-banner img {
  border-radius:0;
}

a.secondary-banner-button {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0077b6;
  color: #fff;
  padding: 9px 25px;
  text-decoration: none !important;
  font-size: 1.5rem;
  font-weight: 600;
  transition: background-color 0.3s ease;
  z-index: 10;

  bottom:10%;
  border:1px solid #d1d1d1;

}

a.secondary-banner-button:hover {
  background-color: #222;
}

/* Tablet */
@media (max-width: 1024px) {
  a.secondary-banner-button {
    font-size: 16px;
    padding: 10px 24px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  a.secondary-banner-button {
    font-size: 14px;
    padding: 10px 20px;
  }
}





.products .product .woocommerce-LoopProduct-link img {
  background:#c7c7c7;
  border-radius:0;
}

.home .products .product .woocommerce-LoopProduct-link h2 {
  color:#FFF;
}
.home .products .product .woocommerce-LoopProduct-link .price {
  color:#FFF;
}


















/* 🔲 Overall container for the header section */
.header-separator-box {
  margin-top: 0;
  padding-top: 31px;
  padding:31px 14px 0 14px;
  background-color: black;
}

@media (min-width: 1025px) {
.header-separator-box {
  padding:31px 14px 0 14px;
}
}

/* 🔳 Separator bar under the header */
.header-separator-box .separatorBarOuter {
  margin-top: 5px;
}

.separatorBarInner {
  height: clamp(13px, 7px + 1vw, 19px);
}

/* 🧠 Main heading with icon (icon inside the <h2>) */
.header-separator-box .header-icon-title {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5em;
  background-color: black;
  color: white;
  text-align: center;

  /* Apply font-size to both icon and text inside */
  font-size: clamp(1.3rem, 1.3rem + 1vw, 5rem);
  line-height: 1.1;
  margin: 0;
}

/* ✅ Icon inside the heading scales with text size */
.header-separator-box .header-icon-title .icon-wrapper img {
  height: 1.4em;      /* Match height to text size */
  width: auto;      /* Maintain aspect ratio */
  vertical-align: middle;
  display: inline-block;
}





















/* Reset default float styles */
ul.products.columns-4 {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px; /* Adjust spacing between items */
  list-style: none;
  padding: 0;
}

/* Style individual product items */
ul.products.columns-4 li.product {
  box-sizing: border-box;
  padding: 0 4px;
  margin: 0 0 20px;
  width: 50%; /* 2 columns by default (mobile) */
}

ul.products.columns-4 {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
  padding:0 10px;
}


/* 4 columns on tablets and up */
@media (min-width: 768px) {
  ul.products.columns-4 li.product {
    width: 25%; /* 4 columns */
  }
}





ul.products.columns-4 li.product {
  /* float: none !important; */
  /* margin-right: 0 !important; */
}


.footer-widgets {
  padding-top:0;
}


.footer-widgets.row-1.col-3 {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}


.footer-widgets.row-1.col-3 .block {
  width:auto;
  margin:0;
  flex: 0 1 auto;
  padding: 2rem 1rem;
  color:#6d6d6d;
}


@media (max-width: 767px) {
  .footer-widgets.row-1.col-3 .block {
    width:auto;
    margin:0;
    flex: 1 1 100%;
    padding: 1rem 1rem;
    color:#6d6d6d;
  }

  .footer-widgets.row-1.col-3 {
padding:1rem 0;
  }

}

.footer-widgets .widget {
  margin:0;
  line-height:2rem;
}

.site-footer a:not(.button):not(.components-button) {
  color:#6d6d6d;
  text-decoration:none;
}

.widget_nav_menu ul li::before {
  content: "";
}

.widget_nav_menu ul li {
  padding-left:0;
  margin-bottom:0;
  line-height:2rem;
}

.site-footer .widget ul {
  margin-bottom:0;
}






















.payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.payment-icons .icon {
    max-height: 25px;
    display: inline-block;
    max-width:12%;
}









.site-info-bar {
font-size:12px;
text-align:center;
}
















@media (min-width: 785px) {
.wc-block-cart-item__image img {
  min-width:184px;
}
}