/* Full-width responsive hero */
.kaddora-hero {
  width: 100%;
  margin-left: calc(-50% + 50%);
  box-sizing: border-box;
}

.kaddora-hero .wp-block-columns {
  max-width: 1600px; /* optional cap so content doesn’t stretch too wide */
  margin: 0 auto;
}

@media (max-width: 768px) {
  .kaddora-hero .wp-block-columns {
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
  }
  .kaddora-hero .wp-block-heading,
  .kaddora-hero p {
    text-align: center;
  }
  .kaddora-hero .wp-block-buttons {
    justify-content: center !important;
  }
}




/* 100% browser width, ignoring theme content width */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* Nice responsive side padding that scales with screen size */
.full-bleed-pad {
  padding-left: clamp(12px, 4vw, 56px);
  padding-right: clamp(12px, 4vw, 56px);
}

/* Make full-bleed sections behave even inside global padding layouts */
.wp-site-blocks { overflow-x: clip; } /* prevent horizontal scroll from full-bleed calc */

/* ===== Product grids (WooCommerce blocks & Query loop) ===== */
.kaddora-products .wc-block-grid,
.kaddora-products .wp-block-woocommerce-product-template,
.kaddora-products .wp-block-query > .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wp--preset--spacing--30, 24px);
  align-items: stretch;
}

.kaddora-products .wc-block-grid__product,
.kaddora-products .wp-block-post {
  height: 100%;
}

/* Optional: give product cards some breathing room edge-to-edge */
.kaddora-products { 
  max-width: none !important;
}

/* ===== Cards in “Why Shop With Us” section ===== */
.kaddora-whyus-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--wp--preset--spacing--30, 24px);
  margin-inline: auto;
  max-width: 1800px; /* keeps text readable on ultrawide; remove if you want absolute full width */
}

.kaddora-whyus-card img { 
  max-width: clamp(96px, 10vw, 140px); 
  height: auto; 
  display: block; 
  margin-inline: auto; 
}