/* =======================================================================
   Fonts: Import Cantora One for sitewide use where specified
   ======================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cantora+One&display=swap');


/* =======================================================================
   WooCommerce Product Widgets (Elementor + Core): Force Cantora One
   Targets: product grids, widgets, and common product text
   ======================================================================= */
.elementor .elementor-widget-woocommerce-products,
.elementor .elementor-widget-wc-archive-products,
.elementor .elementor-widget-wc-products,
.widget_products,
.widget_recent_products,
.widget_top_rated_products,
.widget_recently_viewed_products {
  font-family: 'Cantora One', sans-serif;
}


/* =======================================================================
   Checkout Layout: Two-column grid + fixed payment column width
   Breakpoints: ≥1400px wider payment column; ≤900px stacks to 1 column
   Parent wrapper must use .custom-checkout on the Checkout page
   ======================================================================= */
.custom-checkout .co-grid{
  display: grid; gap: 24px;
  grid-template-columns: 1fr 560px;
}
@media (min-width:1400px){
  .custom-checkout .co-grid{ grid-template-columns: 1fr 640px; }
}
@media (max-width:900px){
  .custom-checkout .co-grid{ grid-template-columns: 1fr; }
}


/* =======================================================================
   Checkout Payment Inputs: Make fields full width inside methods box
   Also ensure the payment/review wrappers themselves expand to 100%
   ======================================================================= */
.custom-checkout #payment .payment_box .form-row,
.custom-checkout #payment .payment_box input.input-text,
.custom-checkout #payment .payment_box select{
  width:100%; max-width:100%;
}
.custom-checkout #payment,
.custom-checkout #order_review,
.custom-checkout #payment .payment_methods{ width:100%; }


/* =======================================================================
   Order Review (Checkout): Hide product line items and table header
   Leaves only the totals section visible; adds subtle top border
   ======================================================================= */

/* Hide all product rows */
.woocommerce-checkout-review-order-table tbody tr.cart_item {
  display: none !important;
}

/* Hide the Product / Subtotal title row */
.woocommerce-checkout-review-order-table thead {
  display: none !important;
}

/* Optional: tidy up totals section */
.woocommerce-checkout-review-order-table tfoot {
  border-top: 2px solid #eee;
  margin-top: 10px;
}


/* =======================================================================
   Hebrew Pages: Keep layout LTR while preserving container directions
   Only flip text direction to LTR for content elements, not layout
   ======================================================================= */

/* Page-level: keep layout as-is, only make text read LTR */
html[lang^="he"] body { direction: ltr; }

/* Only affect text/content—not layout containers */
html[lang^="he"] .elementor-widget-text-editor,
html[lang^="he"] .elementor-heading-title,
html[lang^="he"] p,
html[lang^="he"] li,
html[lang^="he"] h1,
html[lang^="he"] h2,
html[lang^="he"] h3,
html[lang^="he"] h4,
html[lang^="he"] h5,
html[lang^="he"] h6,
html[lang^="he"] input,
html[lang^="he"] textarea {
  direction: ltr;
  unicode-bidi: plaintext;   /* keeps numbers/punctuation sane */
  text-align: inherit;       /* do NOT force alignment */
}


/* =======================================================================
   Product Cards (Shop Loop): Quantity UI alignment + native arrows
   Ensures consistent vertical rhythm and centers qty input
   ======================================================================= */

/* Keep arrows visible, center quantity box */
.loop-qty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Ensure all product cards align uniformly */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Style and center active qty box */
.loop-qty-wrap .qty {
  width: 72px;
  text-align: center;
  -moz-appearance: textfield;
}

/* Keep up/down arrows visible */
.loop-qty-wrap .qty::-webkit-inner-spin-button,
.loop-qty-wrap .qty::-webkit-outer-spin-button {
  opacity: 1;
  -webkit-appearance: inner-spin-button;
}

/* Greyed out (disabled) qty state (e.g., OOS) */
.qty-disabled {
  opacity: 0.5;
  background-color: #f2f2f2;
  cursor: not-allowed;
}


/* =======================================================================
   Product Cards (Shop Loop): Equalize spacing under price area
   Normalizes the space for (qty + button) or “Read more”
   ======================================================================= */

/* 1. Reset margin below the price */
.woocommerce ul.products li.product .price {
  margin-bottom: 0;
}

/* 2. Normalize the wrapper height under the price (qty + button or read more) */
.woocommerce ul.products li.product .loop-qty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100px; /* fixed total height for uniform layout */
}


/* =======================================================================
   Product Cards (OOS): Uniform spacing and height for OOS block
   Keeps equal gap between disabled qty and “Read more” button
   ======================================================================= */
.woocommerce ul.products li.product .outofstock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;              /* consistent space between qty and button */
  height: 100px;         /* same height baseline */
}

/* Ensure the qty itself doesn't collapse margins */
.woocommerce ul.products li.product .outofstock-wrap .qty-disabled {
  margin: 0;
}


/* =======================================================================
   Product Typography Overrides: Force Cantora One within product cards
   Ensures titles, prices, and buttons use the brand font
   ======================================================================= */
.elementor .elementor-widget-woocommerce-products .woocommerce ul.products li.product .woocommerce-loop-product__title,
.elementor .elementor-widget-woocommerce-products .woocommerce ul.products li.product .price,
.elementor .elementor-widget-woocommerce-products .woocommerce ul.products li.product .button,
.widget_products .product_list_widget li,
.widget_products .product_list_widget li a,
.widget_products .product_list_widget li .quantity,
.widget_recent_products .product_list_widget li,
.widget_top_rated_products .product_list_widget li,
.widget_recently_viewed_products .product_list_widget li,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
  font-family: 'Cantora One', sans-serif;
}


/* =======================================================================
   Cart (Empty State): Theme color for “Back to Store” + sizing/layout
   Makes button full width of blue box and increases message font size
   ======================================================================= */

/* Text color for empty cart button */
.elementor-widget-woocommerce-cart .woocommerce .return-to-shop .button.wc-backward,
body.woocommerce-cart .woocommerce .return-to-shop .button.wc-backward {
  color: #86AC38 !important;
}

/* Make Back to Store button as wide as blue notice box */
.elementor-widget-woocommerce-cart .woocommerce .return-to-shop .button.wc-backward,
body.woocommerce-cart .woocommerce .return-to-shop .button.wc-backward {
  display: block !important;
  width: 100% !important;
  max-width: 340px; /* match width of blue notice box */
  margin: 0 auto 32px auto !important;
  text-align: center;
}

/* Add spacer after wrapper to prevent margin collapse */
body.woocommerce-cart .woocommerce p.return-to-shop::after,
.elementor-widget-woocommerce-cart .woocommerce p.return-to-shop::after {
  content: "";
  display: block;
  height: 20px; /* adjust if you want more/less space */
}

/* Increase text size for both message and Back to Store button */
body.woocommerce-cart .woocommerce .cart-empty,
body.woocommerce-cart .woocommerce .cart-empty strong,
body.woocommerce-cart .woocommerce .return-to-shop .button.wc-backward,
.elementor-widget-woocommerce-cart .woocommerce .cart-empty,
.elementor-widget-woocommerce-cart .woocommerce .cart-empty strong,
.elementor-widget-woocommerce-cart .woocommerce .return-to-shop .button.wc-backward {
  font-size: 20px !important;
  font-family: 'Cantora One', sans-serif !important;
}


/* =======================================================================
   Order Received (Thank You): Fixes, spacing, and typography cleanup
   Clears floats, adds padding, forces Cantora One, and neutralizes italics
   ======================================================================= */

/* Clear any lingering floats cutting off white box */
.woocommerce-order-received .woocommerce-order::after,
.woocommerce-order-received .woocommerce-columns--addresses::after,
.woocommerce-order-received .addresses::after {
  content: "";
  display: block;
  clear: both;
}

/* A little breathing room at the bottom */
.woocommerce-order-received .woocommerce-order {
  padding-bottom: 24px;
}

/* Cantora One on Order Received page — no italics, no !important */
.woocommerce-order-received,
.woocommerce-order-received .woocommerce-order,
.woocommerce-order-received .woocommerce-order * {
  font-family: 'Cantora One', sans-serif;
  font-style: normal;
}

/* Neutralize any italic tags inside */
.woocommerce-order-received em,
.woocommerce-order-received i {
  font-style: normal;
}

/* Stack + stretch Shipping and Billing sections full width */
.woocommerce-order-received .woocommerce-columns--addresses {
  display: block;        /* stop any row layout */
  width: 100%;
}

.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
  float: none;           /* kill Woo floats */
  width: 100%;
  max-width: 100%;
  margin: 0 0 30px 0;    /* space between sections */
  padding: 0;
}

.woocommerce-order-received .woocommerce-column__title {
  margin-bottom: 10px;
}

.woocommerce-order-received .woocommerce-column address {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #f8f8f8;
  padding: 20px;
  border-radius: 6px;
  line-height: 1.6;
}

/* Enlarge the thank-you message */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 25px;
}


/* =======================================================================
   Order Pay Page: Hide Cancel button and enforce Cantora One
   ======================================================================= */
.woocommerce-order-pay .button.cancel {
  display: none !important;
}

/* Force Cantora One across Order Pay */
.woocommerce-order-pay,
.woocommerce-order-pay * {
  font-family: 'Cantora One', sans-serif !important;
}


/* =======================================================================
   Hebrew Nav Menu (Mobile/Tablet): Open below header, no full-page overlay
   Also prevents Elementor toggle from being pinned (fixes “X at top” issue)
   JS must set --tpj-menu-top for proper offset
   ======================================================================= */
@media (max-width: 1024px){
  html[lang^="he"][dir="rtl"] .elementor-widget-nav-menu
  .elementor-nav-menu__container[aria-hidden="false"]{
    position: fixed !important;
    top: var(--tpj-menu-top, 0px) !important;   /* set by JS */
    left: 0; right: 0;
    height: auto !important;                    /* prevents full-page white */
    bottom: auto !important;
    max-height: calc(100dvh - var(--tpj-menu-top, 0px)) !important;
    overflow-y: auto !important;
    background: #fff;
    z-index: 99999;
    transform: none !important;
    transition: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    margin: 0; padding: 0;
  }

  /* Keep list tidy */
  html[lang^="he"][dir="rtl"] .elementor-widget-nav-menu .elementor-nav-menu{
    text-align: right; margin: 0;
  }

  /* DO NOT pin the toggle; let Elementor place it (fixes the X-at-top issue) */
  html[lang^="he"][dir="rtl"] .elementor-menu-toggle[aria-expanded="true"]{
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
  }
}


/* =======================================================================
   Hebrew Nav Menu Typography: Use Secular One for Hebrew navigation
   ======================================================================= */
html[lang^="he"] .elementor-nav-menu,
html[lang^="he"] .elementor-nav-menu a,
html[lang^="he"] .elementor-nav-menu__container {
  font-family: 'Secular One', sans-serif !important;
}


/* =======================================================================
   WooCommerce Mobile Labels (RTL): Fix colon placement/reading order
   Shows label + LRM + colon for correct rendering on small screens
   ======================================================================= */
@media (max-width: 782px) {
  html[lang^="he"] .woocommerce table.shop_table_responsive tr td::before,
  html[lang^="he"] .woocommerce-page table.shop_table_responsive tr td::before {
    content: attr(data-title) "\200E:"; /* label + LRM + colon */
    direction: rtl;
    unicode-bidi: plaintext;
    float: right;           /* default RTL alignment */
    text-align: right;
  }
}


/* =======================================================================
   Hebrew Cart Remove Button: Single centered × in a grey circle
   NOTE: A later rule shrinks the circle to 14px (intentional override)
   ======================================================================= */

/* Base style: 32px circular remove button with centered × */
html[lang^="he"] .woocommerce .product-remove a.remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  background:#777;
  position:relative;
  color:transparent !important;   /* hide any text glyph */
  font-size:0 !important; line-height:0 !important;
  overflow:hidden;
}

/* Remove any theme/RTL extra icons */
html[lang^="he"] .woocommerce .product-remove a.remove::before,
html[lang^="he"] .woocommerce .product-remove a.remove i,
html[lang^="he"] .woocommerce .product-remove a.remove span{
  content:none !important;
  display:none !important;
}

/* Draw our own centered × */
html[lang^="he"] .woocommerce .product-remove a.remove::after {
  content:"\00D7";
  position:absolute;
  top:45%;
  left:77%; /* move X slightly to the right (default 50%) */
  transform:translate(-50%, -50%);
  font-size:22px;
  font-weight:700;
  color:#fff;
  line-height:1;
}

/* Override: shrink circle to 14px (final size) */
html[lang^="he"] .woocommerce .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;   /* final circle size */
  height: 14px;  /* final circle size */
  border-radius: 50%;
  background: #777;
  position: relative;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
}


/* =======================================================================
   Mini Cart: Inline quantity input with native spin buttons
   ======================================================================= */
.tpj-mini-qty {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
}

.tpj-mini-qty .tpj-qty-input {
  width: 60px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px;
  font-size: 16px;
  -moz-appearance: textfield;
}

/* Show browser-native arrows */
.tpj-mini-qty .tpj-qty-input::-webkit-inner-spin-button,
.tpj-mini-qty .tpj-qty-input::-webkit-outer-spin-button {
  opacity: 1;
}


/* =======================================================================
   Mini Cart Footer: Button sizing and alignment
   Keeps “Update Cart” on one line and centers the button row
   ======================================================================= */
.elementor-menu-cart__footer-buttons .tpj-mini-update {
  white-space: nowrap !important;
  text-align: center !important;
  width: auto !important;
  min-width: 160px; /* match other buttons visually */
}

.tpj-update-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.tpj-mini-update { text-align: center; }


/* =======================================================================
   Mini Cart Footer (Legacy Style): Black background + white text
   NOTE: A later block sets green text (#7BBF44) instead; that is final
   ======================================================================= */
.elementor-menu-cart__footer-buttons a.button,
.elementor-menu-cart__footer-buttons a.elementor-button,
.elementor-menu-cart__footer-buttons .tpj-mini-update {
  background-color: #000 !important;
  color: #fff !important;
  border: none !important;
}

.elementor-menu-cart__footer-buttons a.button:hover,
.elementor-menu-cart__footer-buttons a.elementor-button:hover,
.elementor-menu-cart__footer-buttons .tpj-mini-update:hover {
  background-color: #222 !important;
  color: #fff !important;
}


/* =======================================================================
   Mini Cart Footer (Final Style): Black background + green text
   Also forces Cantora One and disables automatic uppercase
   ======================================================================= */
.elementor-menu-cart__footer-buttons a.button,
.elementor-menu-cart__footer-buttons a.elementor-button,
.elementor-menu-cart__footer-buttons .tpj-mini-update {
  background-color: #000 !important;
  color: #7BBF44 !important;
  border: none !important;
  font-family: 'Cantora One', sans-serif !important;
  text-transform: none !important;
}

/* Hover state (final) */
.elementor-menu-cart__footer-buttons a.button:hover,
.elementor-menu-cart__footer-buttons a.elementor-button:hover,
.elementor-menu-cart__footer-buttons .tpj-mini-update:hover {
  background-color: #111 !important;
  color: #7BBF44 !important;
}

/* Grey background until a quantity has been edited */
.elementor-menu-cart__footer-buttons .tpj-mini-update.is-idle {
  background-color: #8F9091 !important; /* grey */
  color: #7BBF44 !important;            /* keep your green text */
}
.elementor-menu-cart__footer-buttons .tpj-mini-update.is-idle:hover {
  background-color: #444 !important; /* subdued hover while idle */
}