/* MB In Arts homepage styling */

:root {
	--mbia-ink: #1f1724;
	--mbia-plum: #5f3b6d;
	--mbia-rose: #d78aa8;
	--mbia-gold: #d8ad5f;
	--mbia-cream: #fff7ef;
	--mbia-card: rgba(255,255,255,.88);
	--mbia-shadow: 0 24px 70px rgba(31, 23, 36, .14);
}

/* Keep the stock header/menu, but give it a cleaner storefront feel. */
.wp-site-blocks > header,
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 250, 245, .94);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(31, 23, 36, .08);
}

.mbia-home {
	margin-block-start: 0;
}

.mbia-hero {
	background:
		radial-gradient(circle at 20% 20%, rgba(216,173,95,.55), transparent 28%),
		radial-gradient(circle at 80% 10%, rgba(215,138,168,.50), transparent 26%),
		linear-gradient(135deg, #1f1724 0%, #5f3b6d 55%, #d78aa8 100%);
}

.mbia-hero .wp-block-cover__background {
	opacity: .25 !important;
}

.mbia-hero-card {
	padding: clamp(2rem, 5vw, 4rem);
	border-radius: 32px;
	background: rgba(255, 247, 239, .82);
	box-shadow: var(--mbia-shadow);
	backdrop-filter: blur(8px);
	text-align: center;
}

.mbia-eyebrow {
	margin: 0 0 .75rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .78rem;
	font-weight: 800;
	color: var(--mbia-plum);
}

.mbia-hero-title {
	margin: 0;
	font-size: clamp(2.7rem, 6.5vw, 5.8rem);
	line-height: .92;
	letter-spacing: -.055em;
	color: var(--mbia-ink);
}

.mbia-hero-subtitle {
	margin: 1.35rem auto 0;
	max-width: 650px;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.55;
	color: rgba(31, 23, 36, .82);
}

.mbia-buttons {
	justify-content: center;
	margin-top: 2rem;
}

.mbia-primary .wp-block-button__link,
.mbia-card-button .wp-block-button__link {
	background: var(--mbia-plum);
	color: #fff;
	border: 2px solid var(--mbia-plum);
	border-radius: 999px;
	font-weight: 800;
	padding: .9rem 1.25rem;
}

.mbia-secondary .wp-block-button__link {
	border-color: var(--mbia-plum);
	color: var(--mbia-plum);
	border-radius: 999px;
	font-weight: 800;
	padding: .9rem 1.25rem;
}

.mbia-section {
	padding-top: clamp(3.5rem, 7vw, 6rem);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.mbia-section-title {
	margin-top: 0;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--mbia-ink);
}

.mbia-section-intro {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	color: rgba(31,23,36,.72);
	font-size: 1.1rem;
}

.mbia-category-grid,
.mbia-process-grid,
.mbia-care-grid {
	gap: 1.25rem;
	margin-top: 2rem;
}

.mbia-category-card,
.mbia-process-card {
	height: 100%;
	padding: 1.45rem;
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 16px 45px rgba(31, 23, 36, .09);
	border: 1px solid rgba(31, 23, 36, .08);
}

.mbia-category-card h3,
.mbia-process-card h3 {
	margin-top: 0;
	font-size: 1.28rem;
	color: var(--mbia-plum);
}

.mbia-category-card p,
.mbia-process-card p {
	color: rgba(31, 23, 36, .72);
}

.mbia-card-button {
	margin-top: 1.25rem;
}

.mbia-process {
	background:
		linear-gradient(180deg, rgba(255,247,239,1), rgba(255,255,255,1));
}

.mbia-icon {
	font-size: 2rem;
	margin: 0 0 .75rem;
}

.mbia-care {
	padding-top: 3rem;
}

.mbia-care-grid {
	padding: 1.25rem;
	border-radius: 28px;
	background: var(--mbia-ink);
	color: #fff;
}

.mbia-care-grid .wp-block-column {
	padding: 1rem;
	border-radius: 18px;
	background: rgba(255,255,255,.08);
}

.mbia-care-grid p {
	margin: 0;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.mbia-category-grid,
	.mbia-process-grid,
	.mbia-care-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.mbia-hero {
		min-height: 560px !important;
	}
	.mbia-hero-card {
		padding: 1.35rem;
		border-radius: 24px;
	}
	.mbia-category-grid,
	.mbia-process-grid,
	.mbia-care-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Add to Cart button (single product page) ── */
.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button {
    background: var(--mbia-plum) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 16px 44px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background .25s ease, transform .15s ease, box-shadow .25s ease !important;
    box-shadow: 0 4px 18px rgba(95, 59, 109, .30) !important;
    margin-top: 1.25rem !important;
    display: inline-block !important;
}

.single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button.button:hover {
    background: var(--mbia-ink) !important;
    box-shadow: 0 6px 24px rgba(31, 23, 36, .40) !important;
    transform: translateY(-2px) !important;
}

.single_add_to_cart_button:active,
.woocommerce .single_add_to_cart_button.button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(31, 23, 36, .20) !important;
}

/* ── Shop listing Add to Cart buttons (WooCommerce Blocks) ── */
.wc-block-components-product-button__button,
.wc-block-grid__product-add-to-cart a.button,
.wp-block-button__link.add_to_cart_button,
a.add_to_cart_button {
    background: var(--mbia-plum) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background .25s ease, transform .15s ease, box-shadow .25s ease !important;
    box-shadow: 0 4px 18px rgba(95, 59, 109, .28) !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.wc-block-components-product-button__button:hover,
.wc-block-grid__product-add-to-cart a.button:hover,
.wp-block-button__link.add_to_cart_button:hover,
a.add_to_cart_button:hover {
    background: var(--mbia-ink) !important;
    box-shadow: 0 6px 24px rgba(31, 23, 36, .40) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.wc-block-components-product-button__button:active,
a.add_to_cart_button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(31, 23, 36, .20) !important;
}

/* ── Hide Add to Cart buttons on shop/archive listing pages ── */
.woocommerce-page .wc-block-components-product-button,
.wp-block-woocommerce-product-button,
.wc-block-grid__product-add-to-cart {
    display: none !important;
}


/* ── Shop by Category - 4-column gallery grid ── */
.wc-block-product-categories-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wc-block-product-categories-list-item {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wc-block-product-categories-list-item > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  background: rgba(255,255,255,0.6) !important;
  padding-bottom: 12px !important;
}

.wc-block-product-categories-list-item > a:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

.wc-block-product-categories-list-item__image {
  width: 100% !important;
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  border-radius: 10px 10px 0 0 !important;
  margin-bottom: 10px !important;
}

.wc-block-product-categories-list-item__image img,
.wc-block-product-categories-list-item__image .woocommerce-placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  aspect-ratio: 1 !important;
}

.wc-block-product-categories-list-item__name {
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0 8px !important;
  display: block !important;
}

.wc-block-product-categories-list-item-count {
  font-size: 0.85rem !important;
  color: #666 !important;
}

.wc-block-product-categories-list--depth-1,
.wc-block-product-categories-list--depth-2 {
  display: contents !important;
}

.wc-block-product-categories-list--depth-1 .wc-block-product-categories-list-item,
.wc-block-product-categories-list--depth-2 .wc-block-product-categories-list-item {
  padding-left: 0 !important;
}

/* Fix WooCommerce's 50px image limit for gallery grid */
.wc-block-product-categories-list--has-images .wc-block-product-categories-list-item__image {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  border: none !important;
}

.wc-block-product-categories-list--has-images .wc-block-product-categories-list-item {
  padding-left: 0 !important;
}


/* Fix WooCommerce's 50px image limit for gallery grid */
.wc-block-product-categories-list--has-images .wc-block-product-categories-list-item__image {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  border: none !important;
}

.wc-block-product-categories-list--has-images .wc-block-product-categories-list-item {
  padding-left: 0 !important;
}


/* ════ MOBILE RESPONSIVE FIXES ════ */
/* Shop by Category: 2 columns on mobile */
@media (max-width: 640px) {
  .wc-block-product-categories-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
/* Footer: collapse extra whitespace below on mobile, keep content padding */
@media (max-width: 640px) {
  footer.wp-block-template-part {
    margin-bottom: 0 !important;
    padding-bottom: 1.5rem !important;
  }
  .wp-site-blocks {
    padding-bottom: 0 !important;
  }
}
/* ════ MOBILE NAV FIX ════ */
/* At <600px: hide desktop nav links in header, show hamburger */
/* Scoped to header only — footer nav links remain visible */
@media (max-width: 599px) {
  header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  header .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
}
/* When mobile nav overlay opens, remove backdrop-filter so position:fixed */
/* can escape the header's containing block (backdrop-filter traps fixed children) */
@media (max-width: 599px) {
  header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* ════ MOBILE NAV OVERLAY STYLING ════ */
/* Give the open overlay a solid dark background + cream text */
/* Prevents invisible-items-on-transparent-overlay issue */
@media (max-width: 599px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--mbia-ink) !important;
    color: var(--mbia-cream) !important;
    z-index: 99999 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open a,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--mbia-cream) !important;
  }
  .wp-block-navigation__responsive-container-close svg,
  .wp-block-navigation__responsive-container.is-menu-open svg {
    fill: var(--mbia-cream) !important;
  }
}