/*
Theme Name: Storefront Child
Template: wp-shop-woocommerce
Version: 1.0.0
*/


/* Disable right sidebar */
#secondary,
.widget-area.sidebar-width {
  display: none !important;
}

/* Expand content to full width */
#primary,
.content-area {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* If the theme uses a 2-column grid/flex wrapper, prevent reserved space */
.site-content,
.content-sidebar-wrap,
.content-wrap,
.container,
.row {
  flex-wrap: wrap;
}

/* =========================================================
   Grillmaster - WooCommerce product grids (Storefront child)
   Uses ONLY classes present in your HTML:
   main#main.site-main, ul.products.columns-*, li.product, a.woocommerce-LoopProduct-link,
   h2.woocommerce-loop-product__title, span.price, span.onsale, a.button, .star-rating
   No JS, no HTML/PHP changes.
   ========================================================= */

/* ---------- NEW 0) Hide site title completely ---------- */
p.site-title {
  display: none !important;
}

/* ---------- NEW 0.1) Remove the decorative repeating background strip ---------- */
.top-box:after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ---------- NEW 0.2) Nav background black ---------- */
.nav-box {
  background: #000 !important;
  display: flex;
}

/* ---------- 0) Reset WooCommerce clearfix pseudo-elements that can create "empty first cell" effects ---------- */
/* You reported: .woocommerce ul.products::before/::after etc.
   We remove them so the grid starts at column 1. */
ul.products::before,
ul.products::after,
.products ul::before,
.products ul::after {
  content: none !important;
  display: none !important;
}

/* ---------- 1) Make product lists a real grid (sitewide) ---------- */
ul.products {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px !important;

  align-items: stretch !important;
}

/* Homepage blocks often use columns-4 */
ul.products.columns-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Category pages example you shared uses columns-3 */
ul.products.columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Some layouts may have columns-2/1 (safety) */
ul.products.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
ul.products.columns-1 {
  grid-template-columns: 1fr !important;
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  ul.products,
  ul.products.columns-4,
  ul.products.columns-3,
  ul.products.columns-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ---------- 2) Override theme widths/floats that fight the grid ---------- */
/* You explicitly saw a rule like:
   .woocommerce ul.products.columns-3 li.product { width:30.75%; }
   We neutralize all width/float assumptions so grid controls layout. */
ul.products li.product {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  clear: none !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;

  position: relative !important;
  overflow: hidden !important;

  /* "Clearly individualized" card look */
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 12px !important;
  background: #fff !important;

  /* subtle depth */
  box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;

  /* consistent internal spacing */
  padding: 14px !important;
}

/* Hover feel without JS */
ul.products li.product:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important;
  transform: translateY(-2px) !important;
  transition: box-shadow 160ms ease, transform 160ms ease !important;
}

/* ---------- 3) Force consistent image area + equal card height behavior ---------- */
/* Anchor wrapper becomes a flex column so the button can sit at the bottom consistently */
ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Make images uniform: fixed height, cover, centered */
ul.products li.product img.attachment-woocommerce_thumbnail,
ul.products li.product img.size-woocommerce_thumbnail {
  width: 100% !important;
  height: 320px !important;           /* you asked 320 */
  object-fit: cover !important;
  object-position: center center !important;

  display: block !important;
  border-radius: 10px !important;
}

/* Mobile: slightly smaller image height for better scroll */
@media (max-width: 768px) {
  ul.products li.product img.attachment-woocommerce_thumbnail,
  ul.products li.product img.size-woocommerce_thumbnail {
    height: 260px !important;
  }
}

/* ---------- 4) Title, rating, price spacing and consistency ---------- */
ul.products li.product h2.woocommerce-loop-product__title {
  margin: 12px 0 8px 0 !important;
  padding: 0 !important;

  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;

  /* keep cards aligned; clamp to 2 lines */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: calc(1.25em * 2) !important;
}

/* Rating spacing */
ul.products li.product .star-rating {
  margin: 0 0 8px 0 !important;
}

/* Price styling */
ul.products li.product span.price {
  margin-top: auto !important; /* pushes price down within link area */
  display: block !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

ul.products li.product span.price del {
  opacity: 0.65 !important;
  font-weight: 600 !important;
  margin-right: 6px !important;
}

ul.products li.product span.price ins {
  text-decoration: none !important;
}

/* ---------- 5) Button: consistent, at the bottom of the card ---------- */
ul.products li.product > a.button,
ul.products li.product a.button {
  margin-top: 12px !important;
  width: 100% !important;
  text-align: center !important;

  padding: 12px 14px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;

  text-transform: none !important;
}

/* ---------- 6) Sale / preorder badge: restore as a corner badge (not full width) ---------- */
ul.products li.product span.onsale {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;

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

  width: auto !important;
  max-width: calc(100% - 24px) !important;
  padding: 6px 10px !important;

  border-radius: 999px !important;
  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 800 !important;

  z-index: 5 !important;
  float: none !important;

  /* if theme set background/text weird, give a sane default */
  background: #111 !important;
  color: #fff !important;
}

/* If preorder is used as a secondary badge class in your HTML */
ul.products li.product span.onsale.on-preorder {
  background: #333 !important;
}

/* ---------- 7) Prevent weird list item markers/margins from theme defaults ---------- */
ul.products li.product::marker {
  content: "" !important;
}

/* ---------- 8) Keep layout stable inside main area ---------- */
main#main.site-main ul.products {
  width: 100% !important;
}

/* ---------- 9) Optional: tighten overall grid on very wide screens ---------- */
@media (min-width: 1200px) {
  ul.products {
    gap: 22px !important;
  }
}

/* ---------- NEW 10) Homepage category/title blocks: white background + black text (replace earlier grey+red) ---------- */
.elementor-1322 .elementor-element.elementor-element-64c45fc2 > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-e3513a9 > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-e690991 > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-5f4043fb > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-6b7869b > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-b3a5746 > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-e760fd7 > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-7a507ea > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-4f8269a > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-c023f3c > .elementor-widget-container,
.elementor-1322 .elementor-element.elementor-element-3a673a0b > .elementor-widget-container {
  background-color: #fff !important;
}

/* Titles + links black */
.elementor-1322 .elementor-element.elementor-element-64c45fc2 .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-e3513a9 .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-e690991 .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-5f4043fb .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-6b7869b .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-b3a5746 .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-e760fd7 .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-7a507ea .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-4f8269a .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-c023f3c .elementor-heading-title,
.elementor-1322 .elementor-element.elementor-element-3a673a0b .elementor-heading-title,
.elementor-1322 .elementor-element .elementor-heading-title a {
  color: #000 !important;
}

/* Keep hover consistent (black) */
.elementor-1322 .text-cat-homepage .elementor-heading-title a:hover {
  color: #000 !important;
  text-decoration: none;
}

/* ---------- NEW 11) Elementor border color change (red -> black) ---------- */
.elementor-1322 .elementor-element.elementor-element-caef6ab > .elementor-element-populated {
  border-style: solid;
  border-color: #000 !important;
  margin: 5px 5px 5px 5px;
  --e-column-margin-right: 5px;
  --e-column-margin-left: 5px;
  padding: 0px 0px 0px 0px;
}


/* =========================================================
   wp-shop-woocommerce menu - mobile fix for submenus
   Keep existing accordion/toggles.
   Only prevent nested submenus from opening to the right (off-screen).
   ========================================================= */

@media (max-width: 768px) {

  /* Prevent horizontal scroll caused by off-canvas submenus */
  .main-navigation,
  .main-navigation .nav-menu {
    overflow-x: hidden !important;
  }

  /*
    IMPORTANT:
    Do NOT set display:none/block here.
    The theme’s mobile accordion/toggle relies on its own display/height logic.
  */

  /* Level 2 submenus: keep them inside the flow and full width */
  .main-navigation ul ul,
  .main-navigation ul ul.sub-menu {
    position: relative !important;   /* override absolute positioning */
    left: 0 !important;             /* override left: 100% (off-screen) */
    right: auto !important;
    top: auto !important;

    width: 100% !important;
    max-width: 100% !important;

    float: none !important;
    transform: none !important;
  }

  /* Level 3+ submenus: also force inside (some themes set left:100% again) */
  .main-navigation ul ul ul,
  .main-navigation ul ul ul.sub-menu {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  /* Make sure items stack (some themes float li on mobile) */
  .main-navigation ul li,
  .main-navigation ul ul li {
    float: none !important;
    width: 100% !important;
  }

  /* Optional: indentation so hierarchy is visible (keeps full width) */
  .main-navigation ul ul > li > a { padding-left: 20px !important; }
  .main-navigation ul ul ul > li > a { padding-left: 32px !important; }
  .main-navigation ul ul ul ul > li > a { padding-left: 44px !important; }
}