/* FIX: Shop page (Bags) footer not visible */
body.woocommerce-shop,
body.page-template-default.page-id-{
  min-height: auto !important;
  height: auto !important;
  overflow-y: auto !important;
}

/* Release Elementor containers that block footer */
body.woocommerce-shop .elementor-section,
body.woocommerce-shop .elementor-container,
body.woocommerce-shop .elementor-widget-wrap,
body.woocommerce-shop .e-con,
body.woocommerce-shop .e-con-inner{
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Ensure footer is reachable */
body.woocommerce-shop footer,
body.woocommerce-shop .site-footer,
body.woocommerce-shop #colophon{
  position: relative !important;
  display: block !important;
  visibility: visible !important;
}
/* ===============================
   Juteearth – Category Title Styling
   =============================== */

/* DESKTOP & TABLET (default) */
.woocommerce ul.products li.product-category 
.woocommerce-loop-category__title {
    font-size: 25px !important;   /* Desktop size */
    font-weight: 500 !important;
    color: #03AC13 !important;
    text-align: center;
}

/* MOBILE ONLY */
@media (max-width: 767px) {
    .woocommerce ul.products li.product-category 
    .woocommerce-loop-category__title {
        font-size: 29px !important;   /* Mobile size */
        font-weight: 500 !important;
    }
}

/* Remove category product count */
.woocommerce ul.products li.product-category 
.woocommerce-loop-category__title mark.count {
    display: none !important;
}








/* =====================================================
   Juteearth – My Account Page Styling
   Kadence + WooCommerce (Login & Register)
   ===================================================== */

/* ---------- BUTTONS (Login & Register) ---------- */
body.woocommerce-account .woocommerce form .button,
body.woocommerce-account .woocommerce-Button.button {
  background-color: #03AC13 !important;      /* Brand Green */
  color: #ffffff !important;
  border: 2px solid #03AC13 !important;
  border-radius: 12px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 10px 24px rgba(3, 172, 19, 0.25);
}

/* Hover */
body.woocommerce-account .woocommerce form .button:hover,
body.woocommerce-account .woocommerce-Button.button:hover {
  background-color: #028A10 !important;
  border-color: #028A10 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(3, 172, 19, 0.35);
}

/* Active */
body.woocommerce-account .woocommerce form .button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(3, 172, 19, 0.25);
}

/* ---------- INPUT FIELDS ---------- */
body.woocommerce-account .woocommerce form .input-text {
  border: 1.8px solid #03AC13 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px;
  transition: all 0.2s ease-in-out;
}

/* Input focus */
body.woocommerce-account .woocommerce form .input-text:focus {
  outline: none !important;
  border-color: #03AC13 !important;
  box-shadow: 0 0 0 4px rgba(3, 172, 19, 0.18) !important;
}

/* ---------- CHECKBOX & LINKS ---------- */
body.woocommerce-account .woocommerce form .woocommerce-form__label span,
body.woocommerce-account .woocommerce a {
  color: #03AC13;
  font-weight: 500;
}

/* ---------- MOBILE OPTIMIZATION ---------- */
@media (max-width: 768px) {
  body.woocommerce-account .woocommerce form .button,
  body.woocommerce-account .woocommerce-Button.button {
    width: 100% !important;
    padding: 14px !important;
    text-align: center;
  }
}
/* ---------- LOST PASSWORD LINK (FORCE BRAND GREEN) ---------- */
body.woocommerce-account .woocommerce-form-login .lost_password a,
body.woocommerce-account .woocommerce-form-login p.lost_password a {
  color: #000000 !important;
  font-weight: 600;
  text-decoration: none;
}

/* Hover effect */
body.woocommerce-account .woocommerce-form-login .lost_password a:hover,
body.woocommerce-account .woocommerce-form-login p.lost_password a:hover {
  color: #028A10 !important;
  text-decoration: underline;
}


/* =================================================
   FIX: My Account B2B dropdown going behind footer
   Kadence + WooCommerce + Select2
   ================================================= */

/* 1️⃣ Ensure account content stacks above footer */
body.woocommerce-account #primary,
body.woocommerce-account .site-main,
body.woocommerce-account .content-area {
  position: relative;
  z-index: 10;
}

/* 2️⃣ Force Select / Select2 dropdown above everything */
/* =========================================================
   Juteearth – FIX footer overlay + dropdown behind footer
   Kadence + WooCommerce My Account / Register fields
   ========================================================= */

/* 1) Make footer NEVER overlap content */
#colophon,
.site-footer,
.kadence-footer-wrap,
.kadence-footer {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 1 !important;
}

/* 2) Ensure page content always has enough space before footer */
body.woocommerce-account #primary,
body.woocommerce-account .content-area,
body.woocommerce-account .site-main {
  position: relative !important;
  z-index: 5 !important;
  padding-bottom: 260px !important; /* increase if footer is tall */
}

/* 3) Force ALL dropdown menus & select2 above footer */
.select2-container,
.select2-container--open,
.select2-dropdown,
.select2-results,
.select2-results__options {
  z-index: 999999 !important;
}

/* 4) If your “Country/State” or B2B fields are NOT select2 */
body.woocommerce-account select,
body.woocommerce-account .select2-selection,
body.woocommerce-account .select2-container {
  position: relative !important;
  z-index: 999999 !important;
}
/* Dropdown styling */
body.woocommerce-account .select2-container .select2-selection--single {
  border: 1.8px solid #03AC13 !important;
  border-radius: 10px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
}

body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #111827;
  line-height: 46px !important;
}

body.woocommerce-account .select2-container--default .select2-results__option--highlighted {
  background: #03AC13 !important;
  color: #fff !important;
}


/* =========================================================
   FIX: Register fields hidden (clipped) + Select overflow
   Kadence + WooCommerce My Account
   ========================================================= */

/* 1) IMPORTANT: stop clipping/hiding the register form */
body.woocommerce-account .woocommerce .u-column2,
body.woocommerce-account .woocommerce .woocommerce-form-register {
  overflow: visible !important;     /* <-- this brings back missing fields */
  height: auto !important;
  max-height: none !important;
}

/* 2) Make sure all rows are normal flow and full width */
body.woocommerce-account .woocommerce form .form-row {
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Box sizing prevents “out of box” width */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce * {
  box-sizing: border-box !important;
}

/* 4) Select2 / SelectWoo must stay inside container */
body.woocommerce-account .woocommerce form .select2-container,
body.woocommerce-account .woocommerce form .select2-container[style] {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* 5) Visible select styling (inside the box) */
body.woocommerce-account .woocommerce form .select2-selection--single {
  width: 100% !important;
  max-width: 100% !important;
  border: 2px solid #03AC13 !important;
  border-radius: 10px !important;
  height: 46px !important;
  padding: 0 38px 0 14px !important; /* space for arrow */
}

/* 6) Dropdown above footer */
.select2-dropdown,
.select2-container--open {
  z-index: 999999 !important;
}
/* Fix Select2 dropdown overlay on My Account */
body.woocommerce-account .select2-container { width:100% !important; }
body.woocommerce-account .select2-dropdown { z-index: 999999 !important; }



/* ===============================
   MOBILE OFFERS PAGE: ENABLE X-SCROLL + FIX BUTTON WRAP
   Works for B2BKing / Woo MyAccount tables
================================= */

/* 1) Stop theme wrappers from killing horizontal scroll */
html, body{
  overflow-x: visible !important;
}

/* 2) Make the My Account content area allow horizontal scroll when needed */
body.woocommerce-account .woocommerce-MyAccount-content{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* 3) Any table inside My Account (offers) should be scrollable */
body.woocommerce-account .woocommerce-MyAccount-content table{
  min-width: 680px;              /* forces overflow on small screens */
}

/* 4) Create scroll behavior around wide tables without breaking layout */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce,
body.woocommerce-account .woocommerce-MyAccount-content .entry-content,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* 5) If plugin uses wrappers, make them scroll too (safe even if not present) */
.b2bking_offers_container,
.b2bking_offers_table,
.b2bking_myaccount_offers,
.woocommerce-account .offers,
.woocommerce-account .available-offers{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* 6) Buttons row: prevent Add to Cart + PDF from going out of screen */
body.woocommerce-account .woocommerce-MyAccount-content a.button,
body.woocommerce-account .woocommerce-MyAccount-content button,
body.woocommerce-account .woocommerce-MyAccount-content .button{
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 767px){
  /* If buttons are in same row container, allow wrap */
  .woocommerce-account .woocommerce-MyAccount-content .actions,
  .woocommerce-account .woocommerce-MyAccount-content .buttons,
  .woocommerce-account .woocommerce-MyAccount-content .offer-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .actions a,
  .woocommerce-account .woocommerce-MyAccount-content .buttons a,
  .woocommerce-account .woocommerce-MyAccount-content .offer-actions a{
    flex: 1 1 160px;
  }
}

/* ✅ FINAL FIX: Stop "Edit" wrapping on mobile (Checkout Blocks address card) */
@media (max-width: 600px){

  /* Make the card a positioning context */
  .wc-block-components-address-card{
    position: relative !important;
  }

  /* Put actions (Edit) at top-right, always */
  .wc-block-components-address-card__actions{
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    width: auto !important;
    min-width: 44px !important;   /* enough space for tap + no wrap */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Force the word "Edit" to stay one line */
  .wc-block-components-address-card__actions a,
  .wc-block-components-address-card__edit{
    white-space: nowrap !important;
    display: inline-flex !important;
  }

  /* Give the header space so text doesn't collide with Edit */
  .wc-block-components-address-card__header{
    padding-right: 70px !important;
  }
}


/* ✅ FIX: dropdown menu should overlay My Account content (only /my-account/) */
body.woocommerce-account #masthead,
body.woocommerce-account .site-header,
body.woocommerce-account header{
  position: relative !important;
  z-index: 999999 !important;
  overflow: visible !important;
}

/* Make parent LI the anchor for absolute dropdown */
body.woocommerce-account .menu-item-has-children{
  position: relative !important;
}

/* Force dropdown to sit above everything */
body.woocommerce-account .sub-menu,
body.woocommerce-account .nav-menu .sub-menu,
body.woocommerce-account .main-navigation ul ul{
  position: absolute !important;
  z-index: 1000000 !important;
}

/* Ensure My Account content can't overlay the header */
body.woocommerce-account .site,
body.woocommerce-account .content-area,
body.woocommerce-account .entry-content,
body.woocommerce-account .woocommerce{
  position: relative !important;
  z-index: 1 !important;
}



/* =========================================================
   Header only: My Account menu badge/icon
   Class: .je-account-badge (added by PHP)
   ========================================================= */

/* BUTTON */
.elementor-location-header a.je-account-badge{
  font-size: 0 !important; /* hide menu text */
  line-height: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;

  background:#ffff !important;
  text-decoration: none !important;
}

/* hide any inner spans/icons from menu widget */
.elementor-location-header a.je-account-badge *{
  display: none !important;
}

/* DEFAULT (logged out): PROFILE ICON ALWAYS VISIBLE */
.elementor-location-header a.je-account-badge::before{
  content: "" !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;

  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111827'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E") !important;
}

/* LOGGED IN: show INITIAL (always, not hover) */
.elementor-location-header a.je-account-badge[data-initial]:not([data-initial=""])::before{
  content: attr(data-initial) !important;

  width: 42px !important;
  height: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  color: #fff !important;
 background-color: #03AC13 ;
	border-radius : 999%;
	

  background-image: none !important; /* remove svg */
}

/* Optional hover: only background change (badge/icon stays visible) */
.elementor-location-header a.je-account-badge:hover{
  background: #ffff !important;
}

 count-badge{
    top: 100px !important; /* adjust if needed */
  }
}