/* Force the Add to Cart / Payment row to stack vertically */
.l-section-h .w-post-elm.add_to_cart {
    flex-direction: column !important;
    display: flex !important;
}

/* Final Centering for the Subtitle Row */
.workshop-product-subtitle {
    order: -1 !important; 
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Centers horizontally in a flex container */
    text-align: center !important;    /* Backup for older browsers */
    margin-bottom: 15px !important;
    clear: both !important;
}

/* Ensure the wrapper inside the plugin also honors the center */
.workshop-product-subtitle .wapf-field-label,
.workshop-product-subtitle label {
    text-align: center !important;
    width: 100% !important;
}

/* Your "Yelling" Green typography */
.workshop-product-subtitle span {
    display: inline-block !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #14CC24 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: default !important;
    pointer-events: none !important;
}





/* Force WooCommerce Errors to be visible on Mobile */
.woocommerce-error, 
.woocommerce-message,
.wapf-errors {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    background-color: #721c24 !important; /* Solid Red Background */
    color: #ffffff !important;
    padding: 15px 20px !important;
    margin: 20px 0 !important;
    border-left: 6px solid #FFC107 !important; /* Humble Bee Yellow */
    z-index: 999999 !important;
    width: 100% !important;
    font-weight: bold !important;
    opacity: 1 !important;
}

/* Ensure the text inside the error is also visible */
.woocommerce-error li, 
.woocommerce-error a {
    color: #ffffff !important;
    list-style: none !important;
}


/* testing end */

/* Default colors for use in scheme
 text - white = #E0E0E0
 text / links - honey = #FFC107
 backgrounds - charcoal = #1A1A1B
 depth layers - lighter charcoal = #242425
 borders - slate = #374F74F
*/ 



/*2026 updates and revamp */


/* FORCE COLORS ON ORDER RECEIVED PAGE */
.woocommerce-checkout.woocommerce-order-received .woocommerce-notice--success {
    color: #FFC107 !important;
    text-align: center !important;
    font-size: 24px !important;
}

.woocommerce-checkout.woocommerce-order-received ul.order_details {
    background: #242425 !important;
    border: 1px solid #37474F !important;
    padding: 25px !important;
    border-radius: 12px !important;
}

.woocommerce-checkout.woocommerce-order-received ul.order_details li {
    color: #E0E0E0 !important;
    border-right: 1px solid #37474F !important;
}

.woocommerce-checkout.woocommerce-order-received ul.order_details li strong {
    color: #FFC107 !important;
}

/* Fix for the Table and Backgrounds */
.woocommerce-checkout.woocommerce-order-received .shop_table.order_details,
.woocommerce-checkout.woocommerce-order-received .shop_table.customer_details {
    background: #242425 !important;
    border: 1px solid #37474F !important;
    color: #E0E0E0 !important;
}

.woocommerce-checkout.woocommerce-order-received .shop_table.order_details th {
    background: #242425 !important;
    color: #FFC107 !important;
	  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
	border-bottom-color: #37474F !important;
}

.woocommerce-checkout.woocommerce-order-received address {
    background: #242425 !important;
    border: 1px solid #37474F !important;
    padding: 15px !important;
    color: #E0E0E0 !important;
}
.woocommerce-checkout.woocommerce-order-received ul.order_details li {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important; /* Faint slate line */
    padding: 0 25px !important;
}

.woocommerce-checkout.woocommerce-order-received ul.order_details li:last-child {
    border-right: none !important; /* Ensures the last one doesn't have a stray bar */
}

.woocommerce-checkout .woocommerce .shop_table td {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
	border-bottom-color: #37474F !important;
}




/* Hide Add to Cart buttons in the WOOF product grid */
.woof_shortcode_output ul.products li.product .button {
    display: none !important;
}



/* Global Image Protection: Covers standard Shop, Featured Lists, and Grids */
.woocommerce ul.products li.product a img, 
.us-grid-item img,
.w-grid-item img,
.wp-post-image,
#grow img {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}
/* Round corners on grid images*/
.woocommerce ul.products li.product a img {
  border-radius: 26px 26px 26px 26px !important;
}




/* Style the WOOF Reset Button */
.woof_reset_search_form {
    background-color: #37474F !important; /* Slate Gray */
    color: #FFC107 !important;            /* Honey Gold Text */
    padding: 8px 15px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
    margin-top: 10px;
    transition: all 0.3s ease;
    border: 1px solid #FFC107 !important;
	letter-spacing: 1px;
}
.woof_reset_search_form:hover {
    background-color: #FFC107 !important; /* Switch to Gold */
    color: #1A1A1B !important;            /* Dark text on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}


/*Hiding extra text field for field group on embroidery page */
#wapf_28030 .field-ef5a5a2 > .wapf-field-input {
  display: none;}
.wapf-wrapper .field-ef5a5a2 label{
  display: none;
}

/* Style the WooCommerce "Added to Cart" Success Message */
.woocommerce-message {
    background-color: #242425 !important; /* Lighter Charcoal */
    border: 2px solid #37474F !important;   /* Slate Border */
    border-left: 6px solid #FFC107 !important; /* Honey Gold Accent Bar */
    border-radius: 12px !important;
    color: #E0E0E0 !important;               /* Off-white text */
    padding: 15px 20px !important;
}

/* Style the "View Cart" button inside the message */
.woocommerce-message .button {
    background-color: #FFC107 !important;
    color: #1A1A1B !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    transition: transform 0.2s ease !important;
}

.woocommerce-message .button:hover {
    transform: scale(1.05);
    background-color: #ce9b2c !important; /* Darker Gold on hover */
}

/* Centers grid images */
.woocommerce ul.products li.product > a:not(.button) {
  display: flex!important;
}

/* Localize Bubble Look for New Arrivals & Best Sellers (WOOF Grid) */
.woocommerce-shop.archive ul.products li.product {
    background-color: #1A1A1B !important; /* Charcoal depth */
    border: 1px solid #37474F !important; /* Slate border */
    border-radius: 12px !important;       /* Bubble radius */
    padding: 25px 15px 30px 15px !important; /* Top, Right, Bottom, Left */
    transition: transform 0.3s ease, border-color 0.3s ease;
    list-style: none;
		display: flex !important;
    flex-direction: column;
    justify-content: space-between;
		height: 100%;
}

/* Hover Effect */
.woocommerce-shop.archive ul.products li.product:hover {
    transform: translateY(-5px);
    border-color: #ce9b2c !important; /* Honey Gold highlight */
}

/* Fix for the internal image/text alignment in the bubble */
.woocommerce-shop.archive ul.products li.product a {
    text-decoration: none !important;
    display: block;
}

.woocommerce-shop.archive ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 1.1rem;
    margin-top: 15px;
}
/* Bulletproof hide for all buttons/links on the Consultation product */
.woocommerce-shop.archive ul.products li.product:has(a[href*="custom-project-consultation"]) .button,
.woocommerce-shop.archive ul.products li.product:has(a[href*="custom-project-consultation"]) .add_to_cart_button {
    display: none !important;
}

/* Center and enlarge the dynamic variation price using Flexbox */
.single-product .woocommerce-variation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.single-product .woocommerce-variation bdi {
font-size: 2rem !important; /* Bumped up for visibility */
    font-weight: bold;
    color: #ce9b2c; /* Applying your Honey Gold theme accent */
    display: block;
    margin-bottom: 10px;
}


/* Hide theme prices ONLY if Fancy Product Designer is active on the page */
.fancy-product .summary .price, 
.fancy-product .woocommerce-variation-price {
    display: none !important;
}


/*----- WOOF GRID AND IMPREZA GRID----*/
/* --- 1. THE BASE CONTAINER (Always First) --- */
.w-grid-item-h .post_image {
    background-color: #242425; /* Fallback for non-apparel like the Coin */
    background-size: cover;
    background-position: center;
    position: relative;
    width: 150px !important; 
    height: 150px !important;
    border-radius: 12px;
    overflow: hidden;
    display: block !important;
    margin: 0 auto;
}
/* --- 2. THE GRAPHIC (Centered inside the bubble) --- */
.w-grid-item-h .post_image img {
    width: 50% !important; /* Changed from 38% to fill the bubble */
    height: 100% !important;
    object-fit: contain !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 10px !important; /* Gives the graphic some breathing room */
    z-index: 1 !important;
}



/* --- 4. THE WATERMARK (Layered on Top) --- */
.w-grid-item-h .post_image::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Product_Watermark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
    z-index: 5 !important;
    pointer-events: none;
}
/* --- 4. THE INTERACTIVE LINK (Top Layer) --- */
.w-grid-item-h .post_image a {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 5 !important;
    display: block !important;
    background: transparent !important;
}
/* --- 5. BUTTON REMOVAL (Apparel Page Grid) --- */
/* Targets the 'Select Options' buttons on the Featured Apparel grid */
.w-grid-item-h .add_to_cart_button, 
.w-grid-item-h .product_type_variable,
.w-grid-item-h .w-btn-wrapper {
    display: none !important;
}

/* Centers the price and cleans up the bottom gap */
.w-grid-item-h .price {
    display: block !important;
    text-align: center !important;
    margin-bottom: 5px !important;
		border: none !important;
}
/* --- WOOF GRID: CONSOLIDATED BUBBLE --- */

/* --- 2. INTERNAL GRAPHICS & WATERMARK --- */
/* --- A. THE SHOP/SEARCH GRID (The Workshop Page) --- */

/* 1. The Main Grid Container */
.archive ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* 2. The Individual Cards */
.archive ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: #242425 !important; 
    width: 180px !important; /* Set width so they align in rows */
    height: 300px !important;
    border: 1px solid #1a1a1b !important;
    border-radius: 0 !important;
    float: none !important;
}

/* 3. The Bubble & Graphic (Inside the Card) */
.archive ul.products li.product > a:first-of-type {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 150px !important;
    height: 150px !important;
    margin: 10px auto 0 auto !important;
    flex-shrink: 0 !important;
}


/* B. THE IMPREZA GRID (Featured Apparel) */
/* This keeps your main page designs looking sharp */
.w-grid-item-h .post_image img {
    position: absolute !important;
    top: 50% !important;
    left: 48% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 80% !important;
		overflow: visible !important;
    z-index: 2 !important;
}

/* C. THE WATERMARK (Global) */
.products .product a::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Product_Watermark.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 3 !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* --- 3. THE TEXT (Inside the Card) --- */

.products .product .woocommerce-loop-product__title {
    position: relative !important;
    margin-top: 10px !important;
    font-size: 14px !important;
    color: #FFC107 !important;
    line-height: 1.2 !important;
    padding: 0 10px !important;
    text-align: center !important;
}

.products .product .price {
    margin-top: auto !important; /* Pushes price to the bottom of the 300px card */
    margin-bottom: 15px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Watermark Shield - Locked at Level 10 */
.products .product a:first-of-type::after {
    content: "" !important;
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Product_Watermark.png') !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3; /* Your test opacity */
    z-index: 10 !important; /* Shield stays high */
    pointer-events: auto !important;
    border-radius: 25px !important;
}
/* --- 3. THE TEXT BREAKOUT (Manual Offset) --- */

/* Allow the link to show things outside its 150px borders */
.products .product a:first-of-type {
    overflow: visible !important; 
    margin-bottom: 75px !important; /* Creates the gap for the next row */
}
/* Ground the text so it doesn't move when the bubble lifts */
.products .product .woocommerce-loop-product__title,
.products .product .price {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 200px !important;
    text-align: center !important;
    transition: none !important; /* Keeps it from 'hitchhiking' on the lift */
}
/* --- 2. DE-SQUISH THE TEXT --- */
/* We're giving the Title and Price more vertical 'breathing room' */
.products .product .woocommerce-loop-product__title {
    top: 150px !important; /* Pushed down slightly further from the bubble */
    line-height: 1.2 !important;
    min-height: 2.4em !important; /* Holds space for 2-line titles so they don't jump */
    margin-bottom: 1px !important;
}
.products .product .price {
    top: 190px !important; /* Moves the price down to avoid overlapping the title */
    font-weight: 700 !important;
}

/* --- 4. THE HOVER PHYSICS (Unified Polish) --- */
.products .product a:first-of-type:hover {
    transform: translateY(-10px) !important;
/* THE ACTIVE GLOW: Honey Gold / Yellow */
    border-color: #FFC107 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 193, 7, 0.7) !important;
}

/* Optional: Make the text glow slightly when the bubble is hovered */
.products .product a:first-of-type:hover ~ .woocommerce-loop-product__title {
    color: #FFC107 !important;
    transition: color 0.3s ease;
}
/* --- THE HOVER LOCK (Prevents the 'Pop') --- */
.products .product a:first-of-type:hover img {
    z-index: 2 !important; /* Force art to stay behind Level 10 on hover */
}
.products .product a:first-of-type:hover::after {
    z-index: 11 !important; /* Shield jumps slightly higher to stay on top */
}
/* Hide Select Options */
.products .product .button.product_type_variable,
.products .product .w-btn-wrapper {
    display: none !important;
}
/* --- UNIFIED CATEGORY MOCKUP SWITCHER (FINAL) --- */

/* 1. T-SHIRTS */
.product_cat-t-shirts .post_image,
.product_cat-t-shirt .post_image,
.woocommerce ul.products li.product_cat-t-shirts a:first-of-type,
.woocommerce ul.products li.product_cat-t-shirt a:first-of-type{
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/T-Shirt_Mockup-Background.png') !important;
}

/* 2. TANKTOPS */
.product_cat-tanktops .post_image,
.product_cat-tanktop .post_image,
.woocommerce ul.products li.product_cat-tanktops a:first-of-type, .woocommerce ul.products li.product_cat-tanktop a:first-of-type
{
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Tanktop_Mockup_Background_Main.png') !important;
}

/* 3. SWEATSHIRTS */
.product_cat-sweatshirts .post_image,
.product_cat-sweatshirt .post_image,
.woocommerce ul.products li.product_cat-sweatshirts a:first-of-type,
.woocommerce ul.products li.product_cat-sweatshirt a:first-of-type
 {
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Sweatshirt_Mockup_Background_Main_Final.png') !important;
}

/* 4. HOODIES */
.product_cat-hoodies .post_image,
.product_cat-hoodie .post_image,
.woocommerce ul.products li.product_cat-hoodies a:first-of-type,
.woocommerce ul.products li.product_cat-hoodie a:first-of-type {
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Hoodie_Mockup_Background_Main_Final.png') !important;
}

/* 5. Film & Transfers */
.product_cat-film-transfers .post_image,
.woocommerce ul.products li.product_cat-film-transfers a:first-of-type {
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/DTF_Background-scaled.png') !important;
}

/* 6. HIVE Sheets  */
.product_cat-custom-hive .post_image,
.woocommerce ul.products li.product_cat-custom-hive a:first-of-type {
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/DTF_Background-scaled.png') !important;
}
/* 7. Embroidery  */
.product_cat-custom-hive .post_image,
.woocommerce ul.products li.product_cat-embroidery a:first-of-type {
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Embroidery_hoop-scaled.png') !important;
}

/* FIX: Embroidery Background & Size for Home Page and Archives */
.product_cat-embroidery .post_image, 
.woocommerce ul.products li.product_cat-embroidery a:first-of-type {
    background-image: url('https://thehumblebeeworkshop.com/wp-content/uploads/2026/04/Embroidery_hoop-scaled.png') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Ensure the Embroidery Graphic is large and centered in the bubble */
.product.product_cat-embroidery a img {
    padding: 25px !important; /* Reduced padding to make the graphic larger */
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}



/* Apply the 'Floating Graphic' look ONLY to Apparel categories */
.product_cat-apparel a img,
.product_cat-t-shirts a img,
.product_cat-sweatshirts a img,
.product_cat-tanktops a img {
    padding: 45px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    z-index: 2 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}


/* Apply the 'Floating Graphic' look ONLY to Hoodie categories */
.product_cat-hoodies a img {
    padding: 50px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    z-index: 2 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

/* Apply the 'Floating Graphic' embroidery categories */
.product_cat-embroidery a img {
    padding: 25px !important;
		padding-left: 19% !important;
		padding-top: 40px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    z-index: 2 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
/* Apply the 'Floating Graphic' film categories */
.product_cat-film-transfers a img {
		padding: 20px !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    z-index: 2 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
/* Ensure Drinkware and other items remain Full-Frame */
.product_cat-tumblers a img,
.product_cat-engraved-tumbler a img,
.product_cat-kitchen-towels a img,
.product_cat-sublimation-tumbler a img,
.product_cat-uv-tumbler a img,
.product_cat-glassware-barware a img {
    padding: 0 !important;
    object-fit: contain !important;
}
/*Hide buy buttons*/
.products .product_cat-film-transfers a.button,
.products .product_cat-tumblers a.button
{
	display: none !important;
}

/* 1. Give Drinkware an 'Invisible Box' to match the Shirt Bubble size */
.product_cat-tumblers .product a :first-of-type,
.product_cat-glassware-barware .product a :first-of-type,

.product_cat-engraved-tumbler .product a :first-of-type {
    display: block !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 10px auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Force Drinkware Images to fill the 150px space ONLY in Grids */
.products .product_cat-tumblers img,
.products .product_cat-engraved-tumbler img,
.products .product_cat-sublimation-tumbler img,
.products .product_cat-glassware-barware img {
    width: 150px !important;
    height: 150px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Force Kitchen Towels and others to fill the 150px space without padding */
.product.product_cat-other-apparel a img,
.product.product_cat-tumblers a img,
.product.product_cat-coasters a img,
.product.product_cat-glassware-barware a img,
.product.product_cat-engraved-leather-patches a img,
.product.product_cat-engraved-metal-coins a img,
.product.product_cat-engraved-gifts a img,
.product.product_cat-engraved-wood-acrylic a img,
.product.product_cat-engraved-tumbler a img, 
.product.product_cat-kitchen-towels a img
{
    width: 150px !important;
    height: 150px !important;
    padding: 0 !important; /* This removes that 'small' look */
    margin: 0 auto !important;
    object-fit: cover !important; /* Changed 'contain' to 'cover' to fill the square */
    display: block !important;
    border-radius: 25px !important; /* Matches your bubble look */
}

/* 2. Force other apparel Images to fill the 150px space ONLY in Grids */
.products .product_cat-other-apparel a img {
    display: block !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 10px auto !important;
    border-radius: 25px !important; /* This is your 'cookie cutter' shape */
    overflow: hidden !important;    /* This clips the image to that shape */
    background-color: #242425;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;

}

/* 3. Product Page Safety: Ensure the main image ignores the grid sizing */
.single-product .hb-design-overlay img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}

/* --- 1. THE MAIN CONTAINER (The Link) --- */
.products .product a  {
    display: block !important;
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto 10px auto !important;
    overflow: hidden !important; 
    border-radius: 25px !important;
    background-color: #242425;
		background-size: cover !important;
    /* THE GLOW: Matching the Apparel Page Featured Grid */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.85) !important;
    
    transition: all 0.3s ease-in-out !important;
}







/*---- End of Grid styles ----*/





/* Style the WOOF Text Search Input */
.woof_text_search_container input[type="search"] {
    background-color: #1a1a1b !important; /* Charcoal background */
    color: #FFC107 !important;           /* Honey Gold text */
    border: 1px solid #37474F !important; /* Slate border */
    border-radius: 6px !important;       /* Rounded corners to match buttons */
    padding: 10px 15px !important;
    font-size: 14px !important;
}

/* Style the placeholder text (the "Search..." whisper) */
.woof_text_search_container input[type="search"]::placeholder {
    color: #E0E0E0 !important;           /* Off-white for readability */
    opacity: 0.6;
}

/* Focus state: when you click into the box */
.woof_text_search_container input[type="search"]:focus {
    border-color: #FFC107 !important;    /* Highlight border in Gold */
    outline: none !important;
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
}

/* Style the "X" clear button inside the search box (if visible) */
.woof_text_search_container .woof_text_search_go {
    background-color: #FFC107 !important;
    color: #000000 !important;
    border-radius: 0 6px 6px 0;
}


/* Hide Department Filter on specific Category Pages */
.page-id-28700 .woof_container_product_cat, /* Wood & Acrylic */
.page-id-28698 .woof_container_product_cat, /* Engraved Gifts */
.page-id-28699 .woof_container_product_cat, /* Leather & Patches */
.page-id-28693 .woof_container_product_cat, /* Metal & Coins */
.page-id-28652 .woof_container_product_cat, /* Glassware */
.page-id-28643 .woof_container_product_cat, /* UV Tumblers */
.page-id-28635 .woof_container_product_cat, /* Sublimation Tumblers */
.page-id-28616 .woof_container_product_cat, /* Engraved Tumblers */
.page-id-19238 .woof_container_product_cat, /* T-Shirts */
.page-id-19260 .woof_container_product_cat, /* Tanktops */
.page-id-25924 .woof_container_product_cat  /* Hoodies */ {
    display: none !important;
}
.page-id-25905 .woof_container_product_cat  /* Sweatshirts */ {
    display: none !important;
}


/* 1. Target the text inside the un-opened dropdown box */
.woof_container_product_cat .chosen-container-multi .chosen-choices li.search-field input {
    color: #FFFFFF !important;
}

/* 2. Style the text of items once you've selected them */
.woof_container_product_cat .chosen-container-multi .chosen-choices li.search-choice span {
    color: #FFC107 !important; /* Keep selected tags white for readability */
}

/* 3. Style the names in the actual list (the Sweatshirt, T-Shirt, etc.) */
.woof_container_product_cat .chosen-container .chosen-results li {
    color: #FFC107 !important; /* Honey Gold for the list items */
    background-color: #1a1a1b !important;
}

/* 4. Style the "Hover/Highlight" state when browsing the list */
.woof_container_product_cat .chosen-container .chosen-results li.highlighted {
    background-color: #FFC107 !important;
    color: #000000 !important; /* Black text when highlighted for contrast */
}

/* 5. Fix the background of the search input and container */
.woof_container_product_cat .chosen-choices, 
.woof_container_product_cat .chosen-drop {
    background-color: #1a1a1b !important;
    border: px solid #37474F !important;
		border-radius: 6px !important;
}
/* 2. Cap the Theme List & Add Scrollbar */
.woof_container_product_tag .woof_block_html_items {
    max-height: 600px !important; /* Adjust height as needed */
    overflow-y: auto !important;
    padding-right: 10px !important;
		padding-bottom; 10px !important;
    border: 1px solid #242425;
    background: #161617;
    border-radius: 4px;
}
/* Custom Scrollbar for a "Tech" feel */
.woof_container_product_tag .woof_block_html_items::-webkit-scrollbar {
    width: 6px;
}
.woof_container_product_tag .woof_block_html_items::-webkit-scrollbar-thumb {
    background: #FFC107;
    border-radius: 10px;
}
/* 3. Force Themes to Single Row (One-per-line) */
.woof_container_product_tag .woof_list_checkbox li {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}
/* Ensure labels don't wrap weirdly */
.woof_checkbox_label {
    display: inline-block !important;
    vertical-align: middle !important;
}
/* Universal Styling for WOOF Filter Titles */
.woof_container_inner h4 {
    color: #FFC107 !important; /* Honey Gold */
    font-size: .8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid #37474F !important; /* Slate Border */
    padding-bottom: 8px !important;
    margin-bottom: 15px !important;
}

/* Style the '+' Toggle and Labels */
.woof_front_toggle {
    color: #FFC107 !important;
}

.woof_checkbox_label, .woof_mselect_label {
    color: #E0E0E0 !important; /* Soft White */
    font-size: 0.9rem !important;
}



 

/* Transform Selects into Workshop Tiles */
.single-product .variations select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
}

/* Hover & Focus state for Tiles */
.single-product .variations select:hover,
.single-product .variations select:focus {
    border-color: #FFC107 !important;
    background-color: #2a2a2b !important;
    outline: none;
}

/* Style for the 'Price' display above the button */
.single-product .woocommerce-variation-price .price {
    color: #FFC107 !important;
    font-size: 1.4rem;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
   }

}
/* 1. Prevent Account Page styling from crushing Product Variations */
.single-product .woocommerce-variation-add-to-cart {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 2. Fix the Table alignment for Size/Color/Location */
.single-product table.variations {
    background-color: transparent !important;
    border: none !important;
}

/* 3. Style the Labels (Size, Color) for the Workshop theme */
.single-product table.variations .label label {
    color: #FFC107 !important; /* Honey Gold */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9rem;
}

/* 4. Style the Select Dropdowns */
.single-product .woocommerce-select select {
    background-color: #242425 !important;
    border: 1px solid #37474F !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 10px !important;
}
/* 1. Style the main Drag & Drop container */
.wapf-field-group .dzone.dz-clickable {
    background-color: #242425 !important; /* Lighter Charcoal */
    border: 2px dashed #37474F !important; /* Slate Dashed Border */
    border-radius: 20px !important;
    padding: 10px !important;
    color: #E0E0E0 !important;
    transition: all 0.3s ease;
}

/* 2. Hover effect for the Dropzone */
.wapf-field-group .dzone.dz-clickable:hover {
    border-color: #FFC107 !important; /* Glow Gold on hover */
    background-color: #2a2a2b !important;
}

/* 3. Style the "browse" text to look like a real button */
.wapf-field-group .dz-message span {
    background-color: #FFC107 !important; /* Honey Gold */
    color: #000000 !important;
    padding: 5px 15px !important;
    border-radius: 30px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    margin-left: 5px;
    display: inline-block;
}
/* 1. Shrink the Giant Search Overlay*/ 
.l-subheader .w-search {
    background-color: rgba(26, 26, 27, 0.95) !important; /* Deep Charcoal with slight transparency */
}

/* 2. Container for the Search Bar */
.w-search-form {
    max-width: 600px !important; /* Limits the width so it's not 'Giant' */
    margin: 0 auto !important;
    background-color: #242425 !important; /* Lighter Charcoal depth */
    border: 2px solid #37474F !important; /* Slate Border */
    border-radius: 50px !important; /* Rounded pill shape for search */
    padding: 10px 30px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* 3. The Search Input Text */
.w-search-form-input input {
    color: #FFFFFF !important;
    font-size: 1.5rem !important;
    background: transparent !important;
    border: none !important;
}

/* 4. The 'Close' and 'Search' Icons */
.w-search-close, .w-search-form-btn {
    color: #FFC107 !important; /* Honey Gold Icons */
    font-size: 1.5rem !important;
}

/* 5. Placeholder text color */
.w-search-form-input input::placeholder {
    color: #808080 !important;
    opacity: 0.7;
}
/* 1. The Main Form Container */
.w-form.for_cform {
    background-color: #1A1A1B !important;
    border: 2px solid #37474F !important;
    padding: 40px !important;
    border-radius: 25px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

/* 2. Target the specific Impreza Input styling */
.w-form-row-field input, 
.w-form-row-field textarea {
    background-color: #242425 !important;
    border: 1px solid #37474F !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

/* 3. Placeholder text color (so they can see what to type) */
.w-form-row-field input::placeholder, 
.w-form-row-field textarea::placeholder {
    color: #808080 !important;
}

/* 4. The Submit Button styling - Forced Path */
.w-form-row.for_submit .w-btn.us-btn-style_1 {
    background-color: #FFC107 !important;
    color: #000000 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 30px !important;
    padding: 15px 40px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

/* Ensure the label inside the button is also black */
.w-form-row.for_submit .w-btn.us-btn-style_1 .w-btn-label {
    color: #000000 !important;
}

.w-form-row.for_submit .w-btn.us-btn-style_1:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5) !important;
}

/* Update your existing legal selector to include the new pages */
.page-id-21329 .l-main, /* Cookie Policy */
.page-id-21349 .l-main, /* DMCA */
.page-id-21350 .l-main, /* CCPA / California Residents */
.page-id-21328 .l-main, /* Privacy Policy */
.page-id-21327 .l-main  /* Terms of Use */ {
    background-color: #1A1A1B !important;
    color: #E0E0E0 !important;
    border: 2px solid #37474F !important;
    border-radius: 25px;
    padding: 40px !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

/* Fix for the CCPA Table to make it readable against dark background */
/* Refine the CCPA Data Table */
.page-id-21350 table {
    border: 1px solid #37474F !important;
    background-color: #242425 !important;
    border-radius: 12px;
    overflow-x: auto; /* Adds a scrollbar on small phones so it doesn't break the bubble */
    display: block;
}

.page-id-21350 th {
    background-color: #37474F !important;
    color: #FFC107 !important;
    font-family: 'Courier New', Courier, monospace; /* Tech feel */
    text-transform: uppercase;
}

.page-id-21350 td {
    border-top: 1px solid #37474F !important;
    color: #FFFFFF !important;
    font-size: 0.95rem;
}

/* 1. Style the Cart Table Headers */
.shop_table.cart thead th {
    color: #FFC107 !important; /* Honey Gold */
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #37474F !important;
}

/* 2. Style Product Names in the Cart */
.shop_table.cart .product-name a {
    color: #FFFFFF !important;
    font-weight: bold;
}

/* 3. The 'Update Cart' Ghost Button */
button[name="update_cart"] {
    background-color: transparent !important;
    color: #FFC107 !important;
    border: 2px solid #37474F !important;
    border-radius: 30px !important;
    transition: all 0.3s ease;
}

button[name="update_cart"]:hover {
    border-color: #FFC107 !important;
    background-color: #37474F !important;
}

/* 4. The Big 'Proceed to Checkout' Button */
.checkout-button {
    background-color: #FFC107 !important;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    border-radius: 40px !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3) !important;
}
/* 1. Style the Lost Password Form Container */
.woocommerce-ResetPassword.lost_reset_password {
    background-color: #1A1A1B !important;
    border: 2px solid #37474F !important;
    padding: 40px !important;
    border-radius: 25px !important;
    max-width: 500px !important;
    margin: 50px auto !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
    color: #E0E0E0 !important;
}

/* 2. Style the Reset Password Button */
.woocommerce-ResetPassword .button {
    background-color: #FFC107 !important; /* Honey Gold */
    color: #000000 !important;
    font-weight: bold !important;
    border-radius: 30px !important;
    padding: 12px 30px !important;
    text-transform: uppercase;
    border: 2px solid #FFC107 !important;
    margin-top: 20px !important;
    width: 100%;
}

/* 3. Style the input field to match the login page */
.woocommerce-ResetPassword input.input-text {
    background-color: #242425 !important;
    border: 1px solid #37474F !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

/* 4. Ensure the instruction text looks professional */
.woocommerce-ResetPassword p:first-of-type {
    line-height: 1.6;
    margin-bottom: 25px !important;
}

/* 2. Make 'Lost your password?' pop in Honey Gold */
.woocommerce-LostPassword.lost_password a {
    color: #FFC107 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.woocommerce-LostPassword.lost_password a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

/* 3. Refine the Remember Me checkbox and label */
.woocommerce-form-login__rememberme {
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center;
}

.woocommerce-form-login__rememberme span {
    color: #FFC107 !important; /* Gold text for the label */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* 4. Center the Login box on the page and add depth */
.u-column1.col-1 {
    background-color: #1A1A1B !important;
    border: 2px solid #37474F !important;
    padding: 40px !important;
    border-radius: 25px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
    max-width: 450px !important;
    margin: 0 auto !important; /* Center it */
    float: none !important; /* Kill the float */
}

.woocommerce-form-login__rememberme {
    display: block !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

.woocommerce-form-login .button {
    margin-top: 10px !important;
}

/* 1. Kill the 'Double Eyeball' - removing the extra icon */
.woocommerce-form-login .show-password-input::before {
    display: none !important;
}

.u-column1.col-1 {
    background-color: #1A1A1B !important; /* Match the dark depth */
    border: 2px solid #37474F !important; /* Slate Border */
    padding: 40px !important;
    border-radius: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* 3. Style the Labels and Links */
.woocommerce-form-login label {
    color: #FFC107 !important; /* Honey Gold Labels */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.woocommerce-LostPassword a {
    color: #37474F !important;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.woocommerce-LostPassword a:hover {
    color: #FFC107 !important;
}

/* 4. Center the box for Desktop */
@media (min-width: 768px) {
    .u-columns.col2-set {
        justify-content: center !important;
        margin-top: 50px;
    }
    .u-column1 {
        max-width: 450px !important;
    }
}

/* 1. Wrap the Login and Register columns in Slate Bubbles */
.u-columns.col2-set {
    display: flex !important;
    gap: 30px;
    flex-wrap: wrap;
}

.u-column1, .u-column2 {
    background-color: #242425 !important; /* Lighter charcoal depth */
    border: 2px solid #37474F !important; /* Slate border */
    border-radius: 25px !important;
    padding: 30px !important;
    flex: 1;
    min-width: 300px;
}

/* 2. Style the Login/Register Headings */
.u-column1 h2, .u-column2 h2 {
    color: #FFC107 !important; /* Honey Gold */
    text-transform: uppercase;
    font-size: 1.4rem;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #37474F;
    padding-bottom: 10px;
}

/* 3. Style the Login Form Inputs */
.woocommerce-form-login input.input-text, 
.woocommerce-form-register input.input-text {
    background-color: #1A1A1B !important;
    border: 1px solid #37474F !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

/* 4. Style the 'Remember Me' and Labels */
.woocommerce-form-login__rememberme, 
.woocommerce-form-row label {
    color: #E0E0E0 !important;
}

/* 5. The Login/Register Buttons */
.woocommerce-form-login .button, 
.woocommerce-form-register .button {
    background-color: #FFC107 !important;
    color: #000000 !important;
    font-weight: bold !important;
    border-radius: 30px !important;
    width: 100%;
    margin-top: 15px;
}
/*account page changes*/
/* Style the Password Change section labels */
.woocommerce-EditAccountForm fieldset legend {
    color: #FFC107 !important; /* Honey Gold */
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 10px;
    font-size: 0.9rem;
}

/* Add breathing room between the name fields and password section */
.woocommerce-EditAccountForm p.form-row {
    margin-bottom: 20px !important;
}

/* Fix the 'Display Name' help text color */
.woocommerce-EditAccountForm span em {
    color: #B0B0B0 !important;
    font-style: italic;
    font-size: 0.85rem;
}
/* 1. Position the container for the eye icon */
.woocommerce-form-row {
    position: relative !important;
}

/* 2. Style the Eye Icon Button */
.show-password-input {
    position: absolute !important;
    right: 10px !important;
    top: 75% !important;
    transform: translateY(-50%) !important;
		background: none;
    z-index: 10 !important;
    cursor: pointer !important;
    color: #FFC107 !important; /* Honey Gold */
    font-size: 1.2rem !important;
    width: auto !important;
    height: auto !important;
}

/* 3. Swap the broken dash for a Unicode Eyeball */
.show-password-input::before {
    content: "\1F441" !important; /* Unicode Eye Icon */
    font-family: sans-serif !important;
}

/* 4. Ensure the input field doesn't overlap the eye */
.woocommerce-MyAccount-content input[type="password"] {
    padding-right: 45px !important;
}
* Style the Address Edit forms and Account Details forms */
.woocommerce-EditAccountForm fieldset,
.woocommerce-address-fields fieldset {
    border: 1px solid #37474F !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin-top: 20px !important;
}

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    background-color: #3C3C3D !important;
    border: 2px solid #37474F !important;
    border-radius: 15px !important;
    color: #FFFFFF !important;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
}
/* Style all action buttons in the Account section (Orders, Downloads, Payments) */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button {
    background-color: #FFC107 !important; /* Honey Gold */
    color: #000000 !important;
    border-radius: 30px !important;
    padding: 12px 25px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    border: 2px solid #FFC107 !important;
    transition: all 0.3s ease;
}
.woocommerce-MyAccount-content .button:hover {
    background-color: transparent !important;
    color: #FFC107 !important;
}
/* 3. Fix Dashboard text background artifacts */
.woocommerce-MyAccount-content p, 
.woocommerce-MyAccount-content div {
    background-color: transparent !important;
    background: none !important;
}

/* 4. Highlight the 'Welcome' text and greeting */
.woocommerce-MyAccount-content p:first-of-type {
    font-size: 1.2rem;
    color: #FFFFFF;
    margin-bottom: 20px !important;
}
/*editing account page*/
.woocommerce-MyAccount-navigation ul li {
    background-color: #37474F !important; /* Slate */
    margin-bottom: 8px !important;
    border-radius: 15px !important;
    transition: all 0.3s ease;
    border: 2px solid #37474F !important;
}

.woocommerce-MyAccount-navigation ul li a {
    color: #FFFFFF !important;
    padding: 2px 10px !important;
    display: block !important;
    font-weight: bold;
    text-decoration: none !important;
}
.woocommerce-MyAccount-navigation ul li:hover,
.woocommerce-MyAccount-navigation ul li.is-active {
    background-color: #242425 !important;
    border-color: #FFC107 !important; /* Honey Gold Border */
}

woocommerce-MyAccount-navigation ul li:hover a,
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: #FFC107 !important;
}
/* 2. Style the Dashboard Content Bubble */
.woocommerce-MyAccount-content {
    background-color: #242425 !important;
    border: 2px solid #37474F !important;
    border-radius: 25px !important;
    padding: 30px !important;
    color: #E0E0E0 !important;
}
/* 3. Highlight the "Log Out" and "Recent Orders" links in Honey Gold */
.woocommerce-MyAccount-content a {
    color: #FFC107 !important;
    font-weight: bold;
    text-decoration: underline !important;
}
/* 4. Table Styling (Orders & Downloads) */
.woocommerce-orders-table, .woocommerce-MyAccount-downloads {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}
woocommerce-orders-table__row {
    background-color: #1A1A1B !important;
}
.woocommerce-orders-table__cell {
    border-top: 1px solid #37474F !important;
    border-bottom: 1px solid #37474F !important;
    padding: 15px !important;
}



/* Style the Address Validation Suggestion Button */
.woocommerce-info button.button, 
.wc-address-verification-button,
.use-suggested-address {
    background-color: #FFC107 !important; /* Honey Gold */
    color: #000000 !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    border: 2px solid #FFC107 !important;
    margin-left: 15px !important;
    transition: all 0.3s ease;
}

.woocommerce-info button.button:hover {
    background-color: transparent !important;
    color: #FFC107 !important;
}

/* Ensure the notification text itself is readable */
.woocommerce-info {
    border-top-color: #FFC107 !important;
    background-color: #242425 !important;
    color: #E0E0E0 !important;
    border-radius: 15px !important;
}

/* Style the actual dropdown list container */
.select2-dropdown {
    background-color: #242425 !important; /* Lighter charcoal depth */
    border: 2px solid #37474F !important; /* Slate border */
    border-radius: 15px !important;
    color: #FFFFFF !important;
    z-index: 9999;
}

/* Style the individual items in the list */
.select2-results__option {
    padding: 10px 15px !important;
    color: #E0E0E0 !important;
}

/* Style the "Hover" or "Highlighted" state in the list */
.select2-results__option--highlighted[aria-selected], 
.select2-results__option[aria-selected="true"] {
    background-color: #37474F !important; /* Slate background */
    color: #FFC107 !important; /* Honey Gold text */
}

/* Style the search box inside the dropdown (if active) */
.select2-search--dropdown .select2-search__field {
    background-color: #1A1A1B !important;
    border: 1px solid #37474F !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
}
/* Force Title and Order Review to share the exact same width logic */
.woocommerce-checkout h3, 
.woocommerce-checkout h2, 
#order_review {
    max-width: 100% !important;
    box-sizing: border-box !important; /* This is the secret sauce for mobile alignment */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Adjust mobile specifically if the gap persists */
@media (max-width: 768px) {
    #order_review {
        padding: 15px !important; /* Slightly tighter padding for small screens */
    }
}

/*adjusting state fields*/
#billing_state_field .select2-selection{
	background-color: #3C3C3D !important;
    border: 2px solid #37474F !important;
    border-radius: 15px !important;
    display: flex;
    align-items: center;
		padding-left: 0px;
}
#shipping_state_field .select2-selection{
	background-color: #3C3C3D !important;
    border: 2px solid #37474F !important;
    border-radius: 15px !important;
    display: flex;
    align-items: center;
		padding-left: 0px;
}
/* Match the text color inside the state dropdown */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #FFFFFF !important;
    padding-left: 15px !important;
}

/* Style Checkout Headers */
.woocommerce-checkout h3, 
.woocommerce-checkout h2 {
    background-color: #37474F !important;
    color: #FFFFFF !important;
    padding: 15px 25px !important;
    border-radius: 8px 8px 0 0 !important;
    border: 2px solid #37474F !important;
    margin-bottom: 0 !important;
    font-size: 1.2rem !important;
    text-transform: uppercase;
}

/* Round the Billing & Shipping Form Containers */
.woocommerce-billing-fields, 
.woocommerce-shipping-fields,
#order_review {
    background-color: #242425 !important;
    margin-bottom: px !important;
}

.checkout > #customer_details .woocommerce-billing-fields__field-wrapper{
		border: 2px solid #37474F !important;
    border-radius: 0px 0px 8px 8px !important;
		padding: 10px
}
#customer_details .woocommerce-shipping-fields__field-wrapper {
		border: 2px solid #37474F !important;
    border-radius: 0px 0px 8px 8px !important;
		padding: 10px
}

.woocommerce #order_review{
		border: 2px solid #37474F !important;
    border-radius: 0px 0px 8px 8px !important;
		padding: 10px
}

/* Fix Input Fields to match our "Depth" look from earlier */
.woocommerce-checkout input[type="text"], 
.woocommerce-checkout input[type="email"], 
.woocommerce-checkout input[type="tel"], 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
    border: 2px solid #37474F !important;
    border-radius: 15px !important;
    background-color: #3C3C3D !important;
    color: #FFFFFF !important;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
}

/* Bubble the Amazon Pay Button */
#amazon-pay-button, .amazon-pay-button {
    border-radius: 25px !important;
    overflow: hidden !important;
}

/* The Final "Place Order" Button */
#place_order {
    background-color: #FFC107 !important;
    color: #000000 !important;
    border-radius: 40px !important;
    font-weight: bold !important;
    padding: 15px 30px !important;
    border: 2px solid #FFC107 !important;
}
/* 3. Style the Credit Card / Payment Section Text */
#payment .payment_methods li {
    color: #E0E0E0 !important; /* Soft white for readability */
    font-size: 0.95rem;
}

#payment .payment_box {
    background-color: #1A1A1B !important; /* Slightly darker depth for the card input area */
    border-radius: 15px !important;
    color: #E0E0E0 !important;
}

/* Make the Stripe/Card labels and links Honey Gold */
#payment label, 
#payment .about_paypal,
#payment .payment_method_stripe label {
    color: #FFC107 !important;
    font-weight: bold;
}

/* Style the Proceed to Checkout button */
.checkout-button {
    background-color: #FFC107 !important; /* Honey Gold */
    color: #000000 !important;
    border-radius: 40px !important;
    padding: 5px !important;
    font-size: 1.3rem !important;
    border: 2px solid #FFC107 !important;
}

.checkout-button:hover {
    background-color: transparent !important;
    color: #FFC107 !important;
}
/* Style the Cart Totals container */
.cart_totals {
    border: 2px solid #37474F !important;
    border-radius: 25px !important;
    padding: 25px !important;
    background-color: #242425 !important;
    margin-top: 30px !important;
}

/* Make the Totals title Honey Gold */
.cart_totals {
    color: #FFFFFF !important;
    margin-bottom: 2px !important;
}

/* Style the rows inside the totals table */
.cart_totals table.shop_table tr {
    border-bottom: 1px solid #37474F !important;
}

.cart_totals table.shop_table tr:last-child {
    border-bottom: none !important;
}

/* Highlight the final Total price */
.order-total .amount {
    color: #FFC107 !important;
    font-size: 1.2rem;
    font-weight: bold;
}
/* Style the Update Cart button */
button[name="update_cart"] {
    background-color: #37474F !important; /* Slate Background */
    color: #FFFFFF !important;
    border: 2px solid #37474F !important;
    border-radius: 30px !important; /* Maximum Bubble Rounding */
    padding: 10px 25px !important;
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s ease;
}

button[name="update_cart"]:hover:not(:disabled) {
    background-color: #FFC107 !important; /* Honey Gold on hover */
    color: #000000 !important;
    border-color: #FFC107 !important;
}

/* Ensure the disabled state doesn't look clickable */
button[name="update_cart"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/*shoping cart header styling*/
.cart-header-bubble {
    background-color: #37474F !important; /* Your Slate Gray */
    padding: 2px 10px !important;
    border-radius: 8px 8px 0 0 !important;
}

/* 1. Back Button - The Bubble Look */
.alg_back_button_input {
    background-color: #1A1A1B !important; /* Charcoal */
    color: #FFC107 !important;            /* Honey Gold */
    border: 2px solid #37474F !important; /* Slate */
    border-radius: 25px !important;       /* Rounded Bubbles */
    padding: 8px 22px !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    display: inline-block;
}

.alg_back_button_input:hover {
    background-color: #FFC107 !important;
    color: #1A1A1B !important;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}
/* Enhanced Style for Custom Color Text Input */
.wapf-wrapper input[type="text"] {
    border: 2px solid #37474F !important;
    border-radius: 20px !important;
    padding: 12px 18px !important;
    /* Slightly lighter background to distinguish from page background */
    background-color: #3C3C3D !important; 
    color: #FFFFFF !important;
    /* Subtle inner shadow for depth */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease;
}

/* Hover & Focus states for better UX */
.wapf-wrapper input[type="text"]:hover {
    border-color: #4A5A63 !important;
}

.wapf-wrapper input[type="text"]:focus {
    border-color: #FFC107 !important; /* Honey Gold glow on focus */
    background-color: #454546 !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3), inset 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
    outline: none;
}
/*adding padding between product specifications and care instructions*/
.g-cols .w-tabs-sections {
  margin-top: 20px !important;
}

/*contact us button on product page modifications*/
.l-section-h .w-btn-wrapper {
  display: flex;
  justify-content: flex-end;
}
/* grow and glow effect on images on front page */
@media (hover: hover) and (pointer: fine) {
#expand:hover {
	transform: scale(1.2);
	filter: drop-shadow(1px 1px 10px #ffffff);
	}}

/* glow effect on browse all on front page */
@media (hover: hover) and (pointer: fine) {
#drophover:hover {
		filter: drop-shadow(1px 1px 10px #ffffff);
	}}
/* changing canvas background color on pages */
body > .l-canvas {
	background-color: #1A1A1B;}
body {
	background-color: #1A1A1B!important;}
body .l-subheader {
  background-color: rgba(26, 26, 27, 1)!important;
}
body > .l-footer {
  background-color: #1A1A1B;
}
/* Styling the Reusable Block Spec Card */
.spec-card-row {
    /* Drop opacity to 0.2 (20%) for a much subtler look */
    border-top: 2px solid rgba(255, 193, 7, 0.2) !important; 
    background-color: #242425 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    transition: all 0.4s ease-in-out;
}

/* Light up on hover */
.spec-card-row:hover {
    border-top-color: rgba(255, 193, 7, 1) !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Subtle depth when active */
}

/* Make labels slightly dimmer too until hover */
.spec-card-row li strong {
    color: rgba(255, 193, 7, 0.7) !important; 
    transition: color 0.4s ease;
}

.spec-card-row:hover li strong {
    color: rgba(255, 193, 7, 1) !important;
}


/* changing text color to white on product pages */
.woocommerce div.product .entry-summary ul {
  color: #E0E0E0;
}
#shop .woocommerce-product-details__short-description {
  color: #E0E0E0;
}
.woocommerce div.product .entry-summary  {
  color: #E0E0E0;
}
.woocommerce div.product .price {
  color: #E0E0E0;
}
.summary .woocommerce-Price-amount > bdi {
  color: #E0E0E0;
}
.l-section-h .summary > .price > span {
  color: #E0E0E0;
}
.woocommerce div.product .entry-summary a {
  color: rgba(70, 53, 249, 1);
}
.woocommerce div.product .single_add_to_cart_button {
  color: #1A1A1B !important;
	}
FORM {
  color: #E0E0E0;
}

/* Style the Browse Files Button */
.codedropz-upload-handler .cd-upload-btn {
    background-color: #242425 !important; /* Lighter charcoal */
    color: #FFC107 !important;            /* Honey Gold text */
    border: 2px solid #37474F !important; /* Slate border */
    border-radius: 8px !important;
    padding: 1px 10px !important;
}
/* Style the Add to Cart Button */
.single_add_to_cart_button {
    background-color: #FFC107 !important; /* Honey Gold background */
    color: #1A1A1B !important;            /* Dark text for contrast */
    border-radius: 20px !important;       /* Extra rounded like your bubbles */
    font-weight: bold !important;
    text-transform: uppercase;
}

/* Style the Quantity Selector */

/* Container to force alignment */
.quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 45px !important; /* Set the total height once here */
}

/* Unified Style for Input and Buttons */
.quantity input.qty, 
.quantity .plus, 
.quantity .minus {
    height: 100% !important; /* Force them to fill the 45px container */
    margin: 0 !important;
    border: 2px solid #37474F !important;
    background-color: #242425 !important;
    color: #E0E0E0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
}

/* Specific border tweaks to make them "touch" */
.quantity .minus {
    border-radius: 8px 0 0 8px !important;
}

.quantity input.qty {
    border-left: none !important;
    border-right: none !important;
    width: 50px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.quantity .plus {
    border-radius: 0 8px 8px 0 !important;
    color: #FFC107 !important;
}

/* Hover effect for the ends */
.quantity .plus:hover, 
.quantity .minus:hover {
    background-color: #FFC107 !important;
    color: #1A1A1B !important;
    border-color: #FFC107 !important;
}

/* Injecting the Custom Color instruction above the upload box 
.codedropz-upload-wrapper::before {
    content: "🎨 Choosing a Custom Color? Please specify it in the Order Notes during checkout!";
    display: block;
    color: #FFC107;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
}
*/

/* Making links the Honey Gold color */
a, .w-btn-label {
    color: #FFC107 !important;
}
a {
  margin-left: 3px!important;
  margin-right: 3px!important;
}

/* product grid image The Honey Gold Glow on Hover */
.w-grid-item-h .post_image:hover {
    box-shadow: 0 0 10px #FFC107 !important;
    transform: translateY(-5px) !important;
}

/* adjusting size of price range on product page */
.wpb_column .woocommerce-Price-amount {
  font-size: 18px;
} 
/* adding margin between variations and price */
.wpb_column .variations {
  margin-top: 15px!important;
	}
/*adjusting field price element in product page*/
.w-post-elm.product_field.price {
	border-bottom: solid;
	border-width: 1px;
	border-color: #37474F;
	padding-bottom: 10px;
	text-align: center;
	color: #FFFFFF;
}
/*adjusting variations style*/
.variations select {
	border: 2px solid rgba(81, 74, 74, 1) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important; /* Adjusts vertical/horizontal centering */
    height: auto !important;      /* Ensures the box expands for the new padding */
    background-color: #242425;    /* Matches your Humble Bee dark theme */
    color: #ffffff;               /* Ensures text is readable */
    appearance: none;             /* Removes default browser styling for a cleaner look */
}

/* Fix Codedropz File Upload clipping on Mobile */
@media (max-width: 1024px) {
    /* Target the main container to ensure it stays inside the bubble */
    .codedropz-upload-handler, 
    .codedropz-upload-container {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* Stack the icon, text, and button vertically */
    .codedropz-label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Make the Browse button full-width for easier tapping */
    .codedropz-upload-handler .cd-upload-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 5px 0 !important;
    }

    /* Ensure the 'or' separator sits nicely between them */
    .cd-separator {
        display: block !important;
        margin: 5px 0 !important;
    }
}

/* product grid button color */
.w-grid-item-h .button {
  background-color: #242425!important;
	border-color: #37474F!important;
}
/* product grid button label color */
.w-grid-item-h .w-btn-label{
  background-color: #242425!important;
}
/*product grid button hover*/
.w-grid-item-h .button:hover {
	box-shadow: 0 0 10px #FFC107 !important;
}
/*Changing the background and borders of the featured products*/
.w-grid {
  background-color: rgba(36, 36, 37, 1);
  border-radius: 0px 0px 8px 8px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(55, 71, 79, 1);
	padding: 10px;
}
/* Style the list items into a pill-grid */
.woof_list_checkbox li {
    display: inline-block !important;
    margin: 4px !important;
}
/* Ensure sidebar filters don't wrap awkwardly in 1/6 column */
.woof_sid_widget .woof_container_product_tag {
    padding: 0 !important;
    margin-bottom: 20px;
}

/* Style the Label to be the Pill */
.woof_list_checkbox label.woof_checkbox_label {
    background-color: #242425 !important;
    border: 2px solid #37474F !important;
    border-radius: 50px !important;
    padding: 4px 12px !important;
		font-size: 13px !important;
		margin: 2px !important;
		align-content
    cursor: pointer;
    color: #E0E0E0 !important;
		text-align: left;
    transition: all 0.2s ease-in-out;
    display: block !important;
}

/*Hide the square boxes and their helpers */
.icheckbox_flat-aero, 
.iCheck-helper {
    display: none !important;
}
/*The Lighting Up Effect (Targeting the checked state) */
/* This targets the 'checked' class that WOOF/iCheck adds to the parent container */
.woof_list_checkbox li .icheckbox_flat-aero.checked + label,
.woof_list_checkbox li.woof_checkbox_label_selected label {
    background-color: #FFC107 !important;
    border-color: #FFC107 !important;
    color: #1A1A1B !important;
    font-weight: bold;
}
/*Hover Effect for unselected */
.woof_list_checkbox label.woof_checkbox_label:hover {
    border-color: #FFC107 !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

/*Clean up the (0) counts color */
.woof_checkbox_count {
    color: inherit !important;
    font-size: 0.8em;
    margin-left: 5px;
}
/* Center the WOOF Pagination */
.woof_products_top_panel + .products + nav.woocommerce-pagination,
#woof_results_by_ajax .nav-links {
    text-align: center !important;
    display: block !important;
    margin: 40px auto !important;
}

#woof_results_by_ajax .nav-links .page-numbers {
    display: inline-block;
    float: none !important; /* Forces them out of left-align */
}
/* Stylize and Shrink the Sorting Dropdown */
.woocommerce-ordering {
    float: right !important; /* Moves it to the right */
    width: auto !important;  /* Stops the "stretched" look */
    margin-bottom: 20px !important;

}
/*stylizing the dropdown for the grid*/
.woocommerce-ordering select {
    background-color: #242425 !important;
    color: #E0E0E0 !important;
    border: 2px solid #37474F !important;
    border-radius: 5px !important;
    padding: 1px 15px !important;
    cursor: pointer;
    outline: none;
}

/* Make sure the "Showing results" text stays on the left */
.woocommerce-result-count {
    float: left !important;
    margin-top: 10px !important;
    color: #E0E0E0 !important;
}

/* Product page big image, rounding corners */
.woocommerce div.product div.images .wp-post-image {
  border-radius: 20px 20px 20px 20px;
}
/* Ensure the container doesn't clip the glow */
.woocommerce-product-gallery {
    overflow: visible !important;
    transition: filter 0.3s ease;
		filter: drop-shadow(0 0 10px #FFFFFF) !important;
}

/* Apply the glow to the actual image wrapper on hover */
.woocommerce-product-gallery:hover {
    filter: drop-shadow(0 0 10px #FFC107) !important;
}
 

/* Product page big image, border */
.slick-list .wp-post-image {
	border-color: #37474F;
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
}
/* humblebee workshop image adjustments at the bottom of the page */
#page-footer > section:nth-child(2) > div:nth-child(2) > div {
  display: flex;
	justify-content: center;
	top: -10px
}
/* changing size of font on footer links*/
#page-footer > section:nth-child(1) > div:nth-child(2) > div > div > div > div:nth-child(4) > div > p {
  font-size: 13px;
}
/* lowering the footer links*/
#page-footer > section:nth-child(1) > div:nth-child(2) > div > div > div > div:nth-child(3){
	padding-bottom: 8px!important;
}

/* Glow effect when hovering over the social buttons at the bottom of the page */
@media (hover: hover) and (pointer: fine) {
.w-socials-item:hover {
	transform: scale(1.3);
	filter: drop-shadow(1px 1px 10px #ffffff);
 }
}
/* adds grow to the products on the shop page */
@media (hover: hover) and (pointer: fine) {
.woocommerce ul.products li.product a img:hover {
	transform: scale(1.3);
	z-index: 111;
	}
}

/* adds grow for use in the element option in wp bakery. for items like "t-shirts" "tanktops" on the clothing page */
@media (hover: hover) and (pointer: fine) {
#grow:hover {
	transform: scale(1.3);
	z-index: 111;
	}
}

/* modifies the size, style and text of the shop page product "add to cart" or "read more" button */
.woocommerce ul.products li.product a.button {
  font-size: 12px;
  padding-right: 7.4px;
  padding-bottom: 4.4px;
  margin-top: 9px;
  margin-bottom: 0px;
  padding-left: 7.4px;
  align-items: center;
  display: flex;
  padding-top: 3px;
  margin-right: 0px;
  width: auto;
  height: 30px;
	background: #242425;
	border-color: #37474F;
	justify-content: center;
	
}



/*styles the shop filter grid*/
.woocommerce {
  background-color: rgba(36, 36, 37, 1);
  border-radius: 0px 0px 8px 8px;
  border-color: rgba(55, 71, 79, 1);
  border-width: 2px;
  border-style: solid;
	padding: 5px;
}
/* Hide the redundant Filter button once Autosubmit is on */
.button.woof_submit_search_form {
    display: none !important;
}
/* centers h2 text, grid item titles */
 h2 {
  text-align: center;
}


/* changes color on prices for woof grid */
.woocommerce ul.products li.product .price {
  color: #FFFFFF;
}
/* changes color on titles for woof grid */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: #FFC107!important;
}

/* evenly spaces content with the grid items featured products*/

.w-grid-item-h {
  display: inline-block;
  flex-wrap: wrap;
  justify-content: center;
}

/* product grid image adjustments featured products*/
.w-grid-item-h .post_image  {
    background-color: #242425 !important; 
    border: 2px solid #37474F !important; 
    border-radius: 25px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	 box-shadow: 0 0 10px rgba(255, 255, 255, 2)!important;
}

/* product grid Round the featured product images to match the category icons */
.w-grid-item-h img {
    border-radius: 15px !important;
		transform: scale(1.05);
	}
/* changing background color on cart shipping */
.woocommerce .cart-collaterals .cart_totals {
  background-color: rgba(52, 44, 44, 1);
}
td #calc_shipping_city {
  background-color: rgba(254, 254, 254, 1);
}
td #calc_shipping_postcode {
  background-color: rgba(255, 255, 255, 1);
}
#calc_shipping_state_field .select2-selection {
  background-color: rgba(255, 255, 255, 1);
}
#shipping-calculator-form > #calc_shipping_country_field .select2-selection {
  background-color: rgba(255, 255, 255, 1);
}
body .select2-dropdown {
  background-color: rgba(255, 255, 255, 1);
}
.select2-container .select2-results__option {
  color: #1A1A1B;
}
body .select2-search {
  color: #1A1A1B;
}

/* rounding edges on cart shipping */
.woocommerce .cart-collaterals .cart_totals {
  border-radius: 10px 10px 10px 10px;
}

/* rounding edges and putting border on dropdown cart */
.l-subheader .w-cart-dropdown {
  border-width: 2px;
  border-style: solid;
  border-radius: 8px 8px 8px 8px;
	background-color: #1A1A1B !important;
}
.widget_shopping_cart {
    border: none;
}

/* Style the Subtotal Text */
.woocommerce-mini-cart__total {
    border-top: 2px solid #37474F !important;
    padding-top: 15px !important;
    color: #FFC107 !important; /* Honey Gold */
}
/* Bubble Buttons in the Mini-Cart */
.woocommerce-mini-cart__buttons a {
    border-radius: 30px !important;
    padding: 10px 20px !important;
    text-transform: uppercase;
    font-weight: bold;
}
/* Specific styling for the Checkout button to make it pop */
.woocommerce-mini-cart__buttons a.checkout {
    background-color: #FFC107 !important;
    color: #000000 !important;
}
/* Round the Mini-Cart Dropdown Container */
.widget_shopping_cart_content {
    border: 2px solid #37474F !important;
    border-radius: 25px !important;
    padding: 20px !important;
    background-color: #242425 !important; /* Match your dark theme */
    overflow: hidden;
}
/* Style the Cart Item List */
.mini_cart_item {
    border-bottom: 1px solid #37474F !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

/* Adjust spacing for tablets (mid-size screens) */
@media (min-width: 768px) and (max-width: 1023px) {
  .vc_row {
    margin-top: 10px; 
  }
}

/* Adjust spacing for mobile (small screens) */
@media (max-width: 767px) {
  .vc_row {
    margin-top: 75px; 
  }
.l-canvas .l-section .g-cols {
  margin-top: 0;
}
}
/* Centering products in layout grid, for responsiveness in screen size */
.wpb_column .size_1x1{
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
	max-width: 150px;
}
div > #us_grid_1 .size_1x1 > div {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
	max-width: 150px;
}
.g-cols #us_grid_1 > div {
  display: flex;
	flex-wrap: wrap;
}


/* adding spacing above the socials on the footer so the hover over words show */
#page-footer > section:nth-child(1) > div:nth-child(2) > div > div {
  padding-top: 65px !important;
}
/* Change the color of the Etsy logo on the footer */
#page-footer > section:nth-child(1) > div:nth-child(2) > div > div > div > div:nth-child(2) > div > div:nth-child(4) > a > i {
  background-color: rgba(245, 100, 0, 1);
}
/* shopping cart dropdown menu colors */
.woocommerce.widget.widget_shopping_cart .total {
  background-color: rgb(105, 105, 105, 1);
}
.woocommerce.widget.widget_shopping_cart .buttons .button{
  color: #1A1A1B !important;
}
.woocommerce.widget.widget_shopping_cart .buttons{
 background-color: rgb(105, 105, 105, 1);
}
.l-subheader .w-cart-dropdown {
  background-color: rgba(105, 105, 105, 1);
	color: #E0E0E0;
}

/* 2. Error Message Styling */
 .woocommerce-error {
    background-color: #1A1A1B !important; /* Matches theme dark mode */
    border-top: 3px solid #FFC107 !important; /* Honey Gold accent line */
    color: #FFFFFF !important;
    border-radius: 10px;
    padding: 15px 25px !important;
    list-style: none !important;
}