/*
 * Maple House Foods — R9 composition / responsive QA layer
 * Loaded after style.css and ui-polish-r8.css.
 * Purpose: eliminate text/image collisions, clipped artwork and horizontal drift,
 * while tightening contrast and section composition across all breakpoints.
 */

:root{
  --mhf-r9-radius:24px;
  --mhf-r9-radius-sm:16px;
  --mhf-r9-safe-green:#09241B;
  --mhf-r9-safe-copy:#4D5B53;
  --mhf-r9-line:rgba(9,36,27,.11);
  --mhf-r9-shadow:0 18px 50px rgba(9,36,27,.085);
}

/* --------------------------------------------------------------------------
   Global geometry safeguards
   -------------------------------------------------------------------------- */
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
body{position:relative}
main,section,.shell,.v4-brand-grid,.v4-world-grid,.v4-closing-grid,.v4-dual-wrap,
.page-hero-grid,.product-detail-grid,.wholesale-anatomy,.fulfilment-grid,
.private-label-intro,.about-statement,.name-meaning,.shipping-overview,
.form-layout,.contact-layout,.faq-layout{min-width:0}
section{isolation:isolate}
img{max-width:100%;height:auto}
.v4-world-copy,.v4-brand-copy,.v4-closing-panel>div,.page-hero-copy,.private-label-copy{min-width:0}
.v4-world-copy h3,.v4-brand-copy h2,.v4-closing-panel h2,.page-hero-copy h1,
.private-label-copy h2{overflow-wrap:normal;word-break:normal;text-wrap:balance}

/* The floating leaves remain decorative and must never compete with copy. */
.mhf-leaf-drift{z-index:1!important;opacity:.72!important}
main,.site-header,.utility-bar,.newsletter,.site-footer{position:relative;z-index:2}
.mhf-leaf-drift .leaf-a,.mhf-leaf-drift .leaf-b,.mhf-leaf-drift .leaf-c,.mhf-leaf-drift .leaf-d{opacity:.025!important}

/* --------------------------------------------------------------------------
   Homepage category worlds — reserve a real copy zone and a real art zone.
   -------------------------------------------------------------------------- */
.v4-worlds{overflow:hidden!important}
.v4-world-grid{align-items:stretch}
.v4-world{border-radius:24px!important;overflow:hidden!important;box-shadow:0 10px 32px rgba(9,36,27,.045)}
.v4-world-copy{z-index:8!important;left:clamp(24px,2.5vw,36px)!important;top:clamp(24px,2.5vw,34px)!important}
.v4-world-copy small{font-size:10px!important;letter-spacing:.12em!important;font-weight:700!important}
.v4-world-copy h3{line-height:1.08!important;letter-spacing:-.035em!important}
.v4-world-copy>span{position:relative;z-index:9}
.v4-world img{z-index:3!important;max-width:none;object-fit:contain!important;object-position:center bottom!important}

/* Pantry was the main collision: text stays on the left, artwork is confined right. */
.v4-world-pantry:after{
  content:'';position:absolute;z-index:5;inset:0 auto 0 0;width:62%;pointer-events:none;
  background:linear-gradient(90deg,rgba(231,233,225,.99) 0%,rgba(231,233,225,.96) 64%,rgba(231,233,225,.52) 84%,rgba(231,233,225,0) 100%);
}
.v4-world-pantry .v4-world-copy{max-width:52%!important}
.v4-world-pantry .world-img-ghee{height:76%!important;width:auto!important;right:-1%!important;bottom:2%!important}
.v4-world-pantry .world-img-spice{height:58%!important;width:auto!important;right:12%!important;bottom:0!important;transform:rotate(-5deg)!important}
.v4-world-pantry:hover .world-img-spice{transform:translateY(-6px) rotate(-3deg)!important}

/* Other category artwork also gets safe copy separation. */
.v4-world-maamoul:after{
  content:'';position:absolute;z-index:5;inset:0 auto 0 0;width:49%;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,219,156,.97),rgba(244,219,156,.70) 72%,rgba(244,219,156,0));
}
.v4-world-maamoul .v4-world-copy{max-width:45%!important}
.v4-world-maamoul .world-img-a{width:58%!important;right:9%!important;bottom:2%!important}
.v4-world-maamoul .world-img-b{width:42%!important;right:-4%!important;bottom:18%!important}
.v4-world-maamoul .world-img-c{width:41%!important;right:27%!important;bottom:30%!important}
.v4-world-fun:after{
  content:'';position:absolute;z-index:5;inset:0 auto 0 0;width:61%;pointer-events:none;
  background:linear-gradient(90deg,rgba(166,38,45,.99),rgba(166,38,45,.92) 68%,rgba(166,38,45,0));
}
.v4-world-fun .v4-world-copy{max-width:55%!important}
.v4-world-fun img{width:43%!important;right:2%!important;bottom:2%!important}
.v4-world-fun .v4-world-copy h3,.v4-world-fun .v4-world-copy>span{color:#fff!important}

/* --------------------------------------------------------------------------
   Dark brand story — no horizontal drift, no artwork over copy.
   -------------------------------------------------------------------------- */
.v4-brand-story{overflow:hidden!important;padding-top:clamp(82px,8vw,112px)!important}
.v4-brand-grid{
  position:relative!important;width:min(1320px,calc(100% - 64px))!important;margin-inline:auto!important;
  display:grid!important;grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr)!important;
  gap:clamp(48px,6vw,84px)!important;align-items:center!important;
}
.v4-brand-copy{position:relative!important;z-index:7!important;max-width:590px!important;padding-bottom:64px!important;transform:none!important;translate:none!important}
.v4-brand-copy h2{font-size:clamp(36px,3.35vw,50px)!important;line-height:1.08!important}
.v4-brand-copy p{font-size:16px!important;line-height:1.72!important;color:rgba(255,255,255,.82)!important}
.v4-brand-copy .link-arrow{color:#fff!important}
.v4-brand-art{
  position:relative!important;z-index:2!important;width:100%!important;max-width:100%!important;height:580px!important;
  min-width:0!important;overflow:hidden!important;border-radius:28px 28px 0 0;
}
.v4-brand-art:after{
  content:'';position:absolute;z-index:0;right:0;bottom:0;width:88%;height:82%;
  border-radius:48% 48% 0 0;background:radial-gradient(circle at 50% 72%,rgba(216,158,24,.14),rgba(216,158,24,.035) 48%,transparent 72%);
}
.v4-brand-word{z-index:1!important;left:2%!important;top:4%!important;font-size:clamp(110px,11vw,190px)!important}
.v4-brand-art img{z-index:3!important;max-width:100%!important;object-fit:contain!important;translate:none!important}
.v4-brand-art .brand-jameed{height:78%!important;right:28%!important;bottom:2%!important;left:auto!important}
.v4-brand-art .brand-spice{height:69%!important;right:1%!important;bottom:0!important;left:auto!important}
.v4-brand-art .brand-ghee{height:67%!important;left:4%!important;right:auto!important;bottom:0!important}
.v4-values-row{position:relative!important;z-index:8!important;grid-column:1/-1!important;background:rgba(4,21,15,.58);backdrop-filter:blur(8px)}

/* --------------------------------------------------------------------------
   Closing panels — split copy and visual zones instead of layering them.
   -------------------------------------------------------------------------- */
.v4-closing-grid{overflow:hidden!important}
.v4-closing-panel{min-width:0!important;min-height:590px!important;padding:clamp(44px,5vw,68px)!important;align-items:flex-start!important}
.v4-closing-panel>div{z-index:8!important;max-width:48%!important}
.v4-closing-panel h2{line-height:1.08!important}
.v4-closing-panel p{font-size:16px!important;line-height:1.7!important}
.v4-closing-panel img{
  z-index:3!important;right:2.5%!important;bottom:2%!important;width:auto!important;max-width:48%!important;
  max-height:78%!important;object-fit:contain!important;object-position:right bottom!important;translate:none!important;
}
.v4-store-panel:before,.v4-private-panel:before{
  content:'';position:absolute;z-index:5;inset:0 auto 0 0;width:58%;pointer-events:none;
}
.v4-store-panel:before{background:linear-gradient(90deg,rgba(243,232,206,.99),rgba(243,232,206,.96) 72%,rgba(243,232,206,0))}
.v4-private-panel:before{background:linear-gradient(90deg,rgba(9,36,27,.99),rgba(9,36,27,.97) 72%,rgba(9,36,27,0))}
.v4-private-panel h2,.v4-private-panel b{color:#fff!important}
.v4-private-panel p{color:rgba(255,255,255,.84)!important}
.v4-private-panel img{max-width:45%!important;max-height:77%!important;right:3%!important;bottom:0!important}
.v4-store-panel img{max-width:47%!important;max-height:72%!important;right:2%!important;bottom:2%!important}

/* --------------------------------------------------------------------------
   Page heroes and editorial visuals — nothing should be cut by the frame.
   -------------------------------------------------------------------------- */
.page-hero{overflow:hidden!important}
.page-hero-grid{align-items:center!important}
.page-hero-copy{position:relative!important;z-index:5!important}
.page-hero-copy h1{max-width:760px!important}
.page-hero-visual{overflow:hidden!important;border-radius:28px!important;padding:30px!important;min-width:0!important}
.page-hero-visual img{width:auto!important;height:auto!important;max-width:90%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;translate:none!important;transform:none!important}
.page-hero-visual:before{max-width:78%;max-height:78%}

.about-showcase,.private-label-visual{overflow:hidden!important;padding:30px!important}
.about-showcase img,.private-label-visual img{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;object-position:center!important;transform:none!important;translate:none!important;
}
.private-label-visual{display:flex!important;align-items:center!important;justify-content:center!important}
.about-showcase{display:flex!important;align-items:center!important;justify-content:center!important}

/* Internal dark sections: stronger readable body text. */
.section-green h1,.section-green h2,.section-green h3,.section-green h4,.section-green strong{color:#fff!important}
.section-green p,.section-green li,.section-green span:not(.eyebrow){color:rgba(255,255,255,.84)}
.section-green .application-step,.section-green .freight-step{background:rgba(255,255,255,.055)!important}
.section-green .application-step p,.section-green .freight-step p{color:rgba(255,255,255,.82)!important}

/* --------------------------------------------------------------------------
   Product containment / commerce polish
   -------------------------------------------------------------------------- */
.product-card,.woocommerce ul.products li.product{border-radius:20px!important;overflow:hidden!important}
.product-media,.woocommerce ul.products li.product a img{overflow:hidden!important}
.product-media img,.woocommerce ul.products li.product a img{object-fit:contain!important;object-position:center!important}
.product-main-media{overflow:hidden!important}
.product-main-media .woocommerce-product-gallery__image img,.product-main-media>img{object-fit:contain!important;object-position:center!important}
.product-main-media .zoomImg{object-fit:initial!important}
.product-card-footer{min-width:0}
.product-card-price-stack{overflow:hidden}
.product-title{overflow-wrap:anywhere}

/* Tables/forms should never force page-level horizontal scrolling. */
.mhf-wc-content,.woocommerce,.woocommerce-cart-form,.woocommerce-checkout,.woocommerce-account{max-width:100%;min-width:0}
.woocommerce table.shop_table{max-width:100%}
.field input,.field textarea,.field select,.mhf-form input,.mhf-form textarea,.mhf-form select,
.woocommerce input,.woocommerce textarea,.woocommerce select{max-width:100%}

/* --------------------------------------------------------------------------
   Tablet: explicit compositions for the exact widths that exposed the defects.
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .v4-brand-grid{width:min(1240px,calc(100% - 44px))!important;grid-template-columns:minmax(330px,.9fr) minmax(0,1.1fr)!important;gap:42px!important}
  .v4-brand-art{height:530px!important}
  .v4-brand-art .brand-jameed{height:73%!important;right:25%!important}
  .v4-brand-art .brand-spice{height:65%!important}
  .v4-brand-art .brand-ghee{height:63%!important}
  .v4-closing-panel>div{max-width:52%!important}
  .v4-closing-panel img{max-width:46%!important}
}

@media (max-width:960px){
  /* Category cards stay roomy enough for both copy and products. */
  .v4-world-grid{gap:18px!important}
  .v4-world{min-height:500px!important}
  .v4-world-pantry,.v4-world-fun{min-height:470px!important}
  .v4-world-pantry .v4-world-copy{max-width:51%!important}
  .v4-world-pantry:after{width:61%!important}
  .v4-world-pantry .world-img-ghee{height:76%!important;right:1%!important;bottom:2%!important}
  .v4-world-pantry .world-img-spice{height:55%!important;right:12%!important;bottom:1%!important}
  .v4-world-fun .v4-world-copy{max-width:54%!important}
  .v4-world-fun img{width:auto!important;height:73%!important;right:3%!important;bottom:2%!important}

  /* Brand story becomes clean vertical editorial layout. */
  .v4-brand-grid{width:calc(100% - 44px)!important;grid-template-columns:1fr!important;gap:28px!important}
  .v4-brand-copy{max-width:760px!important;padding-bottom:10px!important}
  .v4-brand-art{height:500px!important;border-radius:26px!important;background:rgba(255,255,255,.025)}
  .v4-brand-art .brand-jameed{height:78%!important;right:27%!important}
  .v4-brand-art .brand-spice{height:68%!important;right:4%!important}
  .v4-brand-art .brand-ghee{height:66%!important;left:5%!important}
  .v4-values-row{grid-column:1!important;border-radius:14px 14px 0 0}

  /* Stacked closing panels use side-by-side content within each panel. */
  .v4-closing-grid{grid-template-columns:1fr!important}
  .v4-closing-panel{min-height:500px!important;padding:52px 46px!important}
  .v4-closing-panel>div{max-width:52%!important}
  .v4-closing-panel img{max-width:43%!important;max-height:74%!important;right:4%!important;bottom:2%!important}
  .v4-private-panel img{max-width:42%!important;max-height:72%!important}
  .v4-store-panel:before,.v4-private-panel:before{width:62%!important}

  .page-hero-grid{grid-template-columns:1fr!important}
  .page-hero-visual{width:100%!important;max-width:760px!important;margin-inline:auto!important}
  .about-showcase,.private-label-visual{height:520px!important;min-height:0!important}
}

@media (max-width:700px){
  /* Cards turn into copy-above / artwork-below rather than copy-on-art. */
  .v4-world{min-height:540px!important}
  .v4-world-copy{left:22px!important;right:22px!important;top:24px!important;max-width:none!important}
  .v4-world-copy h3{max-width:100%!important;font-size:clamp(25px,7vw,31px)!important}
  .v4-world-pantry:after,.v4-world-maamoul:after,.v4-world-fun:after{
    inset:0!important;width:100%!important;height:58%!important;
  }
  .v4-world-pantry:after{background:linear-gradient(180deg,rgba(231,233,225,1) 0%,rgba(231,233,225,.98) 70%,rgba(231,233,225,0) 100%)}
  .v4-world-maamoul:after{background:linear-gradient(180deg,rgba(244,219,156,1) 0%,rgba(244,219,156,.95) 70%,rgba(244,219,156,0) 100%)}
  .v4-world-fun:after{background:linear-gradient(180deg,rgba(166,38,45,1) 0%,rgba(166,38,45,.96) 70%,rgba(166,38,45,0) 100%)}
  .v4-world-pantry .world-img-ghee{height:49%!important;right:7%!important;bottom:2%!important}
  .v4-world-pantry .world-img-spice{height:41%!important;right:36%!important;bottom:0!important}
  .v4-world-maamoul .world-img-a{width:68%!important;right:16%!important;bottom:1%!important}
  .v4-world-maamoul .world-img-b{width:48%!important;right:-3%!important;bottom:10%!important}
  .v4-world-maamoul .world-img-c{width:46%!important;right:39%!important;bottom:20%!important}
  .v4-world-fun img{width:auto!important;height:49%!important;right:8%!important;bottom:1%!important}

  .v4-brand-grid{width:calc(100% - 30px)!important}
  .v4-brand-copy h2{font-size:clamp(32px,8.7vw,42px)!important}
  .v4-brand-art{height:420px!important}
  .v4-brand-art .brand-jameed{height:72%!important;right:25%!important}
  .v4-brand-art .brand-spice{height:60%!important;right:0!important}
  .v4-brand-art .brand-ghee{height:58%!important;left:0!important}

  /* At phone widths the copy owns the top and artwork owns the lower half. */
  .v4-closing-panel{min-height:650px!important;padding:44px 24px 300px!important}
  .v4-closing-panel>div{max-width:100%!important}
  .v4-closing-panel:before{width:100%!important;height:62%!important;bottom:auto!important}
  .v4-store-panel:before{background:linear-gradient(180deg,rgba(243,232,206,1) 0%,rgba(243,232,206,.98) 75%,rgba(243,232,206,0) 100%)}
  .v4-private-panel:before{background:linear-gradient(180deg,rgba(9,36,27,1) 0%,rgba(9,36,27,.99) 75%,rgba(9,36,27,0) 100%)}
  .v4-closing-panel img{width:auto!important;max-width:74%!important;max-height:290px!important;right:8%!important;bottom:0!important}
  .v4-private-panel img{max-width:68%!important;max-height:300px!important;right:10%!important}

  .page-hero-visual{height:310px!important;padding:24px!important}
  .page-hero-visual img{max-width:88%!important;max-height:255px!important}
  .about-showcase,.private-label-visual{height:430px!important;padding:20px!important}
  .application-step,.freight-step{min-height:0!important}
}

@media (max-width:430px){
  .v4-world{min-height:510px!important}
  .v4-world-pantry .world-img-ghee{height:45%!important;right:3%!important}
  .v4-world-pantry .world-img-spice{height:37%!important;right:33%!important}
  .v4-brand-art{height:360px!important}
  .v4-closing-panel{min-height:625px!important;padding-bottom:275px!important}
  .v4-closing-panel img{max-height:265px!important}
  .page-hero-visual{height:280px!important}
  .page-hero-visual img{max-height:225px!important}
  .about-showcase,.private-label-visual{height:360px!important}
}

@media (prefers-reduced-motion:reduce){
  .v4-world img,.v4-brand-art img,.v4-closing-panel img{transition:none!important;animation:none!important;translate:none!important;transform:none!important}
}

/* Desktop category-card collision hard stop: artwork may overlap itself, never copy. */
@media (min-width:961px){
  .v4-world-pantry .v4-world-copy{max-width:50%!important}
  .v4-world-pantry .world-img-ghee{height:74%!important;right:0!important}
  .v4-world-pantry .world-img-spice{height:50%!important;right:0!important}
  .v4-world-fun .v4-world-copy{max-width:52%!important}
  .v4-world-fun img{width:38%!important;right:1%!important}
}
@media (min-width:961px) and (max-width:1240px){
  .v4-world-pantry .v4-world-copy{max-width:48%!important}
  .v4-world-pantry .world-img-ghee{height:72%!important}
  .v4-world-pantry .world-img-spice{height:48%!important}
}

/* Homepage hero artwork must remain fully legible at narrow/tall viewports. */
.v4-hero-stage{min-width:0!important;overflow:visible!important}
.v4-showcase{width:104%!important;right:-2%!important;bottom:0!important;max-height:95%!important;object-fit:contain!important;object-position:center bottom!important}
@media (max-width:960px){
  .v4-showcase{width:96%!important;right:2%!important;max-height:94%!important}
}
@media (max-width:700px){
  .v4-showcase{width:106%!important;right:-3%!important;max-height:91%!important}
}
@media (max-width:430px){
  .v4-showcase{width:103%!important;right:-1.5%!important}
}