/* MarketReady KC — Option B mobile-first storefront parity.
   Hide the legacy hero, benefit tiles and bottom dock. Preserve real React
   cart, prices, pickup/photos, existing SEO routes and Google Ads hooks. */
@media (max-width: 720px) {
  .site > .header {
    position:relative!important;top:auto!important;
    background:#092b40!important;
    border-bottom:1px solid rgba(150,215,212,.16)!important;
    box-shadow:none!important;
  }
  .site > .header .nav {
    height:70px!important;min-height:70px!important;
    padding:0 17px!important;max-width:none!important;
    display:flex!important;justify-content:space-between!important;align-items:center!important;
  }
  .site > .header .brand.brandExactLogo {
    position:relative!important;left:auto!important;top:auto!important;
    transform:none!important;margin:0!important;
    width:120px!important;min-width:120px!important;height:69px!important;
    justify-content:flex-start!important;
  }
  .site > .header .brand.brandExactLogo .siteExactLogo {
    width:120px!important;height:69px!important;
    max-width:120px!important;object-fit:contain!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .site > .header .mrBrandMenuButton {
    position:relative!important;margin:0 0 0 auto!important;
    width:44px!important;height:44px!important;border-radius:11px!important;
    border:1px solid rgba(218,248,241,.25)!important;
    background:rgba(255,255,255,.06)!important;
  }
  .site > .mrQuickNav{display:none!important}
  .site .hero{padding:0 0 26px!important;background:linear-gradient(180deg,#0b2a41,#0b3142)!important}
  .site .hero > .wrap{width:calc(100% - 28px)!important;padding:0!important;margin:0 14px!important;display:block!important}
  .site .hero .heroGrid {
    display:block!important;min-height:0!important;height:auto!important;
    margin:0 0 16px!important;padding:16px 0 0!important;
    border:0!important;box-shadow:none!important;background:transparent!important;
  }
  .site .hero .heroGrid > div:first-child {
    padding:3px 4px 2px!important;margin:0!important;min-height:0!important;
    display:block!important;text-align:left!important;align-items:flex-start!important;
  }
  .site .hero .heroGrid .eyebrow {
    margin:0 0 11px!important;padding:6px 11px!important;
    font-size:10px!important;line-height:1.3!important;
    letter-spacing:.07em!important;white-space:normal!important;
    text-align:left!important;align-self:flex-start!important;
    width:auto!important;max-width:100%!important;
    background:rgba(48,151,93,.13)!important;color:#a4ecc0!important;
    border:1px solid rgba(90,225,139,.28)!important;
  }
  .site .hero .heroGrid h1 {
    text-align:left!important;white-space:normal!important;
    font-size:clamp(27px,7.2vw,34px)!important;line-height:1.1!important;
    letter-spacing:-.038em!important;width:auto!important;max-width:100%!important;
    margin:0 0 10px!important;color:#fff!important;
    text-shadow:none!important;
  }
  .site .hero .heroGrid h1 span {
    display:inline!important;white-space:normal!important;line-height:inherit!important;
    color:#62e384!important;
  }
  .site .hero .heroGrid > div:first-child > p:not(.pickupLine) {
    display:block!important;margin:0!important;padding:0!important;max-width:100%!important;
    font-size:13px!important;line-height:1.5!important;
    color:#d1e5e9!important;text-shadow:none!important;
  }
  .site .hero .heroGrid .pickupLine,.site .hero .heroSide{display:none!important}
  .site .hero .mockBenefits,.site .hero .mockBenefit,
  .site .hero .builderIntro,.site .hero .reactiveMenuIntro {
    display:none!important;
  }
  .site .hero .pricingShell{
    margin:0!important;padding:0!important;max-width:none!important;
    border:0!important;box-shadow:none!important;background:transparent!important;
    overflow:visible!important;
  }
  .site .hero .reactiveServiceMenu{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;align-items:stretch!important;
    gap:11px!important;margin:0 0 14px!important;padding:0!important;
  }
  .site .hero .reactiveServiceCard {
    min-width:0!important;min-height:0!important;border-radius:15px!important;
    background:#0d3047!important;border:1px solid #2c6071!important;
    box-shadow:0 6px 16px rgba(0,11,21,.1)!important;
  }
  .site .hero .reactiveServiceCard .reactiveCardSummary{
    min-height:182px!important;padding:12px 10px!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:flex-start!important;
    gap:6px!important;text-align:center!important;
  }
  .site .hero .reactiveServiceCard .reactiveImageWrap{
    display:grid!important;width:100%!important;height:96px!important;
    max-width:none!important;min-height:96px!important;
    background:radial-gradient(ellipse,#17445b 0%,#0a2e44 80%)!important;
    border-radius:10px!important;
  }
  .site .hero .reactiveServiceCard .reactiveImageWrap .productPhoto{
    display:block!important;object-fit:contain!important;
    width:100%!important;height:96px!important;max-width:95%!important;max-height:95px!important;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.19))!important;
  }
  .site .hero .reactiveServiceCard .reactiveCardCopy{
    min-height:57px!important;display:grid!important;
    justify-content:center!important;align-content:start!important;gap:4px!important;
    margin:0!important;
  }
  .site .hero .reactiveServiceCard .reactiveCardCopy strong{
    font-size:15px!important;line-height:1.18!important;
    font-weight:850!important;letter-spacing:-.01em!important;
  }
  .site .hero .reactiveServiceCard .reactiveCardCopy small{
    font-size:11px!important;line-height:1.28!important;
    color:#c4dce3!important;
  }
  .site .hero .reactiveServiceCard .reactiveCardCopy b{
    font-size:19px!important;color:#93f5aa!important;line-height:1.12!important;
  }
  /* Hide legacy bottom four-tab navigation. Customers access the order
     from the inline review button or the automatic post-selection cart. */
  .marketReadyDock{display:none!important}
  body.hasMarketReadyDock{padding-bottom:20px!important}
  body.hasMarketReadyDock .reactiveOrderBar{display:none!important}
  .site .hero .orderWrap{margin-top:10px!important}
  .optionBReviewOrderInline{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    width:100%!important;gap:12px!important;min-height:58px!important;
    padding:12px 14px!important;margin:0 0 15px!important;
    border-radius:12px!important;border:1px solid #75d499!important;
    background:#e9f8ed!important;color:#0c3545!important;text-align:left!important;
    box-shadow:0 6px 20px rgba(0,25,29,.15)!important;
    cursor:pointer!important;
  }
  .optionBReviewOrderInline>span:first-child{display:grid;gap:4px}
  .optionBReviewOrderInline strong{font-size:14px;font-weight:900}
  .optionBReviewOrderInline small{font-size:11px;color:#56757a}
  .optionBReviewOrderInline>span:last-child{white-space:nowrap;font-size:12px;font-weight:900;color:#0c7842}
  .site .hero .reactiveCartShell.is-open .reactiveCartSheet{height:100dvh!important}
  .mrSections{padding-top:15px!important}
}
@media (max-width:359px){
 .site .hero .heroGrid h1{font-size:25px!important}
 .site .hero .reactiveServiceCard .reactiveCardSummary{padding:9px 6px!important}
 .site .hero .reactiveServiceCard .reactiveCardCopy strong{font-size:13px!important}
}
@media (min-width:721px){
 .optionBReviewOrderInline{display:none!important}
}

/* Option B desktop visual parity. Override old display chrome, keep actual
   catalog pricing cells in DOM for add/edit events and Ads deep links. */
@media(min-width:721px){
 .site>.header{position:relative!important;top:auto!important;left:auto!important;right:auto!important;z-index:89!important;background:#092c41!important;border-bottom:1px solid rgba(169,222,211,.17)!important;box-shadow:none!important;backdrop-filter:none!important}
 .site>.header .nav{display:flex!important;align-items:center!important;justify-content:flex-start!important;height:76px!important;min-height:76px!important;width:min(1200px,calc(100% - 36px))!important;margin:auto!important;padding:0 12px!important}
 .site>.header .brand.brandExactLogo{width:168px!important;min-width:168px!important;height:76px!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important;padding:0!important;margin:0!important}
 .site>.header .brand.brandExactLogo .siteExactLogo,.site>.header .brand.brandExactLogo .desktopExactBrand{display:block!important;width:145px!important;height:74px!important;object-fit:contain!important;object-position:left center!important}
 .site>.header .nav>nav,.site>.header .nav>.navCta{display:none!important}
 .site>.mrQuickNav{display:flex!important;position:relative!important;z-index:3!important;justify-content:center!important;flex-wrap:wrap!important;gap:7px 18px!important;min-height:44px!important;margin:0!important;padding:8px 16px!important;background:#0c3448!important;border:0!important;border-bottom:1px solid rgba(169,222,211,.13)!important;box-shadow:none!important}
 .site>.mrQuickNav a{color:#d7e9eb!important;font-size:12px!important;font-weight:750!important;text-decoration:none!important;padding:5px 1px!important;white-space:nowrap!important}
 .site>.mrQuickNav a:hover{color:#95eab0!important}
 .site .hero{padding:26px 0 34px!important;background:linear-gradient(180deg,#0b2c40,#0b3444)!important}
 .site .hero>.wrap{width:min(1200px,calc(100% - 50px))!important;margin:0 auto!important;padding:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) 310px!important;gap:0 18px!important;align-items:start!important}
 .site .hero .heroGrid{grid-column:1/-1!important;grid-row:1!important;display:block!important;position:relative!important;min-height:0!important;height:auto!important;margin:0 0 21px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
 .site .hero .heroGrid>div:first-child{display:block!important;padding:0!important;margin:0!important;min-height:0!important;width:100%!important;max-width:100%!important}
 .site .hero .heroGrid .eyebrow{display:inline-flex!important;align-items:center!important;max-width:100%!important;margin:0 0 12px!important;padding:7px 12px!important;border:1px solid rgba(120,225,148,.28)!important;border-radius:100px!important;background:rgba(72,210,117,.09)!important;color:#a8efbd!important;font-size:11px!important;letter-spacing:.09em!important;line-height:1.25!important}
 .site .hero .heroGrid h1,.site .hero h1{font-size:clamp(33px,3.6vw,46px)!important;line-height:1.11!important;letter-spacing:-.04em!important;max-width:100%!important;margin:0 0 9px!important;color:white!important;text-shadow:none!important;white-space:normal!important}
 .site .hero .heroGrid h1 span{color:#70ed91!important;display:inline!important;white-space:normal!important}
 .site .hero .heroGrid>div:first-child>p:not(.pickupLine){display:block!important;font-size:15px!important;line-height:1.5!important;margin:0!important;color:#d5e7eb!important;text-shadow:none!important;max-width:840px!important}
 .site .hero .heroSide,.site .hero .heroSide.desktopHeroPhoto,.site .hero .heroPhotoCaption,.site .hero .mockBenefits,.site .hero .mockBenefit,.site .hero .builderIntro,.site .hero .reactiveMenuIntro,.site .hero .pickupDeliveryLine,.site .hero .trustStrip{display:none!important}
 .site .hero .heroSide.desktopHeroPhoto:before,.site .hero .heroSide.desktopHeroPhoto:after{display:none!important;content:none!important}
 .site .hero .reactiveServiceMenu{grid-column:1!important;grid-row:2!important;width:100%!important;margin:0!important;padding:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-items:stretch!important;gap:15px!important}
 .site .hero .reactiveServiceCard{min-width:0!important;min-height:0!important;display:flex!important;flex-direction:column!important;background:#0d334a!important;border:1px solid #346277!important;border-radius:16px!important;box-shadow:0 9px 24px rgba(0,16,30,.12)!important}
 .site .hero .reactiveCardSummary{min-height:147px!important;display:grid!important;grid-template-columns:105px minmax(0,1fr) 20px!important;gap:13px!important;align-items:center!important;padding:15px!important;text-align:left!important}
 .site .hero .reactiveImageWrap{display:grid!important;place-items:center!important;width:105px!important;height:106px!important;background:radial-gradient(ellipse,#184a60,#0c3047)!important;border:1px solid rgba(182,228,216,.15)!important;border-radius:12px!important;overflow:hidden!important}
 .site .hero .reactiveImageWrap .productPhoto{display:block!important;max-width:98%!important;max-height:105px!important;width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.2))}
 .site .hero .reactiveCardCopy{display:grid!important;align-content:center!important;gap:5px!important;min-width:0!important;text-align:left!important}
 .site .hero .reactiveCardCopy strong{font-size:17px!important;line-height:1.22!important;font-weight:850!important}
 .site .hero .reactiveCardCopy small{font-size:12px!important;line-height:1.32!important;color:#c5dbe3!important}
 .site .hero .reactiveCardCopy b{font-size:20px!important;line-height:1.1!important;color:#98f3ac!important}
 .site .hero .emptyOrderPanel,.site .hero .orderWrap{grid-column:2!important;grid-row:2!important;position:relative!important;top:0!important;align-self:start!important;margin:0!important;width:100%!important;min-height:0!important;border-radius:16px!important;box-shadow:0 12px 30px rgba(0,14,25,.14)!important}
 .site .hero .emptyOrderPanel{padding:18px!important}
 /* Keep legacy price-selection grid functional but not a competing second UI. */
 .site .hero .pricingShell{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important;grid-row:auto!important}
 .site .hero .pricingHead,.site .hero .pricingFoot{display:block}
 .site .hero .optionBReviewOrderInline{display:none!important}
}
@media(min-width:721px) and (max-width:1060px){
 .site .hero>.wrap{grid-template-columns:minmax(0,1fr) 280px!important}
 .site .hero .reactiveServiceMenu{gap:11px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .site .hero .reactiveCardSummary{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;text-align:center!important;padding:13px 10px!important;min-height:185px!important}
 .site .hero .reactiveImageWrap{width:100%!important;height:82px!important}
 .site .hero .reactiveImageWrap .productPhoto{max-height:81px!important}
 .site .hero .reactiveCardCopy{justify-items:center!important;text-align:center!important}
 .site .hero .reactiveChevron{display:none!important}
}

@media(min-width:721px){
 /* React maintains the first/second/third/fourth tier cells in the DOM; the
    premium service cards are now the only customer-facing selection surface. */
 body .site .hero .pricingShell{display:none!important;visibility:hidden!important}
}

/* Desktop Option B empty cart — replaces the old 3-item fake checkout sidebar. */
@media(min-width:721px){
 .site .hero .emptyOrderPanel.optionBEmptyOrder{
  grid-column:2!important;grid-row:2!important;align-self:start!important;
  display:block!important;position:relative!important;top:auto!important;
  min-height:0!important;height:auto!important;
  padding:22px!important;margin:0!important;
  border:1px solid rgba(120,192,174,.42)!important;border-radius:17px!important;
  background:linear-gradient(155deg,#0d3948,#0a2a42)!important;
  box-shadow:0 14px 36px rgba(0,20,31,.2)!important;
 }
 .optionBEmptyHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}
 .optionBEmptyEyebrow{font-size:11px;letter-spacing:.11em;font-weight:900;color:#a0ebbb}
 .optionBEmptyCount{padding:7px 10px;background:rgba(97,227,139,.15);border:1px solid #52a275;border-radius:999px;color:#bafbd0;font-size:12px;font-weight:850}
 .optionBEmptyOrder h3{font-size:24px!important;line-height:1.16!important;letter-spacing:-.04em!important;margin:0 0 11px!important;color:#fff!important}
 .optionBEmptyLead{font-size:14px!important;line-height:1.55!important;margin:0 0 19px!important;color:#cce1e7!important}
 .optionBEmptyBenefits{display:grid;gap:14px;padding:18px 0;border-top:1px solid rgba(175,219,219,.16);border-bottom:1px solid rgba(175,219,219,.16)}
 .optionBEmptyBenefits span{display:flex;align-items:center;gap:12px;color:#e7f3f3;font-size:13px;font-weight:750}
 .optionBEmptyBenefits b{display:grid;place-items:center;width:29px;height:29px;flex:0 0 29px;background:#1c604c;border-radius:9px;color:#b8ffd0;font-size:12px}
 .optionBEmptyPickup{display:grid;gap:7px;margin-top:21px}
 .optionBEmptyPickup strong{font-size:15px;color:#fff}
 .optionBEmptyPickup>span{font-size:12px;color:#cce0e3}
 .optionBEmptyPickup .emptyPickup{width:100%!important;display:block!important;min-height:45px!important;margin-top:7px!important;padding:11px!important;background:#e5f7e9!important;border:1px solid #9ddcad!important;border-radius:11px!important;color:#143b34!important;font-size:13px!important;font-weight:900!important;cursor:pointer!important}
 .optionBEmptyPickup .emptyPickup[aria-pressed=true]{background:#59e481!important}
 .optionBEmptyNote{margin:19px 0 0!important;color:#d3e2e6!important;text-align:center;font-size:12px!important}
}
@media(max-width:720px){.optionBEmptyOrder{display:none!important}}