/* =========================================================
   Buckner Breads — FINAL Additional CSS (FULL REPLACEMENT)
   Fixes:
   1) Mobile home hero getting cut off under sticky header
   2) Product page white background going full-page on desktop
   ========================================================= */

/* ---------- Global box sizing (prevents width+padding overflow) ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Variables ---------- */
:root { --bb-header-offset: 110px; }

/* ---------- Header + logo ---------- */
header, .site-header { z-index: 99999 !important; }

.site-logo-wrapper,
.logo-alt-exists {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 60px !important;
  overflow: visible !important;
}

.site-logo-alt {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}

.site-logo-alt img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-width: 200px !important;
}

/* ---------- Wheat background ---------- */
body {
  background-color: #fbf7f2;
  position: relative;
  padding-top: var(--bb-header-offset) !important; /* keep pages below sticky header */
}

/* Mobile usually needs a smaller offset (prevents excessive pushdown) */
@media (max-width: 768px) {
  :root { --bb-header-offset: 80px; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("https://bucknerbreads.com/wp-content/uploads/2026/02/ChatGPT-Image-Feb-1-2026-09_44_58-AM.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  opacity: 0.22;
  pointer-events: none;
  z-index: -2; /* behind the white card */
}

/* =========================================================
   SITEWIDE WHITE CARD BEHIND MAIN CONTENT (DEFAULT)
   ========================================================= */

.wp-site-blocks > main,
.wp-site-blocks > .content-area,
.site-content {
  position: relative;
  z-index: 0;
  padding-bottom: 32px !important; /* breathing room at bottom */
}

/* Card layer */
.wp-site-blocks > main::before,
.wp-site-blocks > .content-area::before,
.site-content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1400px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.05);
  z-index: -1;
}

/* ---------- Mobile: card + content containment ---------- */
@media (max-width: 768px) {

  /* Card closer to edges on mobile */
  .wp-site-blocks > main::before,
  .wp-site-blocks > .content-area::before,
  .site-content::before {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    border-radius: 12px !important;
  }

  /* Content padding on mobile */
  .wp-site-blocks > main,
  .wp-site-blocks > .content-area,
  .site-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Images scale down properly */
  img,
  .wp-block-image img,
  .woocommerce img,
  .wc-block-components-product-image img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Keep 2 columns on mobile (your preference) */
  .wp-block-columns { flex-wrap: nowrap !important; gap: 12px; }
  .wp-block-column { flex-basis: 50% !important; min-width: 0; }
}

/* =========================================================
   FIX #1 — HOME HERO CUT OFF (MOBILE + ALL SIZES)
   Problem cause: body padding + unreliable :first-child margin targeting
   Fix: On home only, remove body padding-top and push main instead
   ========================================================= */

body.home {
  padding-top: 0 !important; /* prevents hero being shoved/cropped oddly */
}

body.home .wp-site-blocks > main,
body.home .wp-site-blocks > .content-area,
body.home .site-content {
  padding-top: var(--bb-header-offset) !important; /* reliable offset */
}

/* Optional: if your theme uses a block header overlay, ensure first section can breathe */
body.home .wp-site-blocks > main > *:first-child,
body.home .site-content > *:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   WooCommerce — Product page styling + overflow fixes
   ========================================================= */

/* =========================================================
   FIX #2 — PRODUCT PAGE WHITE BACKGROUND FULL-PAGE (DESKTOP)
   Cause: sitewide main::before card stretches entire main height
   Fix: disable sitewide card on single product pages;
        use Woo wrapper card only
   ========================================================= */

body.single-product .wp-site-blocks > main::before,
body.single-product .wp-site-blocks > .content-area::before,
body.single-product .site-content::before {
  content: none !important;
  display: none !important;
}

/* Ensure no other container is painting white */
body.single-product,
body.single-product .wp-site-blocks,
body.single-product .wp-site-blocks > main,
body.single-product .site-content {
  background: transparent !important;
}

/* Product pages: contained card behind Woo content */
body.single-product .woocommerce,
body.single-product .woocommerce-page {
  background: rgba(255,255,255,0.96) !important;
  width: min(1200px, calc(100% - 32px)) !important; /* contained on desktop */
  margin: 0 auto !important;
  padding: 24px !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.05) !important;
  overflow: hidden !important; /* contain any gallery weirdness */
}

/* Make sure inner product pieces are responsive */
body.single-product .woocommerce div.product,
body.single-product .woocommerce div.product .woocommerce-product-gallery,
body.single-product .woocommerce div.product .summary,
body.single-product .woocommerce-product-gallery__wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Product images: always fit within container */
body.single-product .woocommerce div.product img,
body.single-product .woocommerce div.product figure,
body.single-product .woocommerce div.product .wp-post-image {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Mobile: stack nicely + full-width button */
@media (max-width: 768px) {

  body.single-product .woocommerce,
  body.single-product .woocommerce-page {
    width: calc(100% - 16px) !important; /* a little wider on mobile */
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* If theme uses floats, neutralize */
  body.single-product .woocommerce div.product .woocommerce-product-gallery,
  body.single-product .woocommerce div.product .summary {
    float: none !important;
    width: 100% !important;
  }

  body.single-product .woocommerce div.product form.cart button.single_add_to_cart_button {
    width: 100% !important;
  }

  /* On product pages only: allow Columns to wrap (prevents squish) */
  body.single-product .wp-block-columns { flex-wrap: wrap !important; }
  body.single-product .wp-block-column { flex-basis: 100% !important; }
}
/* Reduce tall homepage sections when editor controls are locked */
body.home .wp-block-group.alignfull,
body.home .wp-block-cover.alignfull {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

@media (max-width: 768px) {
  body.home .wp-block-group.alignfull,
  body.home .wp-block-cover.alignfull {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}
/* =========================================================
   Buckner Breads — Cart + Checkout header visibility fix
   Mobile-safe, desktop-tight
   ========================================================= */

/* Desktop default (tight) */
:root { --bb-sticky-header-safe: 30px; }

/* WooCommerce Cart page */
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-cart main,
body.woocommerce-cart .site-content {
  padding-top: var(--bb-sticky-header-safe) !important;
}

/* WooCommerce Checkout page */
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-checkout main,
body.woocommerce-checkout .site-content {
  padding-top: var(--bb-sticky-header-safe) !important;
}

/* Mobile/tablet: more space because sticky header is taller */
@media (max-width: 782px) {
  :root { --bb-sticky-header-safe: 130px; }
}

/* Nice-to-have: anchor/scroll spacing */
body.woocommerce-cart h1,
body.woocommerce-checkout h1 {
  scroll-margin-top: var(--bb-sticky-header-safe) !important;
}
/* =========================================================
   Buckner Breads — Cart + Checkout: show wheat ABOVE + BELOW the white card
   Adds “bands” by insetting your existing sitewide card (::before)
   ========================================================= */

/* Control how much wheat you see */
:root {
  --bb-woo-band-top: 22px;
  --bb-woo-band-bottom: 34px;
}

/* Give the page wrapper space so content doesn’t collide with the inset card */
body.woocommerce-cart .wp-site-blocks > main,
body.woocommerce-cart .wp-site-blocks > .content-area,
body.woocommerce-cart .site-content,
body.woocommerce-checkout .wp-site-blocks > main,
body.woocommerce-checkout .wp-site-blocks > .content-area,
body.woocommerce-checkout .site-content {
  padding-top: calc(var(--bb-sticky-header-safe) + var(--bb-woo-band-top)) !important;
  padding-bottom: calc(32px + var(--bb-woo-band-bottom)) !important; /* 32px is your base */
}

/* Inset ONLY the existing white card layer on Cart/Checkout */
body.woocommerce-cart .wp-site-blocks > main::before,
body.woocommerce-cart .wp-site-blocks > .content-area::before,
body.woocommerce-cart .site-content::before,
body.woocommerce-checkout .wp-site-blocks > main::before,
body.woocommerce-checkout .wp-site-blocks > .content-area::before,
body.woocommerce-checkout .site-content::before {
  top: var(--bb-woo-band-top) !important;
  bottom: var(--bb-woo-band-bottom) !important;
}

/* Mobile: smaller bands */
@media (max-width: 782px) {
  :root {
    --bb-woo-band-top: 14px;
    --bb-woo-band-bottom: 22px;
  }
}
/* Ensure mini cart / cart drawer overlays the header + top banner */
.woocommerce-min-cart,
.woocommerce-mini-cart,
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart__drawer,
.wc-block-components-drawer,
.wc-block-components-drawer__screen-overlay,
.wc-block-components-drawer__content {
  z-index: 999999 !important;
}