/*
Theme Name: Storefront Rubies
Theme URI: http://rubies.com.au
Description: Child Rubies Theme for Storefront
Author: Daniel Lindsay
Author URI: http://rubies.com.au/
Template: storefront
Version: 1.0.0
*/

body, button, input, textarea {
    color: #43454b;
    font-family: "Outfit",Helvetica,Arial,"Lucida Grande",sans-serif;
    line-height: 1.618;
    text-rendering: optimizeLegibility;
    font-weight: 400;
}

body .site-content,
body .woocommerce-breadcrumb,
body .site-header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

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

#page {
    width: 100%;
    flex-grow: 1;
}

#colophon {
    flex-shrink: 0;
    margin-top: auto;
}


.single-product .content-area {
    width: 100%;
    float: none;
}

.single-product .site-main {
    margin: 0;
}

.single-product .sidebar {
    display: none;
}



.woocommerce-breadcrumb {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.woocommerce-breadcrumb .col-full {
    max-width: 100%;
    padding: 0;
}

.storefront-breadcrumb .col-full {
    max-width: 100%;
    padding: 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; 
    align-items: flex-start; /* Aligns all child elements to the start of the container. */
}

.site-logo,
.site-search,
.site-login {
    flex: 1 0 20%; /* flex-grow, flex-shrink, flex-basis */
    text-align: center;
}

.site-cart {
    flex: 1 0 30%;
    min-width: 300px; /* Or whatever minimum width you prefer */
    text-align: center;
    position: relative; /* Ensure relative positioning for absolute positioned children */
}

.site-cart:hover .widget_shopping_cart_content {
    display: block; /* Show the dropdown cart on hover */
    width: 100%; /* Take the full width of the parent */
    max-width: 500px; /* Or whatever maximum width you prefer */
}

.widget_shopping_cart_content {
    display: none; /* Hide by default */
    position: absolute; /* Positioning relative to the parent */
    top: 100%; /* Position it right under the parent */
    left: 0; /* Align it to the left of the parent */
    width: auto; /* Allow it to take the space it needs */
    max-width: 500px; /* Prevent it from becoming too wide */
}


.cart-button,
.login-link,
.site-login {
    width: auto; 
    height: auto;
    display: inline-block; 
    padding: 10px; 
}



.cart-button {
    display: flex;
    align-items: stretch; /* This will make the children the same height */
    gap: 10px; /* Add some space between the links */
}


.cart-contents .fa-shopping-bag {
    margin: 0 10px; /* Add some space around the bag icon */
}

.cart-contents .cart-total, .cart-contents .cart-count, .cart-contents .empty-cart {
    display: inline-block;
}



.my-account-link  {
    display: inline-block;
}

.my-account-link,
.login-link {
    margin-right: 10px; /* Add some space to the right of the icon */
    display: inline-block;
}

.cart-contents, .my-account-link {
    display: flex;
    align-items: center;
    border: 1px solid #e1d8d8;
    padding: 10px;
    border-radius: 5px;
}



.search-bar {
    display: flex;
    align-items: center; /* Align items vertically in the middle */
    margin-top:10px;
}

.search-bar button {
    background:#43454b;
    color:#fff;
}

.search-field {
    flex: 1; /* Allow the input to grow and take remaining space */
}

@media screen and (max-width: 767px) {
    .search-bar {
        width: 65%;
    }
    .search-field {
        width: 65%;
    }
}

.logo {
    margin: 20px 0;
}
  
.wp-element-button {
    margin-left: 10px; /* Adjust the margin as needed */
  }

.wp-element-button {
    background-color: red; /* Set the background color to red */
    color: #fff; /* Set the text color to white or any other desired color */
  }
  
/* Adjust the width of the cart button */
.woocommerce-active .site-header .site-header-cart {
    width: 100%; /* Adjust the width as needed */
}


.woocommerce ul.products li.product a img {
    height: 300px;  /* Adjust the height as needed */
    object-fit: contain; /* Scales the image as large as possible without cropping or stretching the image. */
}

/* For screens smaller than 1024px */
@media screen and (max-width: 1023px) {
    .woocommerce ul.products li.product a img {
        height: 200px;
    }
}

/* For screens smaller than 768px */
@media screen and (max-width: 767px) {
    .woocommerce ul.products li.product a img {
        height: 150px;
    }
}


.woocommerce-product-search input[type="search"] {
    width: 600px;
}

/* Ensure mobile-friendly behavior */
@media screen and (max-width: 767px) {
    .search-bar {
        width: 65%;
    }

    .search-bar .woocommerce-product-search {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin:10px;
    }

    .woocommerce-product-search input[type="search"] {
        width: 65%;
    }

    .woocommerce-product-search button {
        width: 28%;
        margin-left: 2%;
    }
}




/* Add more padding to the header container */
.header-container {
    padding: 15px 0;
}
    .site-footer {
        /* Styles for the footer section */
    }
    
    .footer-area-1 {
        /* Styles for Footer Area 1 */
    }
    
    .footer-area-2 {
        /* Styles for Footer Area 2 */
    }
    
    .footer-area-3 {
        /* Styles for Footer Area 3 */
    }
    .footer-area-4 {
        /* Styles for Footer Area 3 */
    }

    .row {
        display: flex;
        flex-wrap: wrap;
      }
      
      .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }

      .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
      
      .footer-area {
        /* Styles for the footer area */
      }


      @media screen and (max-width: 767px) {
        .site-footer,
        .footer-area-1,
        .footer-area-2,
        .footer-area-3,
        .footer-area-4,
        .footer-area {
          width: 100% !important;
        }
      
        .row {
          display: block;
        }
      
        .col-md-4, .col-md-3 {
          flex-basis: 100% !important;
          max-width: 100% !important;
        }
      }
      

      .custom-full-width .inner-content-area {
        width: 100%;
        max-width: none;
        margin: 0;
    }



    .storefront-breadcrumb {
        padding: 0.3em 0;
        margin: 0 0 1.1em;
    }

.category-banner {
    padding: 0.7em 0;
    margin: 0 0 1.5em;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}



    .top-bar {
        background-color: #1a1a1a;
        color: #fff;
        height:40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1em;  /* Padding added here to keep space on the sides */
    }
    
    .top-bar-wrap {
        max-width: 1400px;
        width: 100%;
        display: flex;
        align-items: center;
        margin: 0 auto; /* This will center the .top-bar-wrap */
    }
    
    
    .top-bar-content {
        font-size: 1em;
        line-height: 1.5em;
    }
    
    .top-bar-woocommerce-links {
        list-style-type: none;
        display: flex;
        padding: 0;
        margin: 0;
    }
    
    .top-bar-woocommerce-links li {
        margin-right: 10px;
    }
    
    .top-bar-woocommerce-links li:last-child {
        margin-right: 0;
    }
    
    .top-bar-woocommerce-links li a {
        color: #fff;
        background-color: #000;
        padding: 5px;
        text-decoration: none;
    }
    
    .top-bar-woocommerce-links li a:hover {
        color: #fff;
        background-color: #333;
    }
    

    .site-header .main-navigation {
        width: 100%;
      }
      
      .site-header .main-navigation ul {
        display: flex;
        justify-content: center;
      }
      
      .site-header .main-navigation ul li {
        flex: 1;
      }
      .menu-wrapper {
        background-color: #0b0b0b; /* Adjust the background color as needed */
    }

#mega-menu-primary {
    display: flex;
    justify-content: space-between;
}


.container {
        width: 1400px;
        margin: 0 auto;
        padding: 0 20px; /* Adjust the padding as needed */
    }
          
    .woocommerce ul.products li.product.type-variable a.add_to_cart_button {
        display: none;
    }
    
    .woocommerce ul.products li.product.type-variable .add-to-cart {
        display: block !important;
    }
    

    .variation {
        display: flex;  /* this turns on flexbox model */
        flex-direction: column;  /* this stacks the children vertically */
        justify-content: space-between;  /* this spreads out the children evenly */
        padding: 10px;  /* adjust as needed for your design */
        height: 100%;  /* take up full height of the container */
        width: 100%;  /* take up full width of the container */
    }
    
/* Display the quantity and button as flex items */
div.quantity, a.button.wp-element-button.product_type_simple {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Adjust the width of the quantity input and button */
div.quantity input.input-text.qty.text, a.button.wp-element-button.product_type_simple {
    width: 100%;
}

/* Add padding around the product item */
li.product {
    padding: 10px;
    border: 1px solid #f1f1f1; /* This will prevent the jumping effect */
}


.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: 0em;
}


/* Mobile and Tablet view: Full width */
@media screen and (max-width: 1024px) { /* Adjust 1024px as per your mobile and tablet breakpoint */
    .main-navigation .container {
        width: 100%; /* Full width */
        padding: 0;  /* Remove padding if any */
        margin: 0;   /* Remove margin if any */
        /* Add any other properties to neutralize the .container effect */
    }
}

/* Desktop view: Centered with max-width */
@media screen and (min-width: 1025px) { /* Adjust 1025px as per your desktop breakpoint */
    .main-navigation .container {
        width: 1400px;  /* Or whatever your desktop width should be */
        margin: 0 auto;  /* Center the container */
        /* Add any other desktop specific properties here */
    }
}


#billing_phone_field, #billing_email_field {
    display: none !important;
}



.extra-footer-bar {
    background-color: #0b0b0b; /* change as needed */
    padding: 20px;
    text-align: center;
    color:#fff;
    /* add any other styles as needed */
}

.stock.in-stock {
    color: #089720;
    padding: 5px;
    max-height: 2.5em;
}

.stock.out-of-stock {
    color: red;
    background-color: #ffebee;
    padding: 5px;

}

.stock.preorder {
    color: #fff;
    background-color: #dd3333;
    padding: 5px;
}
a.my-account-link {
    color: #23242a;
}

.woocommerce-MyAccount-navigation {
    width: 17.6470588235% !important;
    float: left !important;
    margin-right: 5.8823529412% !important;
}

.left-sidebar .widget-area {
    width: 17% !important;
    margin-right: 2% !important;
    border: 1px solid #EEEEEE;
    padding: 1%;
}

.left-sidebar .content-area {
    /*  width: 79.9130434783%; /* Removed for Searchanise */
    float: right;
    margin-right: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .left-sidebar .widget-area {
        width: 25% !important;
        margin-right: 2% !important;
        border: 1px solid #EEEEEE;
        padding: 1%;
    }

    .left-sidebar .content-area {
        width: 72.9130434783%; /* Decrease the width to adjust for the wider sidebar */
        float: right;
        margin-right: 0;
    }
}


/* Add a media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
    .left-sidebar .widget-area {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .left-sidebar .content-area {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}




.left-sidebar:not(.page-template-template-fullwidth-php) .woocommerce-MyAccount-content {
    width: 68% !important;
    float: left !important;
    margin-left: 2% !important;
}

@media screen and (max-width: 767px) {
    .woocommerce-MyAccount-navigation {
      width: 100% !important;
      float: none !important;
      margin-right: 0 !important;
    }
  
    .left-sidebar:not(.page-template-template-fullwidth-php) .woocommerce-MyAccount-content {
      width: 100% !important;
      float: none !important;
      margin-left: 0 !important;
    }
  }

  li.product {
    padding: 10px;
    border: 1px solid transparent; /* Transparent border */
}

li.product:hover {
    border: 1px solid #f1f1f1; /* Change border color on hover */
    background-color: #fff;
}

li.product .woocommerce-LoopProduct-link {
    text-decoration: none;
}


  ul.products li.product .button,
ul.products .wc-block-grid__product .button,
.wc-block-grid__products li.product .button,
.wc-block-grid__products .wc-block-grid__product .button {
    background-color: #333333;
    border-color: #333333;
    color: #ffffff;
    width: 100%;
    padding:5px;
}

ul.products li.product .button:hover,
ul.products .wc-block-grid__product .button:hover,
.wc-block-grid__products li.product .button:hover,
.wc-block-grid__products .wc-block-grid__product .button:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
    width: 100%; 
    border-radius:5px;
}
  
  @media (min-width: 1024px) {
    .site-main ul.products.columns-4{
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .site-main ul.products.columns-4 li.product {
        width: 19% !important;
        margin-right: 0.5% !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        border: 1px solid #EEEEEE;
        box-sizing: border-box;
        border-radius: 10px;
    }
    .site-main ul.products.columns-4 li.product .woocommerce-loop-product__link {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    .site-main ul.products.columns-4 li.product .woocommerce-loop-product__link > div {
        flex-grow: 1 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .site-main ul.products.columns-4 {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .site-main ul.products.columns-4 li.product {
        width: 30% !important; /* You might want to adjust this */
        margin-right: 2% !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        border: 1px solid #EEEEEE;
        box-sizing: border-box;
        border-radius: 10px;
    }
    .site-main ul.products.columns-4 li.product .woocommerce-loop-product__link {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    .site-main ul.products.columns-4 li.product .woocommerce-loop-product__link > div {
        flex-grow: 1 !important;
    }
}


@media screen and (max-width: 767px) {
    .site-main ul.products.columns-4 {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch; /* New line: This will make all items stretch to the same height */
    }

    .site-main ul.products.columns-4 li.product {
        width: 47% !important;
        margin-right: 5% !important;
        float: left;
        box-sizing: border-box;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        display: flex; /* New line: Make the product a flex container too */
        flex-direction: column; /* New line: Organize content vertically */
    }

    .site-main ul.products.columns-4 li.product:nth-child(2n) {
        margin-right: 0 !important;
    }
}



.variation .variation-select {
    padding: 5px;
    font-size: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    background: #ffffff;
    appearance: none; /* This can help with styling in some browsers */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    color: #333333;

}


.spnet_duedate {
    /* border: 1px solid; */
    color: #000;
    background: #ffffff;
}

.products .spnet-pre-order::before {
    content: 'Pre-order' !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    font-size:1em !important;
    z-index: 2 !important;
    background: #cc1818 !important;
    color: #fff !important;
    padding: 5px !important;
    border-radius: 5px;
    font-weight: bold !important;
}


.widget-area .widget {
    font-size: .7em;
    font-weight: 400; 
}

span.price {
    font-weight: bold;
    color: #1a1a1a !important;
    font-size: 1.2em;
}

nav.woocommerce-MyAccount-navigation a {
    color: #000;
}

@media screen and (max-width: 767px) {
    .col-full {
        margin-left: 0.5em;  /* Adjust as needed */
        margin-right: 0.5em; /* Adjust as needed */
        padding: 0;
    }
}


.woocommerce-pagination .page-numbers li .page-numbers.current {
    background-color: #636363;
    color: #fff;
}

@media (min-width: 87.5em) {
    .storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide,
    .storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignwide {
        margin-left: calc(25% - 175px); !important
        margin-right: calc(25% - 175px); !important;
    }
}

.apply-discount, .clear-date-button {
    display: inline-block; /* This makes them sit side by side */
    vertical-align: top; /* Aligns them at the top */
    margin-right: 10px; /* Optional: Adds some space between the elements */
}



.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
    margin: 10px 0px;
}
a.register {
    color: #fff;
    text-decoration: underline;
}


.preorder-flag {
    position: absolute;
    top: 10px;
    left: 300px;
    background-color: #9e1bbd;
    color: #ffffff;
    padding: 5px 10px;
    z-index: 10;
    font-weight: bold;
}

/* Full-width site content styling */
body .site-content-full,
body .woocommerce-breadcrumb{
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

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

/* Custom backorder warning style */
.backorder-warning {
    background-color: #f1f1f1; /* White background */
    color: #9e1bbd; /* purple text color */
    padding: 5px;
    display: inline-block;
}

/* Specific styles for mobile devices */
@media (max-width: 600px) {
    table td, table th {
        padding: .3em; /* Reduce padding for mobile */
    }

    table thead th {
        padding: .3em; /* Consistent padding for header cells on mobile */
    }
}

.pass_reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between icon and text */
    color: mediumseagreen;
    font-size: 1em;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.pass_reset:hover {
    background-color: #010101;
}

.pass_reset > .fas {
    color: mediumseagreen;
}

.custom-checkout-message {
    padding: 1em; /* space between text and box edges */
    background-color: #d4edda; /* light green background */
    color: #155724; /* dark green text color */
    border: 1px solid #c3e6cb; /* light green border */
    border-radius: 5px; /* rounded corners */
    font-size: 1em; /* text size */
    margin-bottom: 10px; /* space below the box */
    text-align: center; /* center the text */
}

a.button.rubies-btn {
    background: #1a1a1a;
    color: #fff;
}

@media screen and (max-width: 480px) {
    .top-bar {
        height: 70px;
        font-size:.8em;
        text-align: center;

    }
}

span.apply {
    background: #1a1a1a;
    color: #fff;
    padding: 10px;
}

.contact-message {
    border: 5px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    background: #fffefa;
    position: relative;
}

.contact-message::before {
    font-family: "FontAwesome";
    content: "\f095";  /* Unicode value for the exclamation icon in FontAwesome */
    position: absolute;
    left: 10px;
    font-size: 20px;  /* Adjust size as needed */
    color: black /* Adjust color as needed */
}



.preorder-duedate-container {

    padding: 5px 10px;
}

.due-date {
    color: #000;
    padding: 5px 10px;
    font-weight: bold;
}

.preorder-box {
    background-color: #9e1bbd;
    color: #ffffff;
    padding: 5px 10px;
    font-weight: bold;
}

.stock.in-stock {
    display: none !important;
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
    /* Reset Bootstrap styles */
    flex: none !important;
    max-width: none !important;
    padding: 0 !important;
    width:100% !important;
}