.banner-image-container {
    position: relative;
    width: 100vw;
		object-fit: cover;
}

.banner-image {
    width: 100vw;
    height: 200px;
	  background-size: cover;
		overflow: hidden;
	object-fit: cover;
	object-position: center center;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* or any color */
    font-size: 2em; /* adjust size */
    font-weight: bold;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* optional, adds a semi-transparent background */
    padding: 10px;
}

.wc-block-grid__product-title {
	font-size: 25px;
  font-weight: bold;

}


 

    /* Adjust the main body margin to avoid content being hidden behind the ticker */
    body {
        margin-top: 0px; /* Adjust this value depending on the height of your ticker */
    }

    /* Optional: Adjust the header if needed */
    header {
        margin-top: 0px; /* Make sure the header doesn't overlap with the ticker */
    }

/* Basic hover effect */
a:hover {
    color: #0073e6;       /* Change to your preferred color */
    text-decoration: underline; /* Underline the link */
}

#checkout-timer {
    font-size: 36px; /* Larger font size */
    font-weight: bold;
    color: red; /* Highlighted color */
    text-align: center;
    padding: 15px;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 8px;
    z-index: 9999; /* Ensure it stays above other elements */
}
#checkout-timer {
    position: fixed; /* Stick to the top */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Adjust width */
}
#checkout-timer {
    position: fixed; /* Sticks the timer to the viewport */
    top: 50px; /* Adjust this value to lower the timer */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%);
    font-size: 36px; /* Make it large */
    font-weight: bold;
    color: red;
    background-color: #fff;
    padding: 10px 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    z-index: 9999; /* Ensure it stays above other elements */
}

.payment-methods img {
    margin: 0 10px;
    display: inline-block;
}
.payment-methods {
    text-align: center;
    padding: 10px 0;
}

.page-id-337 .entry-title {
    display: none;
}
#masthead {
	margin-bottom: 0
}
.site-header {
    width: 100%;
    margin: 0;
    padding: 0 20px;
	
}

.site-header .col-full {
    max-width: 100%;
    padding: 0;
}

.storefront-primary-navigation {
    padding: 0 20px; /* Padding for navigation */
}
.site-header .custom-logo {
    padding-top: 15px;
}

.site-header .search-field {
    padding-top: 15px;
}
/* Reduce space between rows in the nav-menu */
.menu.nav-menu {
    margin-bottom: -10px; /* Removes bottom margin from the menu */
    padding-bottom: 0px; /* Removes bottom padding if present */
}

.menu.nav-menu li {
    margin-bottom: -0px; /* Reduces spacing between individual items */
}

.menu.nav-menu + .menu.nav-menu {
    margin-top: -10px; /* Reduce space between multiple menu rows */
}

/* Optional: Adjust font or line height for compact layout */
.menu.nav-menu a {
    font-size: 14px; /* Adjust font size if needed */
    line-height: 1.2; /* Adjust line spacing */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #f1f1f1;
}

.quick-links, .get-in-touch, .newsletter {
    width: 30%;
}

.quick-links ul {
    list-style-type: none;
    padding: 0;
}

.quick-links ul li {
    margin: 5px 0;
}

.newsletter form {
    display: flex;
    flex-direction: column;
}

.footer-logos {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #e1e1e1;
}

.footer-logos img {
    margin: 0 10px;
    width: 50px;
    height: auto;
}
@media screen and (max-width: 768px) {
    #metal-ticker {
        font-size: 12px;
        padding: 5px;
        white-space: nowrap;
        overflow: hidden;
    }
}

button#place_order {
    transition: opacity 0.3s ease-in-out;
}

.site-branding img {
    max-width: 350px !important; /* Adjust the size as needed */
    height: auto;
}

.storefront-primary-navigation {
    margin-top: -20px; /* Reduce space between logo and menu */
}

/* Prevent horizontal scrolling */
html, body {
  overflow-x: hidden;
  width: 100%;
}
* {
  box-sizing: border-box;
}

/* Two products per row on mobile */
@media (max-width: 768px) {
  .products.columns-4,
  .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Make images scale down on mobile */
@media (max-width: 768px) {
  .product img {
    max-width: 100%;
    height: auto;
  }
}

/* Adjust text and buttons for mobile */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  button, .button {
    padding: 10px 16px;
    font-size: 16px;
  }
}

/* Make forms mobile-friendly */
@media (max-width: 768px) {
  form input,
  form select,
  form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products li.product {
    width: 100%;
  }

  .products.columns-4,
  .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
  }

  .woocommerce ul.products li.product {
    margin: 0;
  }
}

@media (max-width: 768px) {
  /* Force proper grid layout */
  .products.columns-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0;
    margin: 0;
  }

  .products.columns-3 li.product {
    float: none !important;           /* Cancel WooCommerce's float */
    width: 100% !important;           /* Take full width of column */
    margin: 0 !important;             /* Remove spacing issues */
    box-sizing: border-box;
    display: block;
  }

  .products.columns-3 li.product img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}
@media (max-width: 768px) {
  .products.columns-3::before {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .wp-block-columns {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
  }

  .wp-block-column {
    width: 50% !important;
    padding: 0;
    box-sizing: border-box;
  }

  .wp-block-column img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}
@media (max-width: 768px) {
  #metal-ticker {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    gap: 20px;
  }

  #metal-ticker span {
    flex: 0 0 auto;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
  }

  #metal-ticker span.gold {
    color: goldenrod;
  }

  #metal-ticker span.silver {
    color: silver;
  }

  #metal-ticker span.platinum {
    color: palevioletred;
  }

  #metal-ticker span.palladium {
    color: lightblue;
  }

  #metal-ticker::-webkit-scrollbar {
    display: none;
  }

  #metal-ticker {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Style WooCommerce product cards */
.wc-block-grid__products .wc-block-grid__product,
ul.products li.product {
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Add a subtle hover effect */
.wc-block-grid__products .wc-block-grid__product:hover,
ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}




@media (max-width: 768px) {
  .mobile-scroll-menu {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0.5rem;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    scrollbar-width: none;
  }

  .mobile-scroll-menu::-webkit-scrollbar {
    display: none;
  }

  .mobile-scroll-menu .menu-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 1rem;
    position: relative;
  }

  .mobile-scroll-menu .menu-item > a {
    padding: 0.5rem 1rem;
    background: #f5f5f5;
    border-radius: 999px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: inline-block;
  }

  .mobile-scroll-menu .submenu-toggle {
    background: none;
    border: none;
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
    color: #555;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .mobile-scroll-menu .submenu {
    display: none;
    position: static;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
  }

  .mobile-scroll-menu .submenu a {
    display: inline-block;
    margin-right: 1rem;
    padding: 0.3rem 0.6rem;
    background: #eaeaea;
    border-radius: 999px;
    font-size: 13px;
  }
}

@media (min-width: 769px) {
  .mobile-scroll-menu {
    display: none;
  }
}

@media (max-width: 767px) {
    .site-header {
        padding-bottom: 20px; /* Adjust the value as needed */
    }
}

/* Load custom font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Change font of Storefront header menu */
.main-navigation ul.menu > li > a {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 1000;
		font-style: bold;
}

/* Import the Montserrat font (or any other striking font) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* Set the header background to darker gray */
.site-header {
  background-color: #222222 !important; /* Darker Gray */
}

/* Apply a striking font and uppercase styling to the menu text */
.site-header .menu li a {
  color: #FFD700 !important; /* Gold text */
  font-family: 'Montserrat', sans-serif; /* Striking font */
  font-weight: bold; /* Bold text for emphasis */
  text-transform: uppercase; /* Uppercase all menu items */
  letter-spacing: 2px; /* Slightly increase letter spacing for readability */
  transition: background-color 0.3s ease; /* Smooth transition for background color */
}

/* Rounded rectangle for menu items */
.site-header .menu li a {
    border-radius: 10px;  /* Round the corners */
    padding: 8px 12px;    /* Adjust padding to fit the new rounded shape */
}

/* Submenus with light purple background */
.mobile-scroll-menu .submenu {
    background-color: #D9B7FF;  /* Light Purple */
    border-radius: 10px;  /* Round the submenu corners */
    padding: 0.5rem;
    margin-top: 0.5rem;
    width: 100%;
}

/* Ensure submenu items are still rounded */
.mobile-scroll-menu .submenu a {
    background-color: #E5C1FF;  /* Lighter shade of purple for links */
    border-radius: 10px;
    font-size: 13px;
    padding: 0.3rem 0.6rem;
}

/* Hover effect for menu links (smooth fading to black) */
.site-header .menu li a:hover {
    background-color: #000000 !important; /* Black background on hover */
    color: #FFD700 !important; /* Maintain gold text on hover */
    transition: background-color 0.3s ease-in-out; /* Smooth transition */
}

body {
    background-color: #2E003E !important;
    color: black !important;
}

h1 {
  color: #ffffff !important;
}

img {
  filter: contrast(1.1) saturate(1.3);
}

/* Apply the red-violet color to the product grid items */
.wc-block-grid__product {
  background-color: #333 !important; /* Red-Violet */
  border-radius: 10px; /* Optional: rounded corners */
  padding: 10px; /* Optional: add some internal padding */
  color: ; /* White text color for readability */
}

/* Optional: Hover effect for product grid items */
.wc-block-grid__product:hover {
  background-color: #B83B4C; /* Slightly lighter red-violet on hover */
}
/* Targeting submenu items under #menu-menu */
#menu-menu .sub-menu li a {
    font-weight: bold;  /* Makes subcategory links bold */
}

/* Make the "Add to Cart" button gold */
.wp-block-button__link.add_to_cart_button.ajax_add_to_cart {
    background-color: gold;  /* Gold background color */
    color: black;  /* Black text for contrast */
    border: 2px solid gold;  /* Optional: Gold border for a better look */
}

/* Optional: Hover effect */
.wp-block-button__link.add_to_cart_button.ajax_add_to_cart:hover {
    background-color: darkgoldenrod;  /* Slightly darker gold on hover */
    color: white;  /* White text on hover */
}
/* Make all links gold and yellow */
a {
    color: orange;  /* Gold text color for links */
    text-decoration: none;  /* Remove underline from links */
}

/* Optional: Hover effect for links */
a:hover {
    color: yellow;  /* Yellow color on hover */
    text-decoration: underline;  /* Underline effect on hover */
}

/* Make product prices gold */
.wc-block-grid__product-price.price {
    color: gold;  /* Gold color for product prices */
}
/* Make the image smaller */
.wp-image-93277.size-full {
    width: 75%;  /* Adjust this value to make the image smaller or larger */
    height: auto;  /* Maintain aspect ratio */
}

/* Make the image 75% of its original size */
.wp-image-351.size-full {
    width: 75%;  /* Adjusts width to 75% of the original size */
    height: auto;  /* Keeps the aspect ratio intact */
}

/* Style the table with class volume-pricing */
.volume-pricing {
    background-color: #333 !important; /* Dark gray background for the body of the table */
    color: #FFD700 !important; /* Gold text color for the body */
    font-weight: bold; /* Make text bold */
    border-collapse: collapse; /* Make the table borders collapse neatly */
}

/* Style the table headers */
.volume-pricing th {
    background-color: #444 !important; /* Slightly darker gray for table headers */
    color: #FFD700 !important; /* Gold text for headers */
    padding: 10px; /* Optional: add padding for better spacing */
}

/* Style table rows (body) */
.volume-pricing td {
    background-color: #333 !important; /* Dark gray background for table rows */
    color: #FFD700 !important; /* Gold text for table rows */
    padding: 8px; /* Optional: add padding for better spacing */
}

/* Optional: Add a border for better visibility */
.volume-pricing th, .volume-pricing td {
    border: 1px solid #555; /* Dark border for table cells */
}
/* Style the table with class thwdpf-bulk-discount-info */
.thwdpf-bulk-discount-info {
    background-color: #333 !important; /* Dark gray background for the body of the table */
    color: #FFD700 !important; /* Gold text color for the body */
    font-weight: bold; /* Make text bold */
    border-collapse: collapse; /* Make the table borders collapse neatly */
}

/* Style the table headers */
.thwdpf-bulk-discount-info th {
    background-color: #444 !important; /* Slightly darker gray for table headers */
    color: #FFD700 !important; /* Gold text for headers */
    padding: 10px; /* Optional: add padding for better spacing */
}

/* Style table rows (body) */
.thwdpf-bulk-discount-info td {
    background-color: #333 !important; /* Dark gray background for table rows */
    color: #FFD700 !important; /* Gold text for table rows */
    padding: 8px; /* Optional: add padding for better spacing */
}

/* Optional: Add a border for better visibility */
.thwdpf-bulk-discount-info th, .thwdpf-bulk-discount-info td {
    border: 1px solid #555; /* Dark border for table cells */
}

/* Make product squares dark gray with gold text */
.products.columns-3 .product {
  background-color: #333;
  color: #FFD700;
  padding: 16px;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 100%;
  flex-grow: 1;
}

/* Force all product boxes to have the same height */
.products.columns-3 {
  display: flex;
  flex-wrap: wrap;
}
.products.columns-3 .product {
  flex: 1 1 30%;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure equal height */
}

/* Product title */
.products.columns-3 .product .woocommerce-loop-product__title {
  color: #FFD700;
  font-weight: bold;
  margin-bottom: 10px; /* Adds space between title and price */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Product price */
.products.columns-3 .product .price {
  color: #FFD700;
  font-weight: bold;
  margin-bottom: 10px; /* Adds space between price and button */
}

/* Product links */
.products.columns-3 .product a {
  color: #FFD700 !important;
  text-decoration: none;
}

/* Add to cart button */
.products.columns-3 .product .add_to_cart_button {
  background-color: #FFD700;
  color: #333 !important; /* Dark text for contrast */
  font-weight: bold;
  border: none;
  padding: 10px;
  border-radius: 4px;
  margin-top: auto;
  flex-grow: 0;
}

/* Button hover */
.products.columns-3 .product .add_to_cart_button:hover {
  background-color: #FFCC00;
  color: #000 !important;
}

/* Ensures uniform height for product boxes even if titles are different lengths */
.products.columns-3 .product .woocommerce-loop-product__title {
  height: 50px; /* Adjust height for titles */
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

@keyframes goldSilverFlash {
  0%   { color: gold; }
  50%  { color: silver; }
  100% { color: gold; }
}

.entry-title {
  font-size: 3em;
  font-weight: 900;
  font-family: 'Oswald', sans-serif; /* Use any bold font you like */
  text-align: center;
  padding-bottom: 0.2em;
  animation: goldSilverFlash 1s infinite;
  text-transform: uppercase;
}
.wc-block-grid__product-price.price {
  color: #FFD700 !important; /* Gold */
  font-weight: bold;
}

img.attachment-.size-.wp-post-image {
	  display: block;
  margin: 0 auto;
  max-width: 40%;
  height: auto;
}