.hero-text-wrapper .rs-heading,

.hero-text-wrapper .rs-small-heading {

  max-width: 800px;

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}







#cart-row {

  background: #f0f0f0;

  padding: 10px 0;

  text-align: center;

  font-weight: 500;

  font-size: 14px;

  border-bottom: 1px solid #ddd;

  z-index: 9999;

  position: relative;

}



.cart-row-link {

  color: #333;

  text-decoration: none;

  transition: color 0.3s;

}



.cart-row-link:hover {

  color: #0073aa;

}











/* Sidebar base */

.shop-sidebar {

  background-color: #f9f9f9;

  padding: 20px;

  border-radius: 6px;

  border: 1px solid #e3e3e3;

  font-family: 'Roboto', sans-serif;

  font-size: 14px;

}



/* Each widget */

.shop-sidebar .widget {

  margin-bottom: 30px;

}



/* Widget title */

.shop-sidebar .widget-title {

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 10px;

  color: #333;

  border-bottom: 1px solid #ddd;

  padding-bottom: 6px;

}



/* Product search input */

.shop-sidebar input[type="text"] {

  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 4px;

}



/* Submit icon/input alignment fix */

.tt-s-search-submit {

  display: flex;

  align-items: center;

  gap: 5px;

  margin-top: 10px;

}



.tt-s-search-submit i {

  font-size: 16px;

  color: #555;

}



/* Product category links */

.shop-sidebar .product-categories li {

  list-style: none;

  margin-bottom: 6px;

}



.shop-sidebar .product-categories li a {

  color: #1e73be;

  text-decoration: none;

  transition: 0.2s ease;

}



.shop-sidebar .product-categories li a:hover {

  text-decoration: underline;

  color: #0056a3;

}



/* Cart widget empty state */

.shop-sidebar .widget_shopping_cart_content {

  font-style: italic;

  color: #777;

}



.widget_product_search i.fa-search {

  display: none !important;

}







.tt-products .tt-shop-product {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 100%;

}



.tt-product {

  flex-grow: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.woocommerce-loop-product__title {

  min-height: 48px;

}



.price {

  min-height: 40px;

}



.tt-single-product img {

  aspect-ratio: 1 / 1;

  object-fit: cover;

  width: 100%;

}





.screen-reader-text {

  display: none !important;

}



.button.wc-forward {

  color: black !important;

}















/* 1. Fix the broken container on WooCommerce shop/archive pages */

body.woocommerce-shop .main-content .container,

body.post-type-archive-product .main-content .container,

body.tax-product_cat .main-content .container,

body.woocommerce-page .main-content .container {

  max-width: 1140px !important;     /* adjust if your theme uses 1200/1280 */

  margin-left: auto !important;

  margin-right: auto !important;    /* kills the margin-right: -108px */

  padding-left: 15px !important;

  padding-right: 15px !important;

  box-sizing: border-box !important;

}



/* 2. Restore proper Bootstrap row gutters so columns sit correctly */

body.woocommerce-shop .main-content .container > .row,

body.post-type-archive-product .main-content .container > .row,

body.tax-product_cat .main-content .container > .row,

body.woocommerce-page .main-content .container > .row {

  margin-left: -15px !important;

  margin-right: -15px !important;

}



/* 3. Make sure WooCommerce product grid doesn’t create overflow */

body.woocommerce-shop ul.products,

body.post-type-archive-product ul.products,

body.tax-product_cat ul.products,

body.woocommerce-page ul.products {

  margin-left: 0;

  margin-right: 0;

  padding-left: 0;

  padding-right: 0;

  box-sizing: border-box;

}

body.woocommerce-shop ul.products li.product,

body.post-type-archive-product ul.products li.product,

body.tax-product_cat ul.products li.product,

body.woocommerce-page ul.products li.product {

  max-width: 100%;

  box-sizing: border-box;

}



/* 4. Clamp big banner images in the right column */

body.woocommerce-shop .main-content .col-md-9 .page-content img,

body.post-type-archive-product .main-content .col-md-9 .page-content img,

body.tax-product_cat .main-content .col-md-9 .page-content img,

body.woocommerce-page .main-content .col-md-9 .page-content img {

  max-width: 100% !important;

  width: 100% !important;

  height: auto;

  display: block;

}



/* 5. Safety net: no horizontal scroll on WooCommerce pages */

body.woocommerce,

body.woocommerce-shop,

body.post-type-archive-product,

body.tax-product_cat,

body.woocommerce-page {

  overflow-x: hidden;

}











/* Classic behavior:

   - Mobile: dots only

   - Desktop: arrows only

*/



/* Mobile */

@media (max-width: 768px) {

  /* show dots */

  #swiper-unique-id-0 .pagination,

  #swiper-unique-id-0 .pagination.visible-xs-block {

    display: block !important;

  }



  /* hide arrows */

  #swiper-unique-id-0 .swiper-arrow-left,

  #swiper-unique-id-0 .swiper-arrow-right,

  #swiper-unique-id-0 .tt-arrow-left,

  #swiper-unique-id-0 .tt-arrow-right {

    display: none !important;

  }

}



/* Desktop */

@media (min-width: 769px) {

  /* hide dots */

  #swiper-unique-id-0 .pagination {

    display: none !important;

  }



  /* show arrows */

  #swiper-unique-id-0 .swiper-arrow-left,

  #swiper-unique-id-0 .swiper-arrow-right,

  #swiper-unique-id-0 .tt-arrow-left,

  #swiper-unique-id-0 .tt-arrow-right {

    display: flex !important;

  }

}



/* ===== BASE HEADER ===== */

.tt-header .header-inner {

    display: flex !important;

    align-items: center;

    flex-wrap: wrap;

    padding-top: 15px;

    padding-bottom: 10px;

    position: relative;

}



.tt-header .logo {

    display: block !important;

    width: auto !important;

    min-width: 80px;

    flex: 0 0 auto !important;

    order: 1;

}



.tt-header .logo img {

    display: block !important;

    width: auto !important;

    max-height: 50px;

    height: auto;

}



/* ===== DESKTOP (1025px+) ===== */

@media (min-width: 1025px) {



    .tt-header .header-inner {

        flex-wrap: nowrap;

        justify-content: space-between;

    }



    .tt-header .main-nav {

        display: flex;

        margin-left: 20px;

        order: 2;

        flex: 1 1 auto;

    }



    .tt-header .nav-more {

        order: 3;

        margin-left: auto;

        flex: 0 0 auto;

    }



    .tt-header .cmn-toggle-switch {

        display: none !important;

    }

}



/* ===== MOBILE/TABLET (max 1024px) ===== */

@media (max-width: 1024px) {



    .tt-header .logo img {

        max-height: 42px;

    }



    /* Logo: top-left */

    .tt-header .logo {

        order: 1;

        flex: 0 0 auto !important;

    }



    /* Hamburger: top-right */

    .tt-header .cmn-toggle-switch {

        order: 2;

        display: block;

        margin-left: auto;

        flex: 0 0 auto;

    }



    /* Button: inline (top row) when menu is CLOSED */

    .tt-header .nav-more {

        order: 2;

        flex: 0 0 auto;

        position: static !important;

        transform: none !important;

        margin-left: auto;

        margin-right: 12px;

        width: auto;

        text-align: center;

    }



    /* Nav: full width row, hidden when closed */

    .tt-header .main-nav {

        order: 3;

        width: 100%;

        flex: 0 0 100%;

    }



    /* Button: full width BELOW nav when menu is OPEN */

    .tt-header:has(.cmn-toggle-switch.active) .nav-more {

        order: 4;

        width: 100%;

        flex: 0 0 100%;

        margin: 10px 0;

        margin-right: 0;

    }



    .tt-header:has(.cmn-toggle-switch.active) .cmn-toggle-switch {

        order: 2;

        margin-left: auto;

    }

}



/* ===== MOBILE ONLY (max 768px) ===== */

@media (max-width: 768px) {



    /* CLOSED: single row, no wrap */

    .tt-header .header-inner {

        flex-wrap: nowrap !important;

        align-items: center;

        justify-content: space-between;

    }



    .tt-header .logo {

        order: 1;

        flex: 0 0 auto !important;

    }



    .tt-header .logo img {

        max-height: 24px;

    }

/* ===== STICKY HEADER (all screens including mobile) ===== */

.tt-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    background-color: #fff; 

    width: 100%;

margin-top: 0;

}



    /* Button centered absolutely */

    .tt-header .nav-more {

        order: 2;

        position: absolute !important;

        left: 50% !important;

        transform: translateX(-50%) !important;

        margin: 0 !important;

        width: auto;

        flex: 0 1 auto;

    }



    .tt-header .nav-more a {

        font-size: 9px;

        padding: 4px 7px;

        white-space: nowrap;

    }



    .tt-header .cmn-toggle-switch {

        order: 3;

        flex: 0 0 auto;

        margin-left: 0;

        transform: scale(0.7);

        transform-origin: right center;

    }



    /* OPEN: allow wrap so nav + button stack below */

    .tt-header:has(.cmn-toggle-switch.active) .header-inner {

        flex-wrap: wrap !important;

    }



    .tt-header:has(.cmn-toggle-switch.active) .nav-more {

        position: static !important;

        left: auto !important;

        transform: none !important;

        order: 4;

        width: 100%;

        flex: 0 0 100%;

        margin: 10px 0 !important;

        text-align: center;

    }

}



/* ==========================================

   1. TABLET & DESKTOP LAYOUT (Screen widths 992px and up)

   - Keeps your sidebar on the left and products on the right.

   - Prevents products from breaking into a single column.

   ========================================== */

@media (min-width: 992px) {

    .main-content .container > .row {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

    }



    /* Keeps sidebar column at 25% width */

    .main-content .col-md-3 {

        width: 25% !important;

        max-width: 25% !important;

        flex: 0 0 25% !important;

        padding-right: 15px !important;

    }



    /* Keeps products column at 75% width */

    .main-content .col-md-9 {

        width: 75% !important;

        max-width: 75% !important;

        flex: 0 0 75% !important;

        padding-left: 15px !important;

    }



    /* Ensures product grid stays 4 columns on desktop */

    .tt-products .row {

        display: flex !important;

        flex-wrap: wrap !important;

    }



    .tt-products .tt-shop-product {

        width: 25% !important;

        max-width: 25% !important;

        flex: 0 0 25% !important;

    }

}



/* ==========================================

   2. MOBILE LAYOUT (Screen widths under 991px)

   - Stacks everything vertically.

   - Places the categories FIRST, then your products below.

   ========================================== */

@media (max-width: 991px) {

    .main-content .container > .row {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

    }



    /* Force the products column to go down */

    .main-content .col-md-9 {

        order: 2 !important; /* Pushes banner, notice, and products down */

        width: 100% !important;

        max-width: 100% !important;

        flex: 0 0 100% !important;

    }



    /* Force the categories/sidebar column to go on TOP of the products */

    .main-content .col-md-3 {

        order: 1 !important; /* Pulls categories to the very top (below header banner) */

        width: 100% !important;

        max-width: 100% !important;

        flex: 0 0 100% !important;

        margin-bottom: 25px !important;

        padding: 0 15px !important;

    }



    /* Style mobile categories as a clean horizontal scrolling list or wraps */

    .shop-sidebar {

        display: flex !important;

        flex-direction: column !important;

        gap: 15px !important;

        background: #fdfdfd !important;

        border: 1px solid #eaeaea !important;

        border-radius: 8px !important;

        padding: 15px !important;

    }



    .shop-sidebar .product-categories {

        display: flex !important;

        flex-wrap: wrap !important;

        gap: 8px !important;

        padding: 0 !important;

        margin: 0 !important;

        list-style: none !important;

    }



    .shop-sidebar .product-categories li a {

        background: #f3f3f3 !important;

        padding: 6px 12px !important;

        border-radius: 20px !important;

        font-size: 13px !important;

        color: #444 !important;

        text-decoration: none !important;

        display: inline-block !important;

    }



    /* Ensure mobile products grid stays 2 columns instead of 1 wide stretched block */

    .tt-products .row {

        display: flex !important;

        flex-wrap: wrap !important;

    }



    .tt-products .tt-shop-product {

        width: 50% !important;

        max-width: 50% !important;

        flex: 0 0 50% !important;

    }



    /* Hide cart widget and default title on mobile to save space */

    .shop-sidebar .widget_shopping_cart,

    .shop-sidebar .widget-title {

        display: none !important;

    }

}