/* ===========================
   Center the popup
   =========================== */

.pum-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 450px !important;
  margin: auto;
  padding: 30px 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.18);
  animation: fadeSlideUp 0.4s ease-out;
}

/* Overlay background */

.pum-overlay {
  background: rgba(0,0,0,0.65) !important;
}

/* ===========================
   Popup animation
   =========================== */

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   Form field styling
   =========================== */

.wpforms-field {
  margin-bottom: 18px;
}

.wpforms-field input,
.wpforms-field textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: #fafafa;
  transition: all 0.3s ease;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus {
  border-color: #00bcd4;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,188,212,0.3);
  outline: none;
}

/* Labels */

.wpforms-field-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: #333;
}

/* ===========================
   Gradient submit button
   =========================== */

.wpforms-submit {
  background: linear-gradient(90deg, #007bff, #00bcd4) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600;
  padding: 12px 25px;
  border: none !important;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpforms-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,123,255,0.4);
}

/* ===========================
   Close button styling
   =========================== */

.pum-container .pum-close {
  background: #ff5b5b !important;
  color: #fff !important;
  font-weight: bold;
  border-radius: 0 8px 0 8px;
  padding: 8px 12px;
  font-size: 12px;
  transition: background 0.3s ease;
}

.pum-container .pum-close:hover {
  background: #e64545 !important;
}

/* Container: keep archive content centered with side gutters */ body.post-type-archive-product .site-main, body.tax-product_cat .site-main, .woocommerce-page .elementor-section { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } /* Sidebar padding (categories / widgets) */ .woocommerce-page #secondary, .woocommerce-page .sidebar, .woocommerce-page aside.widget-area, .elementor-row > .elementor-column:first-child { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; } /* Grid: use CSS Grid for predictable gutters & alignment */ .woocommerce-page ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; /* horizontal + vertical gutter between cards */ align-items: start; } /* Product card look */ .woocommerce-page ul.products li.product { background: #ffffff; padding: 16px; /* space inside the card */ border-radius: 8px; box-shadow: 0 6px 14px rgba(10,20,30,0.06); transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; display: flex; flex-direction: column; height: 100%; } /* Ensure link covers whole card */ .woocommerce-page ul.products li.product a { color: inherit; text-decoration: none; display: block; flex: 1 1 auto; } /* Uniform product image area — crops to keep rows even */ .woocommerce-page ul.products li.product img { width: 100%; height: 220px; /* height you can change to suit your thumbnails */ object-fit: cover; /* crops neatly without stretching */ border-radius: 6px; display: block; margin: 0 0 12px; } /* Product title & layout */ .woocommerce-loop-product__title { font-weight: 700; font-size: 15px; line-height: 1.2; color: #1f2a33; text-align: center; margin: 6px 0; min-height: 3.2em; /* reserves space for 2 lines so cards don't jump */ } /* Price / meta alignment */ .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .woocommerce-loop-product__meta, .woocommerce .star-rating { text-align: center; color: #6b7882; font-size: 13px; margin-top: 6px; } /* Add-to-cart / buttons styling (subtle) */ .woocommerce .add_to_cart_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { border-radius: 6px; padding: 8px 12px; font-weight: 600; box-sizing: border-box; } /* Hover lift */ .woocommerce-page ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(10,20,30,0.09); } /* Result count + ordering spacing (tidy area above grid) */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: 18px; } /* Responsive: 3 columns on medium, 2 on tablet, 1 on small */ @media (max-width: 1100px) { .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); } .woocommerce-page ul.products li.product img { height: 200px; } } @media (max-width: 768px) { .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; } .woocommerce-page ul.products li.product img { height: 180px; } .woocommerce-page .elementor-row > .elementor-column:first-child { padding: 0 16px !important; } body.post-type-archive-product .site-main { padding: 0 16px; } } @media (max-width: 480px) { .woocommerce-page ul.products { grid-template-columns: 1fr; gap: 16px; } .woocommerce-page ul.products li.product img { height: 260px; object-position: center top; } } /* Small nicety: reduce overly-large image whitespace inside thumbnails */ .woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail { display: block; width: 100%; height: auto; } /* If your theme uses large full-bleed sections, prevent it on product archives */ .elementor-section.elementor-section-full_width, .elementor-template-archive .elementor-section.elementor-section-stretched { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } /* ===== Related Products — single product page polish ===== */ /* 1) Constrain & center the related products area */ .single-product .related.products { background: transparent; /* remove or change if you prefer a colored band */ padding: 48px 0; box-sizing: border-box; } .single-product .related.products .products { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); /* 3 across on desktop */ gap: 28px; align-items: start; box-sizing: border-box; } /* 2) Title style */ .single-product .related.products h2 { text-align: center; font-size: 32px; line-height: 1.05; margin: 0 0 30px; font-weight: 800; color: #14283a; /* darker brand-ish color — change to match your palette */ } /* 3) Card look for each related product */ .single-product .related.products ul.products li.product { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 8px 20px rgba(12,20,30,0.06); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; text-align: center; min-height: 360px; /* keeps cards uniform height — adjust if needed */ } /* 4) Image area — keep aspect consistent without cropping important product parts */ .single-product .related.products ul.products li.product img { width: 100%; height: 220px; /* adjust to show more/less image */ object-fit: contain; /* use 'cover' if you prefer cropped, but 'contain' preserves the full product */ background: #ffffff; border-radius: 6px; display: block; margin: 0 auto 14px; } /* 5) Title & spacing */ .single-product .related.products .woocommerce-loop-product__title { font-size: 16px; font-weight: 700; color: #112533; margin: 8px 6px 6px; min-height: 3rem; /* reserve space so cards stay aligned */ } /* 6) Hide small category/meta line under titles ("All Products") to reduce clutter */ .single-product .related.products .woocommerce-loop-product__meta, .single-product .related.products .posted_in, .single-product .related.products .product_meta, .single-product .related.products .woocommerce-loop-product__rating { display: none; } /* 7) Hover lift */ .single-product .related.products ul.products li.product:hover { transform: translateY(-8px); box-shadow: 0 20px 42px rgba(12,20,30,0.10); } /* 8) Make product links fill card */ .single-product .related.products ul.products li.product a { display: block; color: inherit; text-decoration: none; } /* 9) Responsive: 2 columns on tablet, 1 on mobile */ @media (max-width: 1000px) { .single-product .related.products .products { grid-template-columns: repeat(2, 1fr); } .single-product .related.products ul.products li.product { min-height: auto; } .single-product .related.products ul.products li.product img { height: 200px; } } @media (max-width: 520px) { .single-product .related.products .products { grid-template-columns: 1fr; gap: 18px; padding: 0 14px; } .single-product .related.products ul.products li.product img { height: 260px; object-position: center top; } .single-product .related.products h2 { font-size: 26px; margin-bottom: 20px; } }

/* ============================
   Responsive product grid (override)
   5 cols desktop -> 4 -> 3 -> 2 on phones -> 1 on tiny phones
   Includes space below the grid so next section doesn't overlap
   ============================ */

body .woocommerce ul.products,
body .woocommerce-page ul.products,
body .products,
.elementor-widget-woocommerce-products .products,
.ast-container .products,
.main .products,
html body [class*="woocommerce"] [class*="products"] {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* 5 columns default */
  gap: 24px !important;
  margin: 0 0 40px !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}

/* Product tiles behave as grid cells */
body .woocommerce ul.products > li.product,
body .woocommerce-page ul.products > li.product,
body .products > li.product,
.elementor-widget-woocommerce-products .products .product,
.ast-container .products .product {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  clear: none !important;
}

/* Prevent inner elements from forcing full-width */
body .products .product > *,
body .woocommerce ul.products li.product > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Images scale inside grid cells */
body .woocommerce ul.products li.product img,
body .products .product img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Make sure the element right after product grid has breathing room */
body .woocommerce ul.products + *,
body .woocommerce-page ul.products + *,
body .products + * {
  margin-top: 48px !important;
  padding-top: 0 !important;
}

/* ---------- Responsive breakpoints ---------- */
/* Large desktop -> 4 columns */
@media (max-width: 1400px) {
  body .woocommerce ul.products,
  body .woocommerce-page ul.products,
  body .products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Desktop / tablet -> 3 columns */
@media (max-width: 1024px) {
  body .woocommerce ul.products,
  body .woocommerce-page ul.products,
  body .products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Phone: 2 columns (forced) */
@media (max-width: 600px) {
  body .woocommerce ul.products,
  body .woocommerce-page ul.products,
  body .products,
  html body [class*="woocommerce"] [class*="products"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /*  li.product,
  body .woocommerce-page ul.products > li.product,
  body .products > li.product {
    padding: 10px 8px !important;
  }

  body .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
}

/* Very small phones -> 1 column */
@media (max-width: 360px) {
  body .woocommerce ul.products,
  body .woocommerce-page ul.products,
  body .products {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

			
			
/* ============================
  STRONG FIX: Related / Upsells / Cross-sells
  Force full-width parent wrappers + responsive grid columns
  (High-specificity + !important to override theme/Elementor inline styles)
  ============================ */

/* Target the common related/upsell/cross-sell wrappers (very specific) */
html body .woocommerce .related.products,
html body .woocommerce-page .related.products,
html body .woocommerce .upsells.products,
html body .woocommerce .cross-sells,
html body section.related,
html body section.upsells,
html body .woocommerce section.related,
html body .woocommerce .related,
html body .woocommerce .upsells,
html body .woocommerce .cross-sells {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 36px 0 !important;
  clear: both !important;
  display: block !important;
}

/* Force Elementor/Builder parent columns to expand full width if they wrap the related block */
html body .woocommerce .related.products .elementor-column,
html body .woocommerce .related.products .elementor-column-wrap,
html body .woocommerce .related.products .elementor-widget-wrap,
html body .woocommerce .upsells .elementor-column,
html body .woocommerce .upsells .elementor-column-wrap,
html body .woocommerce .upsells .elementor-widget-wrap,
html body .woocommerce .cross-sells .elementor-column,
html body .woocommerce .cross-sells .elementor-column-wrap,
html body .woocommerce .cross-sells .elementor-widget-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* If page builder or theme applies .container/.row with constrained widths, override them here (scoped to related/upsells) */
html body .woocommerce .related.products .container,
html body .woocommerce .related.products .row,
html body .woocommerce .upsells.products .container,
html body .woocommerce .upsells.products .row,
html body .woocommerce .cross-sells .container,
html body .woocommerce .cross-sells .row {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Target the inner product list and force it to be a responsive grid taking full width */
html body .woocommerce .related.products .products,
html body .woocommerce-page .related.products .products,
html body .woocommerce .upsells.products .products,
html body .woocommerce .cross-sells .products,
html body section.related .products,
html body section.upsells .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 cols default */
  gap: 22px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  align-items: start !important;
  justify-items: stretch !important;
}

/* Make each related product behave as a proper grid cell */
html body .woocommerce .related.products .products > li.product,
html body .woocommerce-page .related.products .products > li.product,
html body .woocommerce .upsells.products .products > li.product,
html body .woocommerce .cross-sells .products > li.product,
html body section.related .products > li.product {
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  clear: none !important;
}

/* Make sure images and inner blocks do not overflow or constrain the grid */
html body .woocommerce .related.products .products img,
html body .woocommerce .upsells.products .products img,
html body .woocommerce .cross-sells .products img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* Remove accidental floats / inline widths on product inner elements */
html body .woocommerce .related.products .products .product > *,
html body .woocommerce .upsells.products .products .product > *,
html body .woocommerce .cross-sells .products .product > * {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ---------- Responsive breakpoints for related grid ---------- */
/* Large desktop -> 3 columns */
@media (max-width: 1400px) {
  html body .woocommerce .related.products .products,
  html body .woocommerce .upsells.products .products,
  html body .woocommerce .cross-sells .products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet / large phone -> 2 columns */
@media (max-width: 768px) {
  html body .woocommerce .related.products .products,
  html body .woocommerce .upsells.products .products,
  html body .woocommerce .cross-sells .products,
  html body section.related .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Make sure padding and title sizes are mobile-friendly */
  html body .woocommerce .related.products .products > li.product,
  html body .woocommerce .upsells.products .products > li.product {
    padding: 8px !important;
  }
  html body .woocommerce .related.products .products .woocommerce-loop-product__title,
  html body .woocommerce .upsells.products .products .woocommerce-loop-product__title {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
}

/* Very small phones -> single column */
@media (max-width: 360px) {
  html body .woocommerce .related.products .products,
  html body .woocommerce .upsells.products .products,
  html body .woocommerce .cross-sells .products {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* If an inline style sets width:50% on a parent, override that specifically (targets common patterns) */
html body .woocommerce .related.products[style*="width: 50%"],
html body .woocommerce .related.products[style*="width:50%"],
html body .woocommerce .upsells.products[style*="width: 50%"],
html body .woocommerce .upsells.products[style*="width:50%"],
html body .woocommerce .cross-sells[style*="width: 50%"],
html body .woocommerce .cross-sells[style*="width:50%"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Last resort: if a specific builder wrapper forces float/width, force that wrapper to be full width.
   This targets common wrappers (.elementor-container, .row, .col, .vc_row, .site-main > .container). */
html body .woocommerce .related.products .elementor-container,
html body .woocommerce .related.products .vc_row,
html body .woocommerce .upsells .elementor-container,
html body .woocommerce .upsells .vc_row,
html body .woocommerce .cross-sells .elementor-container,
html body .woocommerce .cross-sells .vc_row,
html body .woocommerce .related.products .col,
html body .woocommerce .related.products .column,
html body .woocommerce .related.products .site-main > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}