/* DP Food v5.9.1 — mobile-first responsive layer */
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
@media(max-width:760px){
  :root{--mobile-gutter:14px;--mobile-radius:18px}
  body{font-size:15px}
  .page-shell{width:100%;overflow:hidden}

  /* Header: compact, touch-friendly, search always available */
  .site-header.sketch-header{position:sticky!important;top:0!important;z-index:100!important;background:#fff!important;height:auto!important;padding:0!important;display:block!important;box-shadow:0 4px 18px rgba(29,65,39,.06)!important}
  .service-bar{min-height:44px!important;height:44px!important;padding:0 var(--mobile-gutter)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;border-bottom:1px solid #edf1ec!important}
  .service-left{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;display:flex!important;align-items:center!important;gap:7px!important;font-size:11px!important;white-space:nowrap!important}
  .service-left span:nth-of-type(3),.service-left i{display:none!important}
  .truck-mini{width:18px!important;height:18px!important;flex:0 0 18px!important}
  .service-nav{display:none!important}
  .service-actions{display:flex!important;flex:0 0 auto!important;align-items:center!important;gap:6px!important;margin-left:auto!important;position:relative!important;z-index:3!important}
  .login-button,.ref-cart{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;padding:0!important;border-radius:12px!important;background:#f5f8f4!important;color:#244f34!important;visibility:visible!important;opacity:1!important}.ref-cart{position:relative!important}
  .login-button>span:not(.header-icon),.ref-cart>span:not(.header-icon):not(.cart-count){display:none!important}
  .header-icon{width:21px!important;height:21px!important;display:grid!important;place-items:center!important}
  .header-icon svg{width:21px!important;height:21px!important}
  .ref-cart .cart-count{right:-2px!important;top:-3px!important;min-width:18px!important;height:18px!important;font-size:10px!important}

  .main-bar.centered-search-bar{min-height:94px!important;padding:9px var(--mobile-gutter) 12px!important;display:grid!important;grid-template-columns:auto 1fr!important;grid-template-rows:40px 42px!important;gap:8px 10px!important;align-items:center!important}
  .centered-search-bar .company-logo-link{grid-column:1!important;grid-row:1!important;width:118px!important;min-width:118px!important;height:38px!important;display:flex!important;align-items:center!important;margin:0!important}
  .centered-search-bar .company-logo-header{width:108px!important;height:auto!important;max-height:38px!important;object-fit:contain!important;object-position:left center!important}
  .centered-search-bar .header-catalog-nav{display:block!important;grid-column:2!important;grid-row:1!important;justify-self:end!important;margin:0!important}
  .centered-search-bar .header-catalog-button{height:38px!important;padding:0 12px!important;border-radius:12px!important;font-size:12px!important;background:#eff6ee!important}
  .centered-search-bar .header-search{display:flex!important;grid-column:1/-1!important;grid-row:2!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
  .centered-search-bar .header-search input{height:42px!important;border-radius:13px!important;font-size:13px!important;padding-left:42px!important;box-shadow:none!important}
  .centered-search-bar .header-spacer{display:none!important}
  .header-catalog-dropdown{position:fixed!important;left:var(--mobile-gutter)!important;right:var(--mobile-gutter)!important;top:88px!important;width:auto!important;max-height:60vh!important;overflow:auto!important;border-radius:16px!important;z-index:150!important}
  .search-suggestions{position:fixed!important;left:var(--mobile-gutter)!important;right:var(--mobile-gutter)!important;top:130px!important;width:auto!important;max-height:55vh!important;overflow:auto!important;z-index:151!important}

  /* Hero */
  .sketch-hero.exact-reference-hero{height:390px!important;min-height:390px!important;background-position:61% center!important}
  .sketch-hero-copy.mobile-hero-copy{padding:54px 18px 0!important;width:100%!important;box-sizing:border-box!important}
  .sketch-hero h1{font-size:38px!important;line-height:1.02!important;letter-spacing:-1.3px!important;max-width:260px!important}
  .sketch-hero p{font-size:17px!important;line-height:1.35!important;max-width:245px!important;margin-top:12px!important}

  /* Benefits: compact 2x2 instead of a long column */
  .sketch-benefits{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;padding:8px var(--mobile-gutter)!important;background:#fff!important}
  .sketch-benefits article{min-width:0!important;padding:14px 8px!important;gap:9px!important;align-items:flex-start!important;border-bottom:1px solid #edf1ec!important}
  .sketch-benefits article:nth-child(odd){border-right:1px solid #edf1ec!important}
  .sketch-benefits article:nth-last-child(-n+2){border-bottom:0!important}
  .benefit-line-icon{width:30px!important;height:30px!important;flex:0 0 30px!important}
  .sketch-benefits strong{font-size:12px!important;line-height:1.25!important}
  .sketch-benefits p{font-size:10.5px!important;line-height:1.35!important;margin-top:3px!important}

  /* Sections */
  .fresh-section,.sketch-categories{padding-left:var(--mobile-gutter)!important;padding-right:var(--mobile-gutter)!important}
  .sketch-categories{padding-top:34px!important;padding-bottom:28px!important}
  .sketch-section-title{align-items:center!important;gap:10px!important}
  .sketch-section-title h2,.fresh-section h2{font-size:27px!important;line-height:1.08!important}
  .text-button{font-size:12px!important;white-space:nowrap!important}

  /* Categories */
  .sketch-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .sketch-category-card{height:124px!important;border-radius:16px!important;overflow:hidden!important}
  .sketch-category-card img{width:100%!important;height:100%!important;object-fit:cover!important}

  /* Product catalog: two columns on phones, dense but legible */
  .fresh-catalog{padding-top:34px!important;padding-bottom:52px!important}
  .catalog-category-nav{display:flex!important;overflow-x:auto!important;gap:8px!important;margin:0 calc(var(--mobile-gutter)*-1) 18px!important;padding:2px var(--mobile-gutter) 8px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  .catalog-category-nav::-webkit-scrollbar{display:none!important}
  .catalog-category-button{flex:0 0 auto!important;min-height:38px!important;padding:0 13px!important;font-size:12px!important;border-radius:999px!important}
  .fresh-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding-left:0!important;padding-right:0!important}
  .fresh-product-grid .product-card{min-height:330px!important;border-radius:16px!important;padding-bottom:12px!important}
  .fresh-product-grid .product-visual{height:158px!important}
  .fresh-product-grid .product-card h3{font-size:13px!important;line-height:1.25!important;margin:11px 10px 5px!important}
  .fresh-product-grid .meta{font-size:10.5px!important;margin:0 10px 7px!important}
  .fresh-product-grid .bulk-price{font-size:10px!important;line-height:1.3!important;margin:5px 10px 8px!important}
  .fresh-product-grid .product-card-actions{padding:0 10px!important;margin-top:auto!important}
  .fresh-product-grid .price-row{gap:6px!important}
  .fresh-product-grid .price{font-size:15px!important;line-height:1.15!important}
  .fresh-product-grid .add-button{width:40px!important;min-width:40px!important;height:40px!important;border-radius:12px!important}
  .fresh-product-grid .details-button{min-height:36px!important;font-size:11px!important}

  /* About */
  .approach-section{padding:48px var(--mobile-gutter) 52px!important}
  .approach-heading h2{font-size:30px!important}
  .approach-intro{font-size:14px!important}
  .approach-photo{min-height:280px!important}
  .approach-points{gap:9px!important}
  .approach-points article{padding:18px!important;gap:16px!important;border-radius:16px!important}
  .fresh-cta{margin:0 var(--mobile-gutter) 42px!important;padding:28px 20px!important;border-radius:20px!important}
  .fresh-cta h2{font-size:30px!important}

  /* Footer */
  footer{grid-template-columns:1fr 1fr!important;gap:28px 18px!important;padding:38px var(--mobile-gutter) 88px!important}
  footer>div:first-child{grid-column:1/-1!important}
  .company-logo-footer{max-width:150px!important}

  /* Product page */
  .product-page-main.full-product-main{padding:18px var(--mobile-gutter) 92px!important}
  .product-breadcrumb{font-size:10.5px!important;gap:5px!important;overflow-x:auto!important;white-space:nowrap!important;padding-bottom:6px!important;scrollbar-width:none!important}
  .premium-product-grid,.full-site-product-page .premium-product-grid{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
  .premium-product-grid::before,.premium-product-grid::after{display:none!important}
  .product-page-photo,.premium-product-photo{border-radius:18px!important;overflow:hidden!important;background:#f7f8f5!important}
  .product-page-photo img{width:100%!important;aspect-ratio:1/1!important;object-fit:cover!important}
  .product-gallery-thumbs{display:flex!important;grid-template-columns:none!important;gap:8px!important;overflow-x:auto!important;margin:9px -2px 0!important;padding:2px 2px 7px!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  .product-gallery-thumbs[hidden]{display:none!important}
  .product-gallery-thumbs::-webkit-scrollbar{display:none!important}
  .product-gallery-thumbs>*{flex:0 0 68px!important;width:68px!important;height:68px!important;border-radius:12px!important}
  .product-gallery-note{padding:12px!important;border-radius:14px!important;font-size:11px!important}
  .premium-product-info{padding:2px 0 0!important}
  .premium-product-info h1,.product-page-info h1{font-size:31px!important;line-height:1.05!important;margin-bottom:10px!important}
  .product-page-description{font-size:14px!important;line-height:1.55!important}
  .product-characteristics{margin-top:14px!important;padding:8px 13px!important;border-radius:14px!important}
  .product-characteristics>div{font-size:12px!important;padding:9px 0!important}
  .product-page-price-card{grid-template-columns:1fr!important;gap:8px!important;margin-top:15px!important}
  .product-page-price-card>div{border-radius:15px!important;padding:14px!important}
  .product-page-buy{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:90!important;display:grid!important;grid-template-columns:108px minmax(0,1fr)!important;gap:8px!important;margin:0!important;padding:10px max(var(--mobile-gutter),env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.96)!important;border-top:1px solid #e1e8e0!important;box-shadow:0 -10px 30px rgba(27,59,34,.10)!important;backdrop-filter:blur(12px)!important}
  .product-page-qty{height:48px!important;border-radius:14px!important}
  .product-page-add{min-height:48px!important;border-radius:14px!important;font-size:14px!important}
  .product-page-total{margin:12px 0 0!important;padding:13px 0!important;font-size:14px!important}
  .product-trust-grid{grid-template-columns:1fr!important;gap:8px!important;margin-top:14px!important}
  .product-trust-grid>div{padding:13px!important;border-radius:14px!important}
  .product-reviews-section{margin-top:32px!important;padding:0!important}
  .product-reviews-heading h2{font-size:26px!important}
  .product-review-card,.product-review-form,.product-reviews-empty{padding:16px!important;border-radius:15px!important}
  .related-products-section{padding-left:0!important;padding-right:0!important;margin-top:34px!important}
  .related-products-heading h2{font-size:25px!important}
  .related-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .product-page-toast{left:var(--mobile-gutter)!important;right:var(--mobile-gutter)!important;bottom:76px!important;width:auto!important;transform:translateY(20px)!important}
  .product-page-toast.show{transform:translateY(0)!important}

  /* Cart page */
  .cart-page-main{padding:22px var(--mobile-gutter) 88px!important}
  .cart-page-title-row{padding:16px!important;border-radius:18px!important;margin-bottom:16px!important}
  .cart-page-title-row h1{font-size:36px!important}
  .cart-page-layout{grid-template-columns:1fr!important;gap:14px!important}
  .cart-page-item{grid-template-columns:74px minmax(0,1fr)!important;gap:10px 12px!important;padding:12px!important;border-radius:17px!important}
  .cart-page-image{width:74px!important;height:74px!important;border-radius:13px!important}
  .cart-page-product-name{font-size:14px!important;margin-bottom:4px!important}
  .cart-page-unit,.cart-page-bulk{font-size:11px!important}
  .cart-page-qty{grid-column:2!important;justify-self:start!important}
  .cart-page-line-price{grid-column:2!important;text-align:left!important;min-width:0!important;display:flex!important;align-items:baseline!important;gap:8px!important}
  .cart-page-line-price strong{font-size:17px!important}
  .cart-page-summary{position:static!important;border-radius:18px!important;padding:18px!important}
  .cart-page-summary::before{margin:-18px -18px 16px!important}
  .cart-checkout-button{min-height:52px!important;border-radius:14px!important}

  /* Checkout modal */
  .checkout-modal{width:calc(100% - 12px)!important;max-height:calc(100dvh - 12px)!important;border-radius:18px!important}
  .checkout-layout{grid-template-columns:1fr!important}
  .checkout-header{padding:18px 18px 14px!important}
  .checkout-form,.checkout-summary{padding:18px 16px!important}
  .checkout-form{grid-template-columns:1fr!important}
  .full-field{grid-column:auto!important}
  .delivery-slots{overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:6px!important}
  .delivery-slot{flex:0 0 auto!important}

  /* Auth / account */
  .customer-auth-modal{width:calc(100% - 20px)!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important;padding:24px 18px!important;border-radius:20px!important}
  .customer-auth-modal h2{font-size:25px!important}
  .customer-auth-form input{min-height:48px!important;font-size:16px!important}
  .customer-auth-primary{min-height:50px!important}
  .account-page{padding:18px var(--mobile-gutter) 60px!important}
  .account-top{margin-bottom:16px!important;align-items:center!important;flex-direction:column!important}
  .account-logo{height:44px!important}
  .account-actions{width:100%!important}
  .account-actions .account-button{flex:1!important;text-align:center!important}
  .account-grid{grid-template-columns:1fr!important;gap:12px!important}
  .account-card{padding:18px!important;border-radius:18px!important}
  .account-card h1{font-size:28px!important}
  .customer-order{padding:14px!important;border-radius:14px!important}
  .customer-order-head,.customer-order-bottom{align-items:flex-start!important;flex-direction:column!important}
  .repeat-order{width:100%!important;min-height:44px!important}
}

@media(max-width:390px){
  .fresh-product-grid{gap:8px!important}
  .fresh-product-grid .product-card{min-height:305px!important}
  .fresh-product-grid .product-visual{height:142px!important}
  .fresh-product-grid .bulk-price{display:none!important}
  .fresh-product-grid .price{font-size:14px!important}
  .sketch-hero.exact-reference-hero{height:360px!important;min-height:360px!important}
  .sketch-hero h1{font-size:34px!important}
  .related-products-grid{grid-template-columns:1fr!important}
}


/* DP Food v5.9.3 — mobile UI aligned to approved reference */
@media (max-width:760px){
  :root{--mobile-gutter:12px}

  /* Header: two clean rows, visible delivery / login / cart */
  .site-header.sketch-header{
    box-shadow:0 3px 14px rgba(20,55,31,.055)!important;
  }
  .service-bar{
    height:52px!important;min-height:52px!important;
    padding:0 16px!important;
  }
  .service-left{
    font-size:12px!important;font-weight:650!important;
    color:#16251c!important;overflow:visible!important;
  }
  .service-left span:nth-of-type(2){display:inline!important}
  .truck-mini{width:22px!important;height:22px!important;flex-basis:22px!important;color:#20813d!important}
  .service-actions{gap:8px!important}
  .login-button,.ref-cart{
    width:auto!important;min-width:42px!important;height:42px!important;
    padding:0 9px!important;border-radius:12px!important;background:#fff!important;
    color:#173923!important;border:0!important;
  }
  .login-button>span:not(.header-icon){display:inline!important;font-size:12px!important;font-weight:700!important}
  .ref-cart>span:not(.header-icon):not(.cart-count){display:none!important}
  .header-icon,.header-icon svg{width:23px!important;height:23px!important}
  .ref-cart .cart-count{
    display:grid!important;place-items:center!important;
    right:-1px!important;top:-3px!important;background:#2b8a3e!important;color:#fff!important;
  }

  .main-bar.centered-search-bar{
    min-height:96px!important;
    padding:9px 14px 11px!important;
    grid-template-columns:128px minmax(0,1fr) 104px!important;
    grid-template-rows:64px!important;
    gap:9px!important;
  }
  .centered-search-bar .company-logo-link{
    grid-column:1!important;grid-row:1!important;
    width:128px!important;min-width:128px!important;height:64px!important;
    align-items:center!important;justify-content:flex-start!important;
  }
  .centered-search-bar .company-logo-header{
    width:118px!important;max-height:62px!important;height:auto!important;
    object-fit:contain!important;object-position:left center!important;
    image-rendering:auto!important;
    filter:contrast(1.08) saturate(1.08)!important;
  }
  .centered-search-bar .header-search{
    grid-column:2!important;grid-row:1!important;
    height:46px!important;align-self:center!important;
  }
  .centered-search-bar .header-search input{
    height:46px!important;border-radius:15px!important;
    border:1px solid #dce3dc!important;background:#fff!important;
    font-size:12px!important;padding-left:42px!important;padding-right:10px!important;
  }
  .centered-search-bar .header-catalog-nav{
    grid-column:3!important;grid-row:1!important;justify-self:stretch!important;
  }
  .centered-search-bar .header-catalog-button{
    width:100%!important;height:46px!important;padding:0 10px!important;
    border-radius:14px!important;background:#1d6d35!important;color:#fff!important;
    font-size:12px!important;font-weight:800!important;border:0!important;
  }
  .centered-search-bar .catalog-grid-icon i{background:currentColor!important}
  .centered-search-bar .catalog-chevron{display:none!important}
  .header-catalog-dropdown{top:146px!important}
  .search-suggestions{top:146px!important}

  /* Hero: sharp high-resolution photo, no milky veil over produce */
  .sketch-hero.exact-reference-hero{
    width:calc(100% - 24px)!important;
    height:300px!important;min-height:300px!important;
    margin:0 12px!important;border-radius:18px!important;
    background-image:url('assets/hero-photo-clean@2x.jpg')!important;
    background-size:cover!important;background-position:58% center!important;
    background-repeat:no-repeat!important;
    overflow:hidden!important;
  }
  .sketch-hero.exact-reference-hero::before{
    content:""!important;display:block!important;position:absolute!important;inset:0!important;
    background:linear-gradient(90deg,rgba(249,248,242,.98) 0%,rgba(249,248,242,.93) 31%,rgba(249,248,242,.46) 49%,rgba(249,248,242,.02) 68%)!important;
    z-index:1!important;
  }
  .sketch-hero.exact-reference-hero::after{display:none!important}
  .sketch-hero-copy.mobile-hero-copy{
    position:relative!important;z-index:2!important;
    padding:48px 0 0 20px!important;width:55%!important;max-width:55%!important;
  }
  .sketch-hero h1{
    font-family:Inter,Arial,sans-serif!important;
    font-size:33px!important;line-height:.98!important;letter-spacing:-1.5px!important;
    font-weight:850!important;color:#111d16!important;max-width:220px!important;
    margin:0!important;
  }
  .sketch-hero p{
    font-size:16px!important;line-height:1.28!important;font-weight:600!important;
    color:#26763b!important;max-width:205px!important;margin:16px 0 0!important;
  }
  .mobile-hero-cta{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;
    min-height:46px!important;margin-top:22px!important;padding:0 18px!important;
    border:0!important;border-radius:13px!important;background:#21833b!important;color:#fff!important;
    font-size:12px!important;font-weight:850!important;text-decoration:none!important;
    box-shadow:0 7px 18px rgba(32,116,54,.18)!important;
  }
  .mobile-hero-cta span{font-size:20px!important;line-height:1!important}

  /* Benefits: four compact columns like the reference */
  .sketch-benefits{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    margin:10px 12px 0!important;padding:12px 4px!important;
    border:1px solid #edf1ed!important;border-radius:16px!important;
    box-shadow:0 6px 20px rgba(26,59,36,.045)!important;
  }
  .sketch-benefits article{
    display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;
    gap:5px!important;padding:5px 6px!important;border-bottom:0!important;border-right:1px solid #edf1ed!important;
  }
  .sketch-benefits article:last-child{border-right:0!important}
  .sketch-benefits article:nth-child(odd){border-right:1px solid #edf1ed!important}
  .benefit-line-icon{width:28px!important;height:28px!important;flex-basis:28px!important}
  .sketch-benefits strong{font-size:9.5px!important;line-height:1.22!important}
  .sketch-benefits p{font-size:8.5px!important;line-height:1.3!important;margin:0!important}

  /* On mobile the category chooser is compact; products appear immediately */
  .sketch-categories{padding-top:26px!important;padding-bottom:8px!important}
  .sketch-section-title h2,.fresh-section h2{font-size:25px!important}
  .sketch-category-grid{
    display:flex!important;overflow-x:auto!important;gap:8px!important;
    margin:0 -12px!important;padding:4px 12px 10px!important;scrollbar-width:none!important;
  }
  .sketch-category-grid::-webkit-scrollbar{display:none!important}
  .sketch-category-card{
    flex:0 0 104px!important;width:104px!important;height:66px!important;border-radius:13px!important;
  }

  /* Product cards: fixed two-column layout, controls always stay inside card */
  .fresh-catalog{padding-top:20px!important}
  .fresh-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #productGrid .retail-product-card{
    min-width:0!important;min-height:0!important;border-radius:16px!important;
    overflow:hidden!important;
  }
  .retail-product-visual{aspect-ratio:1.18/1!important;height:auto!important}
  .retail-product-visual img{object-fit:cover!important}
  .retail-product-card .favorite{
    width:34px!important;height:34px!important;right:8px!important;top:8px!important;
  }
  .retail-card-body{min-width:0!important;padding:11px 10px 10px!important}
  .retail-card-heading{min-height:42px!important}
  .retail-card-heading h3{
    font-size:12px!important;line-height:1.2!important;
    display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
  }
  .retail-card-unit{font-size:10px!important;margin-top:4px!important}
  .retail-card-rating{display:none!important}
  .retail-main-price{margin-top:8px!important;gap:5px!important}
  .retail-main-price strong{font-size:18px!important}
  .retail-main-price span{font-size:9px!important}
  .retail-deal{
    min-width:0!important;margin-top:9px!important;padding:8px!important;gap:5px!important;border-radius:11px!important;
  }
  .retail-deal-copy span{font-size:8px!important}
  .retail-deal-copy strong{font-size:11px!important}
  .retail-deal-copy small{font-size:8px!important}
  .retail-save-badge{font-size:8px!important;padding:5px!important}
  .retail-deal-hint{
    min-height:29px!important;font-size:8px!important;line-height:1.25!important;padding-top:5px!important;
  }
  .retail-card-buy{
    width:100%!important;min-width:0!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:6px!important;padding-top:9px!important;
  }
  .retail-qty{
    width:100%!important;min-width:0!important;height:39px!important;
    grid-template-columns:1fr 1fr 1fr!important;border-radius:11px!important;
  }
  .retail-qty button{min-width:0!important;padding:0!important;font-size:17px!important}
  .retail-qty span{min-width:0!important;font-size:11px!important}
  .retail-add-button{
    width:100%!important;min-width:0!important;height:39px!important;padding:0 4px!important;
    border-radius:11px!important;font-size:10px!important;line-height:1.05!important;
    white-space:normal!important;overflow:hidden!important;
  }

  .catalog-section-title{margin-bottom:8px!important}
  .catalog-current-title{font-size:15px!important;margin-bottom:8px!important}
}

@media (max-width:390px){
  .main-bar.centered-search-bar{
    grid-template-columns:102px minmax(0,1fr) 88px!important;
    gap:6px!important;padding-left:10px!important;padding-right:10px!important;
  }
  .centered-search-bar .company-logo-link{width:102px!important;min-width:102px!important}
  .centered-search-bar .company-logo-header{width:96px!important}
  .centered-search-bar .header-catalog-button{font-size:10px!important;padding:0 7px!important}
  .centered-search-bar .header-search input{font-size:10px!important}
  .service-left{font-size:10px!important}
  .login-button>span:not(.header-icon){display:none!important}
  .sketch-hero.exact-reference-hero{height:280px!important;min-height:280px!important;background-position:60% center!important}
  .sketch-hero-copy.mobile-hero-copy{padding-top:42px!important;padding-left:17px!important}
  .sketch-hero h1{font-size:29px!important}
  .sketch-hero p{font-size:14px!important}
  .mobile-hero-cta{min-height:42px!important;padding:0 13px!important;font-size:10px!important}
  .sketch-benefits{margin-left:8px!important;margin-right:8px!important}
  .sketch-benefits strong{font-size:8.5px!important}
  .sketch-benefits p{font-size:7.5px!important}
  .retail-card-body{padding-left:8px!important;padding-right:8px!important}
  .retail-card-buy{gap:4px!important}
  .retail-add-button{font-size:9px!important}
}


/* DP Food v5.9.4 — mobile clarity, readability and no-flicker polish */
@media (max-width:760px){
  /* General mobile sharpness */
  body{
    -webkit-font-smoothing:antialiased!important;
    text-rendering:optimizeLegibility!important;
  }

  /* Header: clearer logo, search and real cart icon */
  .service-bar{
    min-height:58px!important;height:58px!important;
    padding:0 18px!important;
  }
  .service-left{
    font-size:13px!important;line-height:1.2!important;font-weight:760!important;
    letter-spacing:-.1px!important;
  }
  .truck-mini{width:25px!important;height:25px!important;flex-basis:25px!important}
  .service-actions{gap:10px!important}
  .login-button,.ref-cart{
    min-width:48px!important;height:48px!important;padding:0 10px!important;
  }
  .login-button{
    display:flex!important;flex-direction:column!important;gap:1px!important;
    align-items:center!important;justify-content:center!important;
  }
  .login-button>span:not(.header-icon){
    display:block!important;font-size:11px!important;line-height:1!important;font-weight:800!important;
  }
  .ref-cart{
    position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
    overflow:visible!important;
  }
  .ref-cart .header-icon{
    display:grid!important;place-items:center!important;
    width:27px!important;height:27px!important;min-width:27px!important;
    color:#173923!important;opacity:1!important;visibility:visible!important;
  }
  .ref-cart .header-icon svg{
    display:block!important;width:27px!important;height:27px!important;
    stroke:currentColor!important;opacity:1!important;
  }
  .ref-cart .cart-count{
    min-width:20px!important;height:20px!important;padding:0 5px!important;
    border-radius:999px!important;right:-2px!important;top:-4px!important;
    font-size:10px!important;font-weight:900!important;line-height:20px!important;
    box-shadow:0 0 0 2px #fff!important;
  }

  .main-bar.centered-search-bar{
    min-height:100px!important;
    padding:10px 16px 12px!important;
    grid-template-columns:118px minmax(0,1fr) 112px!important;
    grid-template-rows:68px!important;
    gap:10px!important;
  }
  .centered-search-bar .company-logo-link{
    width:118px!important;min-width:118px!important;height:68px!important;
  }
  .centered-search-bar .company-logo-header{
    width:112px!important;max-width:112px!important;max-height:68px!important;
    filter:contrast(1.18) saturate(1.12)!important;
    transform:translateZ(0)!important;
  }
  .centered-search-bar .header-search{height:50px!important}
  .centered-search-bar .header-search input{
    height:50px!important;border-radius:16px!important;
    border:1.25px solid #ced8d0!important;
    font-size:13px!important;font-weight:520!important;
    color:#1d2c22!important;
    padding-left:44px!important;padding-right:12px!important;
    box-shadow:0 1px 0 rgba(25,58,35,.03)!important;
  }
  .centered-search-bar .header-search input::placeholder{
    color:#77827a!important;opacity:1!important;
  }
  .header-search-button svg{width:22px!important;height:22px!important}
  .centered-search-bar .header-catalog-button{
    height:50px!important;border-radius:15px!important;
    font-size:13px!important;font-weight:850!important;
    box-shadow:0 4px 12px rgba(29,109,53,.12)!important;
  }
  .catalog-grid-icon{width:21px!important;height:21px!important;gap:3px!important}

  /* Hero: less haze, more photographic contrast and perceived sharpness */
  .sketch-hero.exact-reference-hero{
    height:306px!important;min-height:306px!important;
    background-position:61% center!important;
    box-shadow:0 7px 24px rgba(23,54,33,.06)!important;
  }
  .sketch-hero.exact-reference-hero::before{
    background:linear-gradient(
      90deg,
      rgba(249,248,242,.94) 0%,
      rgba(249,248,242,.84) 28%,
      rgba(249,248,242,.30) 48%,
      rgba(249,248,242,0) 66%
    )!important;
  }
  .sketch-hero h1{
    font-size:35px!important;line-height:.98!important;font-weight:900!important;
    letter-spacing:-1.65px!important;color:#0d1e14!important;
  }
  .sketch-hero p{
    font-size:17px!important;line-height:1.25!important;font-weight:700!important;
    color:#1e7136!important;
  }
  .mobile-hero-cta{
    min-height:50px!important;padding:0 20px!important;
    font-size:13px!important;font-weight:900!important;border-radius:14px!important;
  }

  /* Benefits: keep 4-column reference but make it actually readable */
  .sketch-benefits{
    margin-top:12px!important;
    padding:15px 5px 14px!important;
    min-height:132px!important;
    border-color:#dfe8e1!important;
    box-shadow:0 6px 19px rgba(24,55,34,.06)!important;
  }
  .sketch-benefits article{
    gap:7px!important;padding:4px 7px!important;
  }
  .benefit-line-icon{
    width:35px!important;height:35px!important;flex-basis:35px!important;
    color:#1d7a38!important;
  }
  .benefit-line-icon svg{width:35px!important;height:35px!important;stroke-width:1.8!important}
  .sketch-benefits strong{
    font-size:10.5px!important;line-height:1.22!important;font-weight:850!important;
    color:#111d16!important;
  }
  .sketch-benefits p{
    font-size:9.5px!important;line-height:1.28!important;
    color:#687169!important;
  }

  /* Section headings */
  .sketch-categories{padding-top:30px!important}
  .sketch-section-title h2,.fresh-section h2{
    font-size:28px!important;line-height:1.05!important;font-weight:900!important;
    letter-spacing:-.7px!important;
  }
  .sketch-section-title .text-button{
    font-size:13px!important;font-weight:800!important;
  }

  /* Categories: no tiny cards; large swipeable cards */
  .sketch-category-grid{
    gap:10px!important;padding-top:7px!important;padding-bottom:13px!important;
  }
  .sketch-category-card{
    flex:0 0 154px!important;width:154px!important;height:94px!important;
    border-radius:15px!important;
    border:1px solid #e1e8e2!important;
    box-shadow:0 3px 10px rgba(25,58,35,.045)!important;
    overflow:hidden!important;
  }
  .sketch-category-card img{
    width:100%!important;height:100%!important;object-fit:cover!important;
    image-rendering:auto!important;
  }

  /* Catalog chips */
  .catalog-category-nav{
    gap:8px!important;margin-bottom:12px!important;
    overflow-x:auto!important;scrollbar-width:none!important;
  }
  .catalog-category-nav::-webkit-scrollbar{display:none!important}
  .catalog-category-button{
    flex:0 0 auto!important;min-height:38px!important;padding:0 14px!important;
    border-radius:999px!important;font-size:11px!important;font-weight:800!important;
  }
  .catalog-current-title{font-size:16px!important;font-weight:850!important}

  /* Product cards: sharper boundaries and readable typography */
  .fresh-product-grid{gap:11px!important}
  #productGrid .retail-product-card{
    border:1px solid #dfe7e0!important;
    box-shadow:0 5px 16px rgba(25,58,35,.055)!important;
    background:#fff!important;
    contain:layout paint!important;
  }
  .retail-product-visual{
    background:#f8faf8!important;
    overflow:hidden!important;
  }
  .retail-product-visual img{
    object-fit:cover!important;
    transition:none!important;
    transform:none!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    image-rendering:auto!important;
  }
  .retail-product-card:hover .retail-product-visual img,
  .retail-product-card:active .retail-product-visual img{
    transform:none!important;
  }
  .retail-product-card .favorite{
    width:38px!important;height:38px!important;font-size:22px!important;
    border:1px solid #e0e8e2!important;
  }
  .retail-card-body{padding:12px 10px 11px!important}
  .retail-card-heading{min-height:47px!important}
  .retail-card-heading h3{
    font-size:13px!important;line-height:1.22!important;font-weight:850!important;
    color:#142219!important;
  }
  .retail-card-unit{
    font-size:11px!important;line-height:1.2!important;color:#727b74!important;
  }
  .retail-main-price{margin-top:9px!important}
  .retail-main-price strong{
    font-size:20px!important;line-height:1!important;font-weight:900!important;color:#0b4b27!important;
  }
  .retail-main-price span{font-size:10px!important;color:#717a73!important}

  .retail-deal{
    margin-top:10px!important;padding:9px!important;border-radius:12px!important;
    border:1px solid #dceade!important;
  }
  .retail-deal-copy span{font-size:9px!important;line-height:1.2!important;font-weight:700!important}
  .retail-deal-copy strong{font-size:13px!important;line-height:1.15!important;font-weight:900!important}
  .retail-deal-copy small{font-size:9px!important}
  .retail-save-badge{
    font-size:9px!important;font-weight:900!important;padding:6px 7px!important;
  }
  .retail-deal-hint{
    min-height:32px!important;font-size:9px!important;line-height:1.3!important;
    color:#788079!important;padding-top:6px!important;
  }

  /* Controls: readable, tappable, always inside the card */
  .retail-card-buy{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
    gap:7px!important;padding-top:10px!important;
  }
  .retail-qty{
    height:43px!important;border-radius:12px!important;border-width:1.2px!important;
  }
  .retail-qty button{
    min-height:43px!important;font-size:19px!important;font-weight:850!important;
    touch-action:manipulation!important;
  }
  .retail-qty span{font-size:13px!important;font-weight:850!important}
  .retail-add-button{
    height:43px!important;min-height:43px!important;
    padding:0 7px!important;border-radius:12px!important;
    font-size:11px!important;line-height:1.05!important;font-weight:900!important;
    white-space:nowrap!important;text-overflow:clip!important;
    touch-action:manipulation!important;
    transition:background-color .15s ease,transform .08s ease!important;
  }
  .retail-add-button:active{transform:scale(.985)!important}

  /* Prevent mobile taps from triggering expensive hover animation */
  @media (hover:none){
    .product-card:hover,.retail-product-card:hover{transform:none!important;box-shadow:0 5px 16px rgba(25,58,35,.055)!important}
    .product-visual img,.retail-product-visual img{transition:none!important}
  }
}

@media (max-width:430px){
  .main-bar.centered-search-bar{
    grid-template-columns:106px minmax(0,1fr) 102px!important;
    gap:7px!important;padding-left:11px!important;padding-right:11px!important;
  }
  .centered-search-bar .company-logo-link{width:106px!important;min-width:106px!important}
  .centered-search-bar .company-logo-header{width:102px!important}
  .centered-search-bar .header-search input{font-size:12px!important;padding-left:39px!important}
  .centered-search-bar .header-catalog-button{font-size:11px!important}
  .service-bar{padding-left:12px!important;padding-right:12px!important}
  .service-left{font-size:11.5px!important}
  .sketch-hero h1{font-size:32px!important}
  .sketch-hero p{font-size:15.5px!important}
  .sketch-benefits strong{font-size:10px!important}
  .sketch-benefits p{font-size:9px!important}
  .benefit-line-icon,.benefit-line-icon svg{width:32px!important;height:32px!important}
  .retail-card-body{padding-left:8px!important;padding-right:8px!important}
  .retail-card-buy{gap:5px!important}
  .retail-add-button{font-size:10px!important;padding-left:4px!important;padding-right:4px!important}
  .retail-qty button{font-size:18px!important}
}

@media (max-width:760px){
  .retail-add-button.added{
    background:#145b2c!important;
    box-shadow:0 0 0 2px rgba(35,126,61,.10)!important;
  }
}


/* DP Food v5.9.5 — iPhone search focus + working favorites */
@media (max-width:760px){
  /* iOS Safari zooms form controls whose font-size is below 16px. */
  .centered-search-bar .header-search input,
  #searchInput{
    font-size:16px!important;
    line-height:1.2!important;
  }

  .catalog-favorites-button{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
  }
  .catalog-favorites-button > span:first-child{
    color:#27833e!important;
    font-size:15px!important;
    line-height:1!important;
  }
  .favorites-count{
    display:inline-grid!important;
    place-items:center!important;
    min-width:19px!important;
    height:19px!important;
    padding:0 5px!important;
    margin-left:1px!important;
    border-radius:999px!important;
    background:#27833e!important;
    color:white!important;
    font-size:10px!important;
    font-weight:900!important;
  }
  .favorites-count[hidden]{display:none!important}

  .retail-product-card .favorite{
    z-index:6!important;
    display:grid!important;
    place-items:center!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    color:#1d6d35!important;
    background:rgba(255,255,255,.96)!important;
    transition:transform .12s ease,background-color .12s ease,color .12s ease!important;
  }
  .retail-product-card .favorite.active{
    color:#24853e!important;
    background:#eef8f0!important;
  }
  .retail-product-card .favorite:active{
    transform:scale(.90)!important;
  }
}

@media (max-width:430px){
  .centered-search-bar .header-search input,
  #searchInput{
    font-size:16px!important;
  }
}


/* DP Food v5.9.6 — mobile header/hero matched to approved reference */
@media (max-width:760px){
  /* ---------- Top utility row ---------- */
  .service-bar{
    height:58px!important;
    min-height:58px!important;
    padding:0 18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    border-bottom:1px solid #ecefec!important;
    background:#fff!important;
  }

  .service-left{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    flex:1 1 auto!important;
    min-width:0!important;
    font-size:13px!important;
    font-weight:700!important;
    color:#171d18!important;
    white-space:nowrap!important;
  }

  .service-left .truck-mini{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    color:#25843e!important;
  }

  .service-actions{
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    flex:0 0 auto!important;
    margin-left:12px!important;
  }

  .login-button,
  .ref-cart{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    color:#161b17!important;
  }

  .login-button{
    height:58px!important;
    min-width:92px!important;
    padding:0 16px 0 10px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    position:relative!important;
  }

  .login-button::after{
    content:""!important;
    position:absolute!important;
    right:0!important;
    top:15px!important;
    width:1px!important;
    height:28px!important;
    background:#e4e7e4!important;
  }

  .login-button .header-icon{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
  }

  .login-button .header-icon svg{
    width:25px!important;
    height:25px!important;
    stroke-width:1.8!important;
  }

  .login-button>span:not(.header-icon){
    display:inline!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .ref-cart{
    width:58px!important;
    min-width:58px!important;
    height:58px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
  }

  .ref-cart .header-icon{
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    display:block!important;
    color:#111813!important;
  }

  .ref-cart .header-icon svg{
    display:block!important;
    width:29px!important;
    height:29px!important;
    stroke-width:1.8!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .ref-cart .cart-count{
    position:absolute!important;
    right:2px!important;
    top:5px!important;
    min-width:19px!important;
    height:19px!important;
    padding:0 5px!important;
    border-radius:999px!important;
    background:#27873f!important;
    color:#fff!important;
    display:grid!important;
    place-items:center!important;
    font-size:10px!important;
    font-weight:900!important;
    line-height:19px!important;
    box-shadow:none!important;
  }

  /* ---------- Second row: logo / search / catalog ---------- */
  .main-bar.centered-search-bar{
    min-height:110px!important;
    height:110px!important;
    padding:12px 18px!important;
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr) 150px!important;
    grid-template-rows:86px!important;
    gap:18px!important;
    align-items:center!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(23,55,34,.04)!important;
  }

  .centered-search-bar .company-logo-link{
    grid-column:1!important;
    grid-row:1!important;
    width:150px!important;
    min-width:150px!important;
    height:86px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }

  .centered-search-bar .company-logo-header{
    width:138px!important;
    max-width:138px!important;
    height:auto!important;
    max-height:84px!important;
    object-fit:contain!important;
    object-position:left center!important;
    filter:contrast(1.22) saturate(1.12)!important;
    image-rendering:auto!important;
  }

  .centered-search-bar .header-search{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    height:58px!important;
    align-self:center!important;
    margin:0!important;
  }

  .centered-search-bar .header-search input,
  #searchInput{
    width:100%!important;
    height:58px!important;
    border:1.3px solid #d6dcd7!important;
    border-radius:18px!important;
    background:#fff!important;
    color:#1d241f!important;
    font-size:16px!important;
    line-height:1.2!important;
    font-weight:500!important;
    padding-left:54px!important;
    padding-right:16px!important;
    box-shadow:none!important;
  }

  .centered-search-bar .header-search input::placeholder,
  #searchInput::placeholder{
    color:#747c76!important;
    opacity:1!important;
  }

  .header-search-button{
    left:16px!important;
    width:28px!important;
    height:28px!important;
  }

  .header-search-button svg{
    width:26px!important;
    height:26px!important;
    stroke-width:1.9!important;
  }

  .centered-search-bar .header-catalog-nav{
    grid-column:3!important;
    grid-row:1!important;
    width:150px!important;
    min-width:150px!important;
    justify-self:end!important;
  }

  .centered-search-bar .header-catalog-button{
    width:150px!important;
    height:58px!important;
    padding:0 18px!important;
    border:0!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#237b39 0%,#1d6831 100%)!important;
    color:#fff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:13px!important;
    font-size:16px!important;
    font-weight:800!important;
    box-shadow:0 5px 12px rgba(29,104,49,.15)!important;
  }

  .centered-search-bar .catalog-grid-icon{
    width:24px!important;
    height:24px!important;
    grid-template-columns:repeat(2,8px)!important;
    grid-template-rows:repeat(2,8px)!important;
    gap:4px!important;
  }

  .centered-search-bar .catalog-grid-icon i{
    width:8px!important;
    height:8px!important;
    border-radius:3px!important;
    background:#fff!important;
  }

  .centered-search-bar .catalog-chevron{
    display:none!important;
  }

  /* ---------- Hero ---------- */
  .sketch-hero.exact-reference-hero{
    width:calc(100% - 36px)!important;
    margin:14px 18px 0!important;
    height:350px!important;
    min-height:350px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background-image:url('assets/hero-photo-clean@2x.jpg')!important;
    background-size:cover!important;
    background-position:62% center!important;
    background-repeat:no-repeat!important;
    box-shadow:0 6px 18px rgba(24,55,35,.045)!important;
  }

  .sketch-hero.exact-reference-hero::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(
      90deg,
      rgba(249,248,242,.99) 0%,
      rgba(249,248,242,.94) 29%,
      rgba(249,248,242,.55) 43%,
      rgba(249,248,242,.12) 57%,
      rgba(249,248,242,0) 68%
    )!important;
    z-index:1!important;
  }

  .sketch-hero-copy.mobile-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:49%!important;
    max-width:49%!important;
    padding:54px 0 0 30px!important;
  }

  .sketch-hero h1{
    margin:0!important;
    max-width:320px!important;
    font-size:48px!important;
    line-height:.98!important;
    letter-spacing:-2.2px!important;
    font-weight:900!important;
    color:#101813!important;
  }

  .sketch-hero p{
    max-width:300px!important;
    margin:20px 0 0!important;
    font-size:22px!important;
    line-height:1.24!important;
    font-weight:600!important;
    color:#23763a!important;
  }

  .mobile-hero-cta{
    margin-top:30px!important;
    min-height:58px!important;
    padding:0 28px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#2a963f 0%,#218138 100%)!important;
    color:#fff!important;
    font-size:17px!important;
    font-weight:850!important;
    gap:20px!important;
    box-shadow:0 6px 14px rgba(33,129,56,.16)!important;
  }

  .mobile-hero-cta span{
    font-size:28px!important;
    line-height:1!important;
    font-weight:400!important;
  }

  /* keep dropdowns aligned below new header */
  .header-catalog-dropdown,
  .search-suggestions{
    top:168px!important;
  }
}

/* Actual iPhone width: preserve the same composition, only scale proportionally */
@media (max-width:430px){
  .service-bar{
    height:54px!important;
    min-height:54px!important;
    padding:0 12px!important;
  }

  .service-left{
    gap:7px!important;
    font-size:11px!important;
  }

  .service-left .truck-mini{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
  }

  .login-button{
    min-width:74px!important;
    height:54px!important;
    padding:0 12px 0 8px!important;
    gap:6px!important;
  }

  .login-button::after{
    top:14px!important;
    height:26px!important;
  }

  .login-button .header-icon,
  .login-button .header-icon svg{
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
  }

  .login-button>span:not(.header-icon){
    font-size:11px!important;
  }

  .ref-cart{
    width:50px!important;
    min-width:50px!important;
    height:54px!important;
  }

  .ref-cart .header-icon,
  .ref-cart .header-icon svg{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
  }

  .ref-cart .cart-count{
    right:0!important;
    top:4px!important;
  }

  .main-bar.centered-search-bar{
    min-height:92px!important;
    height:92px!important;
    padding:9px 12px!important;
    grid-template-columns:94px minmax(0,1fr) 102px!important;
    grid-template-rows:74px!important;
    gap:8px!important;
  }

  .centered-search-bar .company-logo-link{
    width:94px!important;
    min-width:94px!important;
    height:74px!important;
  }

  .centered-search-bar .company-logo-header{
    width:92px!important;
    max-width:92px!important;
    max-height:72px!important;
  }

  .centered-search-bar .header-search{
    height:50px!important;
  }

  .centered-search-bar .header-search input,
  #searchInput{
    height:50px!important;
    border-radius:15px!important;
    font-size:16px!important;
    padding-left:42px!important;
    padding-right:8px!important;
  }

  .header-search-button{
    left:11px!important;
  }

  .header-search-button svg{
    width:22px!important;
    height:22px!important;
  }

  .centered-search-bar .header-catalog-nav,
  .centered-search-bar .header-catalog-button{
    width:102px!important;
    min-width:102px!important;
  }

  .centered-search-bar .header-catalog-button{
    height:50px!important;
    padding:0 9px!important;
    border-radius:14px!important;
    gap:8px!important;
    font-size:12px!important;
  }

  .centered-search-bar .catalog-grid-icon{
    width:20px!important;
    height:20px!important;
    grid-template-columns:repeat(2,7px)!important;
    grid-template-rows:repeat(2,7px)!important;
    gap:3px!important;
  }

  .centered-search-bar .catalog-grid-icon i{
    width:7px!important;
    height:7px!important;
  }

  .sketch-hero.exact-reference-hero{
    width:calc(100% - 24px)!important;
    margin:10px 12px 0!important;
    height:310px!important;
    min-height:310px!important;
    border-radius:16px!important;
    background-position:63% center!important;
  }

  .sketch-hero-copy.mobile-hero-copy{
    width:52%!important;
    max-width:52%!important;
    padding:44px 0 0 20px!important;
  }

  .sketch-hero h1{
    max-width:210px!important;
    font-size:34px!important;
    line-height:.98!important;
    letter-spacing:-1.5px!important;
  }

  .sketch-hero p{
    max-width:190px!important;
    margin-top:17px!important;
    font-size:16px!important;
    line-height:1.23!important;
  }

  .mobile-hero-cta{
    margin-top:22px!important;
    min-height:48px!important;
    padding:0 18px!important;
    border-radius:13px!important;
    font-size:12px!important;
    gap:15px!important;
  }

  .mobile-hero-cta span{
    font-size:22px!important;
  }

  .header-catalog-dropdown,
  .search-suggestions{
    top:146px!important;
  }
}


/* DP Food v5.9.7 — search geometry, portrait-like landscape, hero text separation */
@media (max-width:760px){
  /* Search: one clean control, no layers colliding with each other */
  .centered-search-bar .header-search{
    position:relative!important;
    display:block!important;
    min-width:0!important;
    width:100%!important;
    overflow:visible!important;
    isolation:isolate!important;
  }
  .centered-search-bar .header-search input,
  #searchInput{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    appearance:none!important;
    -webkit-appearance:none!important;
  }
  .header-search-button,
  .search-button-left{
    position:absolute!important;
    z-index:3!important;
    top:50%!important;
    left:14px!important;
    right:auto!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    pointer-events:auto!important;
  }
  .search-suggestions{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Hero: text owns the left zone; product photography owns the right zone */
  .sketch-hero.exact-reference-hero{
    background-position:70% center!important;
  }
  .sketch-hero.exact-reference-hero::before{
    background:linear-gradient(
      90deg,
      rgba(249,248,242,1) 0%,
      rgba(249,248,242,.99) 35%,
      rgba(249,248,242,.94) 47%,
      rgba(249,248,242,.50) 55%,
      rgba(249,248,242,.08) 64%,
      rgba(249,248,242,0) 72%
    )!important;
  }
  .sketch-hero-copy.mobile-hero-copy{
    width:47%!important;
    max-width:47%!important;
    padding-right:8px!important;
    box-sizing:border-box!important;
  }
  .sketch-hero h1,
  .sketch-hero p{
    max-width:100%!important;
  }
}

/* iPhone portrait geometry — give search more physical width */
@media (max-width:430px){
  .main-bar.centered-search-bar{
    grid-template-columns:88px minmax(0,1fr) 96px!important;
    gap:8px!important;
  }
  .centered-search-bar .company-logo-link{
    width:88px!important;
    min-width:88px!important;
  }
  .centered-search-bar .company-logo-header{
    width:86px!important;
    max-width:86px!important;
  }
  .centered-search-bar .header-catalog-nav,
  .centered-search-bar .header-catalog-button{
    width:96px!important;
    min-width:96px!important;
  }
  .centered-search-bar .header-search input,
  #searchInput{
    padding-left:40px!important;
    padding-right:8px!important;
  }

  .sketch-hero.exact-reference-hero{
    background-position:72% center!important;
  }
  .sketch-hero-copy.mobile-hero-copy{
    width:46%!important;
    max-width:46%!important;
    padding-left:18px!important;
    padding-right:4px!important;
  }
  .sketch-hero h1{
    font-size:31px!important;
    line-height:1!important;
    letter-spacing:-1.25px!important;
  }
  .sketch-hero p{
    font-size:14.5px!important;
    line-height:1.25!important;
  }
  .mobile-hero-cta{
    padding-left:15px!important;
    padding-right:15px!important;
    gap:11px!important;
  }
}

/*
  Keep the phone UI visually in portrait mode after rotating the device.
  We intentionally preserve a 430 px content column and center it, instead of
  reflowing the site into a tablet/desktop-like landscape layout.
*/
@media (orientation:landscape) and (max-height:500px) and (hover:none){
  html{
    background:#f4f6f4!important;
    overflow-x:auto!important;
  }
  body{
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
    margin:0 auto!important;
    overflow-x:hidden!important;
    background:#fff!important;
    box-shadow:0 0 30px rgba(18,46,28,.08)!important;
  }

  .service-bar{
    height:54px!important;
    min-height:54px!important;
    padding:0 12px!important;
  }
  .service-left{
    gap:7px!important;
    font-size:11px!important;
  }
  .login-button{
    min-width:74px!important;
    height:54px!important;
    padding:0 12px 0 8px!important;
    gap:6px!important;
  }
  .login-button>span:not(.header-icon){font-size:11px!important}
  .ref-cart{
    width:50px!important;
    min-width:50px!important;
    height:54px!important;
  }

  .main-bar.centered-search-bar{
    width:430px!important;
    min-width:430px!important;
    max-width:430px!important;
    min-height:92px!important;
    height:92px!important;
    padding:9px 12px!important;
    grid-template-columns:88px minmax(0,1fr) 96px!important;
    grid-template-rows:74px!important;
    gap:8px!important;
    box-sizing:border-box!important;
  }
  .centered-search-bar .company-logo-link{
    width:88px!important;
    min-width:88px!important;
    height:74px!important;
  }
  .centered-search-bar .company-logo-header{
    width:86px!important;
    max-width:86px!important;
    max-height:72px!important;
  }
  .centered-search-bar .header-search{height:50px!important}
  .centered-search-bar .header-search input,
  #searchInput{
    height:50px!important;
    border-radius:15px!important;
    font-size:16px!important;
    padding-left:40px!important;
    padding-right:8px!important;
  }
  .centered-search-bar .header-catalog-nav,
  .centered-search-bar .header-catalog-button{
    width:96px!important;
    min-width:96px!important;
  }
  .centered-search-bar .header-catalog-button{
    height:50px!important;
    border-radius:14px!important;
    font-size:12px!important;
    padding:0 8px!important;
  }

  .sketch-hero.exact-reference-hero{
    width:406px!important;
    max-width:406px!important;
    margin:10px 12px 0!important;
    height:310px!important;
    min-height:310px!important;
    border-radius:16px!important;
    background-position:72% center!important;
  }
  .sketch-hero-copy.mobile-hero-copy{
    width:46%!important;
    max-width:46%!important;
    padding:44px 4px 0 18px!important;
  }
  .sketch-hero h1{
    font-size:31px!important;
    line-height:1!important;
    letter-spacing:-1.25px!important;
  }
  .sketch-hero p{
    margin-top:17px!important;
    font-size:14.5px!important;
    line-height:1.25!important;
  }
  .mobile-hero-cta{
    margin-top:22px!important;
    min-height:48px!important;
    padding:0 15px!important;
    border-radius:13px!important;
    font-size:12px!important;
    gap:11px!important;
  }

  .header-catalog-dropdown,
  .search-suggestions{
    top:146px!important;
  }
}


/* DP Food v5.9.8 — favorite button on individual product page */
@media (max-width:760px){
  .product-page-photo,
  .premium-product-photo{
    position:relative!important;
  }

  .product-page-favorite{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    z-index:8!important;
    width:46px!important;
    height:46px!important;
    border-radius:50%!important;
    border:1px solid #dfe7e1!important;
    background:rgba(255,255,255,.96)!important;
    color:#237b3a!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    font-size:29px!important;
    line-height:1!important;
    font-family:Arial,sans-serif!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    box-shadow:0 4px 12px rgba(25,58,35,.08)!important;
    transition:transform .12s ease,background-color .12s ease,color .12s ease!important;
  }

  .product-page-favorite.active{
    background:#eef8f0!important;
    color:#27873f!important;
    border-color:#cae4d0!important;
  }

  .product-page-favorite:active{
    transform:scale(.91)!important;
  }
}


/* DP Food v5.9.9 — mobile product quantity +/- alignment */
@media (max-width:760px){
  .product-page-qty,
  .premium-product-qty,
  .product-quantity-control,
  .product-buy-qty,
  .qty-control{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:center!important;
    width:100%!important;
    overflow:hidden!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  .product-page-qty button,
  .premium-product-qty button,
  .product-quantity-control button,
  .product-buy-qty button,
  .qty-control button{
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    line-height:1!important;
    text-align:center!important;
    font-size:20px!important;
    font-weight:750!important;
    transform:none!important;
  }

  .product-page-qty > span,
  .premium-product-qty > span,
  .product-quantity-control > span,
  .product-buy-qty > span,
  .qty-control > span{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
}


/* DP Food v5.10.0 — cart mobile typography */
@media (max-width:760px){
  .cart-page-title,
  .cart-page h1,
  .cart-main h1,
  main.cart-page h1{
    font-size:28px!important;
    line-height:1.05!important;
    font-weight:900!important;
    letter-spacing:-.7px!important;
    margin-bottom:18px!important;
    color:#101813!important;
  }

  .cart-items-count,
  .cart-count-label,
  .cart-products-count,
  [data-cart-items-count],
  [data-cart-count-label]{
    display:none!important;
  }
}


/* DP Food v5.10.1 — harmonized benefits grid below hero CTA */
@media (max-width:760px){
  .sketch-benefits{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:0!important;
    padding:14px 4px 13px!important;
    min-height:132px!important;
    box-sizing:border-box!important;
  }

  .sketch-benefits article{
    display:grid!important;
    grid-template-rows:38px 30px 34px!important;
    align-items:start!important;
    justify-items:center!important;
    align-content:start!important;
    row-gap:4px!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    padding:2px 8px!important;
    box-sizing:border-box!important;
    text-align:center!important;
  }

  .sketch-benefits article:not(:last-child){
    border-right:1px solid #e5ebe6!important;
  }

  .benefit-line-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    margin:0!important;
    align-self:start!important;
  }

  .benefit-line-icon svg{
    display:block!important;
    width:34px!important;
    height:34px!important;
    margin:0!important;
  }

  .sketch-benefits strong{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100%!important;
    min-height:30px!important;
    margin:0!important;
    padding:0!important;
    font-size:10px!important;
    line-height:1.18!important;
    font-weight:850!important;
    letter-spacing:-.12px!important;
    text-align:center!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  .sketch-benefits p{
    display:block!important;
    width:100%!important;
    min-height:34px!important;
    margin:0!important;
    padding:0!important;
    font-size:9px!important;
    line-height:1.25!important;
    font-weight:500!important;
    letter-spacing:0!important;
    text-align:center!important;
    color:#687169!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}

@media (max-width:430px){
  .sketch-benefits{
    padding-left:2px!important;
    padding-right:2px!important;
    min-height:128px!important;
  }

  .sketch-benefits article{
    grid-template-rows:35px 30px 33px!important;
    padding-left:5px!important;
    padding-right:5px!important;
    row-gap:3px!important;
  }

  .benefit-line-icon,
  .benefit-line-icon svg{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
  }

  .sketch-benefits strong{
    font-size:9.2px!important;
    line-height:1.18!important;
  }

  .sketch-benefits p{
    font-size:8.2px!important;
    line-height:1.23!important;
  }
}


/* DP Food v5.10.2 — hard fix for mobile search overlap + hero text/photo collision */
@media (max-width:760px){

  /* ===== SEARCH: one box, one icon, no overlapping legacy layers ===== */
  .main-bar.centered-search-bar{
    overflow:visible!important;
  }

  .centered-search-bar .header-search{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:50px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    transform:none!important;
  }

  .centered-search-bar .header-search form,
  .centered-search-bar .header-search .search-form,
  .centered-search-bar .header-search .search-wrap,
  .centered-search-bar .header-search .search-inner{
    position:static!important;
    display:block!important;
    width:100%!important;
    height:50px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }

  .centered-search-bar .header-search input,
  .centered-search-bar #searchInput,
  #searchInput{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:50px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 10px 0 42px!important;
    border:1px solid #d5dcd6!important;
    border-radius:15px!important;
    outline:none!important;
    background:#fff!important;
    box-shadow:none!important;
    transform:none!important;
    font-size:16px!important;
    line-height:50px!important;
    color:#172019!important;
    -webkit-appearance:none!important;
    appearance:none!important;
  }

  /* hide any duplicate/right-side search buttons left over from desktop CSS */
  .centered-search-bar .header-search > button:not(.header-search-button):not(.search-button-left),
  .centered-search-bar .header-search .search-submit:not(.header-search-button),
  .centered-search-bar .header-search .search-icon-right{
    display:none!important;
  }

  .centered-search-bar .header-search .header-search-button,
  .centered-search-bar .header-search .search-button-left,
  .header-search-button,
  .search-button-left{
    position:absolute!important;
    left:12px!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    z-index:4!important;
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:translateY(-50%)!important;
    display:grid!important;
    place-items:center!important;
  }

  .centered-search-bar .header-search .header-search-button svg,
  .centered-search-bar .header-search .search-button-left svg,
  .header-search-button svg,
  .search-button-left svg{
    display:block!important;
    width:21px!important;
    height:21px!important;
    margin:0!important;
  }

  .centered-search-bar .header-search input::placeholder,
  #searchInput::placeholder{
    color:#727b74!important;
    opacity:1!important;
  }

  /* ===== HERO: physically reserve the left 48% for copy ===== */
  .sketch-hero.exact-reference-hero{
    position:relative!important;
    isolation:isolate!important;
    background-position:78% center!important;
    overflow:hidden!important;
  }

  /* opaque copy panel prevents photo from visually entering under text */
  .sketch-hero.exact-reference-hero::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:52%!important;
    height:100%!important;
    z-index:1!important;
    background:linear-gradient(
      90deg,
      rgba(249,248,242,1) 0%,
      rgba(249,248,242,1) 76%,
      rgba(249,248,242,.96) 88%,
      rgba(249,248,242,0) 100%
    )!important;
    pointer-events:none!important;
  }

  .sketch-hero.exact-reference-hero::after{
    display:none!important;
  }

  .sketch-hero-copy.mobile-hero-copy{
    position:absolute!important;
    z-index:3!important;
    left:0!important;
    top:0!important;
    width:48%!important;
    max-width:48%!important;
    height:100%!important;
    box-sizing:border-box!important;
    padding:44px 8px 24px 20px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }

  .sketch-hero h1{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:31px!important;
    line-height:1.02!important;
    letter-spacing:-1.25px!important;
    font-weight:900!important;
    color:#101813!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .sketch-hero p{
    width:100%!important;
    max-width:100%!important;
    margin:16px 0 0!important;
    padding:0!important;
    font-size:14.5px!important;
    line-height:1.28!important;
    font-weight:650!important;
    color:#23763a!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .mobile-hero-cta{
    flex:0 0 auto!important;
    margin-top:22px!important;
  }
}

/* Narrow iPhones: slightly more room for copy, still never over photo */
@media (max-width:390px){
  .sketch-hero.exact-reference-hero{
    background-position:82% center!important;
  }

  .sketch-hero.exact-reference-hero::before{
    width:55%!important;
  }

  .sketch-hero-copy.mobile-hero-copy{
    width:51%!important;
    max-width:51%!important;
    padding-left:16px!important;
    padding-right:5px!important;
  }

  .sketch-hero h1{
    font-size:28px!important;
    letter-spacing:-1px!important;
  }

  .sketch-hero p{
    font-size:13.5px!important;
  }
}

/* Same portrait geometry when phone is rotated */
@media (orientation:landscape) and (max-height:500px) and (hover:none){
  .centered-search-bar .header-search{
    height:50px!important;
  }

  .centered-search-bar .header-search input,
  #searchInput{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:50px!important;
    padding:0 10px 0 42px!important;
    font-size:16px!important;
    line-height:50px!important;
  }

  .sketch-hero.exact-reference-hero{
    background-position:82% center!important;
  }

  .sketch-hero.exact-reference-hero::before{
    width:55%!important;
  }

  .sketch-hero-copy.mobile-hero-copy{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:51%!important;
    max-width:51%!important;
    height:100%!important;
    padding:44px 5px 24px 16px!important;
  }
}


/* DP Food v5.10.3 — structural search + hero fix */
@media (max-width:760px){

  /* SEARCH: wrapper has NO visual frame. Input owns the only frame. */
  .mobile-search-single,
  .header-search.mobile-search-single{
    position:relative!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .mobile-search-single #searchInput{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:50px!important;
    min-width:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    border:1px solid #d5dcd6!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:none!important;
    padding:0 10px 0 42px!important;
    font-size:16px!important;
    line-height:normal!important;
  }

  .mobile-search-single .header-search-button{
    position:absolute!important;
    z-index:5!important;
    left:12px!important;
    top:50%!important;
    width:22px!important;
    height:22px!important;
    transform:translateY(-50%)!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .mobile-search-single .search-suggestions{
    top:56px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
  }

  /* HERO: two independent physical columns. No photo exists under the text. */
  .structural-mobile-hero{
    display:grid!important;
    grid-template-columns:52% 48%!important;
    grid-template-rows:310px!important;
    width:calc(100% - 24px)!important;
    height:310px!important;
    min-height:310px!important;
    margin:10px 12px 0!important;
    padding:0!important;
    border-radius:16px!important;
    background:#f9f8f2!important;
    background-image:none!important;
    overflow:hidden!important;
    position:relative!important;
  }

  .structural-mobile-hero::before,
  .structural-mobile-hero::after{
    display:none!important;
    content:none!important;
  }

  .structural-mobile-hero > .desktop-reference-hero{
    display:none!important;
  }

  .mobile-hero-text-panel{
    grid-column:1!important;
    grid-row:1!important;
    position:relative!important;
    z-index:2!important;
    background:#f9f8f2!important;
    overflow:hidden!important;
  }

  .structural-mobile-hero .mobile-hero-copy{
    position:static!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    margin:0!important;
    padding:42px 8px 20px 18px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }

  .structural-mobile-hero .mobile-hero-copy h1{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:31px!important;
    line-height:1!important;
    letter-spacing:-1.2px!important;
    color:#101813!important;
  }

  .structural-mobile-hero .mobile-hero-copy p{
    width:100%!important;
    max-width:none!important;
    margin:17px 0 0!important;
    font-size:14.5px!important;
    line-height:1.25!important;
    color:#23763a!important;
  }

  .structural-mobile-hero .mobile-hero-cta{
    margin-top:22px!important;
    flex:0 0 auto!important;
  }

  .mobile-hero-image-panel{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    background-image:url('assets/hero-photo-clean@2x.jpg')!important;
    background-size:cover!important;
    background-position:58% center!important;
    background-repeat:no-repeat!important;
    position:relative!important;
  }

  /* subtle seam only, without allowing text/image overlap */
  .mobile-hero-image-panel::before{
    content:""!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:26px!important;
    background:linear-gradient(90deg,#f9f8f2 0%,rgba(249,248,242,0) 100%)!important;
    pointer-events:none!important;
  }
}

@media (max-width:390px){
  .structural-mobile-hero{
    grid-template-columns:54% 46%!important;
  }

  .structural-mobile-hero .mobile-hero-copy{
    padding-left:15px!important;
    padding-right:5px!important;
  }

  .structural-mobile-hero .mobile-hero-copy h1{
    font-size:28px!important;
  }

  .structural-mobile-hero .mobile-hero-copy p{
    font-size:13px!important;
  }

  .structural-mobile-hero .mobile-hero-cta{
    padding-left:13px!important;
    padding-right:13px!important;
    font-size:10.5px!important;
  }
}

/* Landscape phone keeps the same portrait composition as requested. */
@media (orientation:landscape) and (max-height:500px) and (hover:none){
  .structural-mobile-hero{
    width:406px!important;
    grid-template-columns:54% 46%!important;
    grid-template-rows:310px!important;
  }
}


/* DP Food v5.10.5 — soft hero blend instead of hard 50/50 split */
@media (max-width:760px){
  .structural-mobile-hero{
    grid-template-columns:56% 44%!important;
    background:#f9f8f2!important;
    position:relative!important;
    isolation:isolate!important;
  }

  .mobile-hero-text-panel{
    position:relative!important;
    z-index:3!important;
    background:linear-gradient(
      90deg,
      #f9f8f2 0%,
      #f9f8f2 68%,
      rgba(249,248,242,.94) 82%,
      rgba(249,248,242,.72) 92%,
      rgba(249,248,242,.28) 100%
    )!important;
    overflow:visible!important;
  }

  .mobile-hero-image-panel{
    position:relative!important;
    z-index:1!important;
    margin-left:-42px!important;
    width:calc(100% + 42px)!important;
    background-position:57% center!important;
  }

  .mobile-hero-image-panel::before{
    content:""!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:72px!important;
    background:linear-gradient(
      90deg,
      rgba(249,248,242,.96) 0%,
      rgba(249,248,242,.72) 28%,
      rgba(249,248,242,.36) 62%,
      rgba(249,248,242,0) 100%
    )!important;
    pointer-events:none!important;
  }

  .structural-mobile-hero .mobile-hero-copy{
    position:relative!important;
    z-index:4!important;
    padding-right:0!important;
  }

  .structural-mobile-hero .mobile-hero-copy h1,
  .structural-mobile-hero .mobile-hero-copy p,
  .structural-mobile-hero .mobile-hero-cta{
    position:relative!important;
    z-index:5!important;
  }
}

@media (max-width:390px){
  .structural-mobile-hero{
    grid-template-columns:58% 42%!important;
  }

  .mobile-hero-image-panel{
    margin-left:-34px!important;
    width:calc(100% + 34px)!important;
  }

  .mobile-hero-image-panel::before{
    width:58px!important;
  }
}

@media (orientation:landscape) and (max-height:500px) and (hover:none){
  .structural-mobile-hero{
    grid-template-columns:58% 42%!important;
  }

  .mobile-hero-image-panel{
    margin-left:-34px!important;
    width:calc(100% + 34px)!important;
  }
}


/* DP Food v5.10.6 — mobile cart hierarchy */
@media (max-width:760px){
  .cart-heading-row{
    align-items:center!important;
    gap:12px!important;
    margin-bottom:18px!important;
  }

  .cart-heading-row .cart-page-title{
    font-size:28px!important;
    line-height:1.05!important;
    font-weight:900!important;
    letter-spacing:-.7px!important;
    margin:0!important;
  }

  .cart-clear-top{
    margin-left:auto!important;
    padding:8px 0!important;
    font-size:11px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  .cart-item-remove{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:34px!important;
    padding:7px 0!important;
    font-size:11px!important;
    font-weight:800!important;
    color:#727a72!important;
  }

  .cart-summary{
    font-family:Inter,Arial,sans-serif!important;
  }

  .cart-summary h2,
  .cart-summary-title,
  .cart-summary strong{
    font-family:Inter,Arial,sans-serif!important;
  }
}


/* DP Food v5.10.7 — true landscape adaptation for phones */
@media (orientation:landscape) and (max-height:520px) and (hover:none){

  html, body{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    overflow-x:hidden!important;
    background:#fff!important;
    box-shadow:none!important;
  }

  /* Top utility row uses the full landscape width */
  .service-bar{
    width:100%!important;
    height:52px!important;
    min-height:52px!important;
    padding:0 20px!important;
    box-sizing:border-box!important;
  }

  .service-left{
    font-size:12px!important;
  }

  .service-actions{
    margin-left:auto!important;
  }

  .login-button{
    min-width:86px!important;
    height:52px!important;
  }

  .ref-cart{
    width:54px!important;
    min-width:54px!important;
    height:52px!important;
  }

  /* Header becomes a real wide row */
  .main-bar.centered-search-bar{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:88px!important;
    min-height:88px!important;
    padding:8px 20px!important;
    grid-template-columns:130px minmax(260px,1fr) 126px!important;
    grid-template-rows:72px!important;
    gap:14px!important;
    box-sizing:border-box!important;
  }

  .centered-search-bar .company-logo-link{
    width:130px!important;
    min-width:130px!important;
    height:72px!important;
  }

  .centered-search-bar .company-logo-header{
    width:118px!important;
    max-width:118px!important;
    max-height:70px!important;
  }

  .centered-search-bar .header-search,
  .mobile-search-single{
    height:50px!important;
  }

  .mobile-search-single #searchInput{
    height:50px!important;
    font-size:16px!important;
  }

  .centered-search-bar .header-catalog-nav,
  .centered-search-bar .header-catalog-button{
    width:126px!important;
    min-width:126px!important;
  }

  .centered-search-bar .header-catalog-button{
    height:50px!important;
    font-size:13px!important;
  }

  /* Hero becomes a wide composition instead of portrait column */
  .structural-mobile-hero{
    width:calc(100% - 40px)!important;
    height:260px!important;
    min-height:260px!important;
    margin:10px 20px 0!important;
    grid-template-columns:44% 56%!important;
    grid-template-rows:260px!important;
    border-radius:18px!important;
  }

  .mobile-hero-text-panel{
    overflow:hidden!important;
  }

  .structural-mobile-hero .mobile-hero-copy{
    height:100%!important;
    padding:32px 12px 18px 28px!important;
  }

  .structural-mobile-hero .mobile-hero-copy h1{
    font-size:38px!important;
    line-height:.98!important;
    letter-spacing:-1.6px!important;
  }

  .structural-mobile-hero .mobile-hero-copy p{
    margin-top:14px!important;
    font-size:17px!important;
    line-height:1.22!important;
    max-width:250px!important;
  }

  .structural-mobile-hero .mobile-hero-cta{
    margin-top:18px!important;
    min-height:46px!important;
    padding:0 18px!important;
    font-size:12px!important;
  }

  .mobile-hero-image-panel{
    margin-left:-34px!important;
    width:calc(100% + 34px)!important;
    background-position:58% center!important;
  }

  /* Benefits: horizontal and more readable in landscape */
  .sketch-benefits{
    width:calc(100% - 40px)!important;
    margin:10px 20px 0!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    min-height:108px!important;
    padding:12px 8px!important;
  }

  .sketch-benefits article{
    grid-template-rows:32px 24px 28px!important;
    padding:2px 12px!important;
  }

  .benefit-line-icon,
  .benefit-line-icon svg{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
  }

  .sketch-benefits strong{
    font-size:10px!important;
  }

  .sketch-benefits p{
    font-size:8.8px!important;
  }

  /* Categories can show more at once */
  .sketch-categories,
  .fresh-catalog{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .sketch-category-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
    overflow:visible!important;
    margin:0!important;
    padding:6px 0 12px!important;
  }

  .sketch-category-card{
    width:100%!important;
    height:88px!important;
    flex:none!important;
  }

  /* Product grid expands to 3 columns on most landscape phones */
  .fresh-product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .retail-card-heading h3{
    font-size:12.5px!important;
  }

  .retail-main-price strong{
    font-size:19px!important;
  }

  /* Cart uses the landscape width more efficiently */
  .cart-page,
  .cart-main,
  main.cart-page{
    width:100%!important;
    max-width:none!important;
    padding-left:20px!important;
    padding-right:20px!important;
    box-sizing:border-box!important;
  }

  .cart-heading-row{
    margin-bottom:16px!important;
  }

  .cart-heading-row .cart-page-title{
    font-size:30px!important;
  }

  .cart-layout,
  .cart-page-layout,
  .cart-content-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr)!important;
    gap:18px!important;
    align-items:start!important;
  }

  /* Account / checkout modals fit landscape height */
  .checkout-modal,
  .customer-modal,
  .auth-modal{
    max-height:88vh!important;
    overflow-y:auto!important;
  }

  .header-catalog-dropdown,
  .search-suggestions{
    top:140px!important;
  }
}

/* DP Food v5.10.8 — cart rendering hotfix */


/* DP Food v5.10.9 — unified hero + category card containment */
@media (max-width:760px){

  /* HERO: visually one image, text softly overlays the left side */
  .structural-mobile-hero{
    display:block!important;
    position:relative!important;
    width:calc(100% - 24px)!important;
    height:310px!important;
    min-height:310px!important;
    margin:10px 12px 0!important;
    border-radius:16px!important;
    overflow:hidden!important;
    background:#f9f8f2!important;
  }

  .structural-mobile-hero .mobile-hero-image-panel{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    background-image:url('assets/hero-photo-clean@2x.jpg')!important;
    background-size:cover!important;
    background-position:66% center!important;
    background-repeat:no-repeat!important;
  }

  .structural-mobile-hero .mobile-hero-image-panel::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background:linear-gradient(
      90deg,
      rgba(249,248,242,.98) 0%,
      rgba(249,248,242,.94) 25%,
      rgba(249,248,242,.72) 42%,
      rgba(249,248,242,.32) 57%,
      rgba(249,248,242,.08) 69%,
      rgba(249,248,242,0) 78%
    )!important;
    pointer-events:none!important;
  }

  .structural-mobile-hero .mobile-hero-text-panel{
    position:absolute!important;
    inset:0!important;
    z-index:3!important;
    width:100%!important;
    height:100%!important;
    background:transparent!important;
    overflow:visible!important;
  }

  .structural-mobile-hero .mobile-hero-copy{
    position:relative!important;
    z-index:4!important;
    width:54%!important;
    max-width:54%!important;
    height:100%!important;
    padding:42px 8px 20px 18px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  .structural-mobile-hero .mobile-hero-copy h1{
    font-size:30px!important;
    line-height:1!important;
    letter-spacing:-1.15px!important;
  }

  .structural-mobile-hero .mobile-hero-copy p{
    margin-top:16px!important;
    font-size:14px!important;
    line-height:1.27!important;
  }

  .structural-mobile-hero .mobile-hero-cta{
    margin-top:21px!important;
  }

  /* CATEGORIES: images are always clipped inside rounded cards */
  .sketch-category-grid{
    align-items:stretch!important;
  }

  .sketch-category-card{
    position:relative!important;
    display:block!important;
    overflow:hidden!important;
    border-radius:15px!important;
    isolation:isolate!important;
    background:#f3f6f3!important;
    box-sizing:border-box!important;
  }

  .sketch-category-card img,
  .sketch-category-card picture,
  .sketch-category-card picture img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:inherit!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  .sketch-category-card::before,
  .sketch-category-card::after{
    max-width:100%!important;
    max-height:100%!important;
  }

  .sketch-category-card > *{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:390px){
  .structural-mobile-hero .mobile-hero-copy{
    width:57%!important;
    max-width:57%!important;
    padding-left:15px!important;
    padding-right:4px!important;
  }

  .structural-mobile-hero .mobile-hero-copy h1{
    font-size:27px!important;
  }

  .structural-mobile-hero .mobile-hero-copy p{
    font-size:13px!important;
  }

  .structural-mobile-hero .mobile-hero-image-panel{
    background-position:70% center!important;
  }
}

@media (orientation:landscape) and (max-height:520px) and (hover:none){
  .structural-mobile-hero{
    display:block!important;
    width:calc(100% - 40px)!important;
    height:260px!important;
    min-height:260px!important;
    margin:10px 20px 0!important;
  }

  .structural-mobile-hero .mobile-hero-image-panel{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    background-position:68% center!important;
  }

  .structural-mobile-hero .mobile-hero-copy{
    width:45%!important;
    max-width:45%!important;
    padding:32px 12px 18px 28px!important;
  }

  .structural-mobile-hero .mobile-hero-copy h1{
    font-size:37px!important;
  }

  .structural-mobile-hero .mobile-hero-copy p{
    font-size:16.5px!important;
  }

  .sketch-category-card{
    overflow:hidden!important;
  }

  .sketch-category-card img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

/* Мобильная фиксированная кнопка перехода в корзину */
.sticky-mobile-cart {
  display: none;
}

@media (max-width: 760px) {
  .sticky-mobile-cart {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 4900;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);
    transition:
      opacity .2s ease,
      transform .2s ease,
      visibility .2s ease;
  }

  .sticky-mobile-cart.visible {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .sticky-mobile-cart-button {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    background: #087d36;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }

  .sticky-mobile-cart-count {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }

  body {
    padding-bottom: 82px;
  }
}

/* Скрываем лишний вступительный блок корзины,
   сохраняя необходимые JS-элементы в DOM */
.cart-page-title-row {
  display: none !important;
}

/* Упрощённый верх страницы корзины */
@media (max-width: 760px) {
  .cart-page-title-row {
    display: block !important;
    margin-bottom: 18px !important;
  }

  .cart-page-heading-copy {
    display: block !important;
  }

  .cart-page-eyebrow {
    display: block !important;
    margin-bottom: 8px !important;
  }

  .cart-page-title {
    display: block !important;
    margin: 0 !important;
  }

  .cart-page-subtitle {
    display: none !important;
  }

  .cart-page-title-actions {
    display: none !important;
  }
}

/* Количество товарных позиций под заголовком корзины */
.cart-total-positions {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  text-align: left;
}

.cart-total-positions strong {
  color: inherit;
  font-weight: 700;
}

/* v5.10.12 — компактное количество товаров под заголовком корзины */
@media (max-width: 760px) {
  .cart-total-positions {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin: 9px 0 0 !important;
    padding: 7px 11px;
    width: auto;
    border-radius: 10px;
    background: #f4f8f5;
    color: #65756d;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
  }

  .cart-total-positions strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #e5f1e8;
    color: #087d36;
    font-size: 13px;
    font-weight: 800;
  }
}

/* v5.10.14 — сумма и минимальный заказ в нижней мобильной корзине */
@media (max-width: 760px) {

  .sticky-mobile-cart-button {
    min-height: 64px !important;
    padding: 10px 15px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .sticky-mobile-cart-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .sticky-mobile-cart-title {
    font-size: 15px;
    font-weight: 750;
    text-align: left;
  }

  .sticky-mobile-cart-total {
    font-size: 16px;
    font-weight: 850;
    white-space: nowrap;
  }

  .sticky-mobile-cart-status {
    width: 100%;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 500;
    text-align: left;
    color: rgba(255,255,255,.82);
  }

  .sticky-mobile-cart-status.needs-more {
    color: #fff;
    font-weight: 650;
  }
}

/* v5.10.18 — информативная кнопка оформления заказа */
@media (max-width: 760px) {
  .cart-checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    width: 100% !important;
  }

  .cart-checkout-button > span {
    font-weight: 750;
  }

  .cart-checkout-button > strong {
    font-size: 16px;
    font-weight: 850;
    white-space: nowrap;
  }

  .cart-checkout-minimum {
    margin: 8px 3px 0;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    color: #7a5548;
    font-weight: 600;
  }

  .cart-checkout-minimum[hidden] {
    display: none !important;
  }
}

/* v5.10.20 — кнопка оформления визуально как sticky-корзина главной */
@media (max-width: 760px) {

  .cart-checkout-button.sticky-style-checkout {
    width: 100% !important;
    min-height: 64px !important;
    padding: 10px 15px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #087d36 !important;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 4px !important;

    font: inherit !important;
    cursor: pointer;
  }

  .cart-checkout-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .cart-checkout-title {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 750;
    text-align: left;
    color: #fff;
  }

  .cart-checkout-total {
    font-size: 16px !important;
    line-height: 1.2;
    font-weight: 850 !important;
    white-space: nowrap;
    color: #fff !important;
  }

  .cart-checkout-minimum {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
    text-align: left !important;
    color: rgba(255,255,255,.9) !important;
  }

  .cart-checkout-minimum[hidden] {
    display: none !important;
  }
}

/* Кнопка корзины до достижения минимальной суммы */
@media (max-width: 760px) {
  .cart-checkout-button.below-minimum {
    cursor: default !important;
  }

  .cart-checkout-button.below-minimum .cart-checkout-title {
    font-size: 13px !important;
    font-weight: 650 !important;
  }
}

/* v5.10.22 — точное вертикальное выравнивание суммы sticky-корзины */
@media (max-width: 760px) {

  .sticky-mobile-cart-main {
    align-items: center !important;
  }

  .sticky-mobile-cart-title,
  .sticky-mobile-cart-total {
    display: flex !important;
    align-items: center !important;
    min-height: 24px !important;
    line-height: 1 !important;
  }

  .sticky-mobile-cart-total {
    justify-content: flex-end !important;
  }

  /* Кнопка на странице корзины */
  .cart-checkout-button.sticky-style-checkout {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  .cart-checkout-button .cart-checkout-title {
    width: 100%;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
  }

  .cart-checkout-button.below-minimum {
    cursor: default !important;
  }

  .cart-checkout-button.below-minimum .cart-checkout-title {
    font-size: 14px !important;
    font-weight: 650 !important;
  }
}

/* v5.10.22 — точное вертикальное выравнивание суммы sticky-корзины */
@media (max-width: 760px) {

  .sticky-mobile-cart-main {
    align-items: center !important;
  }

  .sticky-mobile-cart-title,
  .sticky-mobile-cart-total {
    display: flex !important;
    align-items: center !important;
    min-height: 24px !important;
    line-height: 1 !important;
  }

  .sticky-mobile-cart-total {
    justify-content: flex-end !important;
  }

  /* Кнопка на странице корзины */
  .cart-checkout-button.sticky-style-checkout {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  .cart-checkout-button .cart-checkout-title {
    width: 100%;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
  }

  .cart-checkout-button.below-minimum {
    cursor: default !important;
  }

  .cart-checkout-button.below-minimum .cart-checkout-title {
    font-size: 14px !important;
    font-weight: 650 !important;
  }
}

/* v5.10.23 — состояние кнопки оформления */
@media (max-width: 760px) {
  .cart-checkout-button {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  .cart-checkout-state-label {
    width: 100%;
    text-align: center;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 750;
  }

  .cart-checkout-button.below-minimum {
    cursor: default !important;
  }

  .cart-checkout-button.below-minimum .cart-checkout-state-label {
    font-size: 14px;
    font-weight: 650;
  }

  .sticky-mobile-cart-main {
    align-items: center !important;
  }

  .sticky-mobile-cart-title,
  .sticky-mobile-cart-total {
    display: flex !important;
    align-items: center !important;
    min-height: 24px !important;
    line-height: 1 !important;
  }

  .sticky-mobile-cart-total {
    justify-content: flex-end !important;
  }
}

/* v5.10.24 — раздельный текст и сумма до минимального заказа */
@media (max-width: 760px) {
  .cart-checkout-missing-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .cart-checkout-missing-text {
    flex: 1;
    text-align: left;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 650;
  }

  .cart-checkout-missing-amount {
    flex: 0 0 auto;
    min-width: 78px;
    text-align: right;
    font-size: 18px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
  }

  .cart-back-to-catalog-under {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 650;
    color: #087d36;
    text-decoration: none;
  }

  .cart-back-to-catalog-under[hidden] {
    display: none !important;
  }
}

/* v5.10.25 — «Вернуться в каталог» как понятная вторичная кнопка */
@media (max-width: 760px) {
  .cart-back-to-catalog-under {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;

    margin-top: 10px !important;
    padding: 0 16px !important;

    border: 1.5px solid #087d36 !important;
    border-radius: 14px !important;

    background: #ffffff !important;
    color: #087d36 !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 750 !important;

    text-align: center !important;
    text-decoration: none !important;

    box-shadow: 0 3px 10px rgba(8,125,54,.08) !important;
    -webkit-tap-highlight-color: transparent;
  }

  .cart-back-to-catalog-under:active {
    transform: scale(.985);
    background: #f1f8f3 !important;
  }

  .cart-back-to-catalog-under[hidden] {
    display: none !important;
  }
}

/* v5.10.27 — аккуратный верх корзины */
@media (max-width: 760px) {

  /* Вместо тяжёлой плашки — лёгкая строка как в современном e-commerce */
  .cart-total-positions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;

    width: auto !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  .cart-total-positions-label {
    color: #7b8780 !important;
    font-weight: 500 !important;
  }

  .cart-total-positions strong {
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;

    color: #173529 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  /* "Ваш заказ" + "Итого" — одна аккуратная линия */
  .cart-summary-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  .cart-summary-top .cart-summary-kicker {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
  }

  .cart-summary-top h2 {
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 750 !important;

    color: #173529 !important;
  }
}

/* v5.10.28 — блок "Ваш заказ / Итого" в точности как "Ваш заказ / Корзина" */
@media (max-width: 760px) {

  .cart-summary-top {
    display: block !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }

  .cart-summary-top .cart-summary-kicker {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;

    color: #7b8780 !important;
    text-align: left !important;
  }

  .cart-summary-top h2 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 30px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;

    color: #173529 !important;
    text-align: left !important;
  }
}

/* v5.10.29 — "Ваш заказ / Итого" точно как "Ваш заказ / Корзина" */
@media (max-width: 760px) {

  .cart-summary-top {
    display: block !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }

  .cart-summary-top .cart-summary-kicker {
    display: block !important;

    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--green) !important;

    font-size: 13px !important;
    line-height: normal !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
    letter-spacing: .08em !important;

    text-align: left !important;
  }

  .cart-summary-top h2 {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Playfair Display", serif !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: normal !important;

    letter-spacing: normal !important;
    color: var(--ink) !important;

    text-align: left !important;
  }
}

/* ЕДИНЫЙ стиль для "Ваш заказ / Корзина" и "Ваш заказ / Итого" */
@media (max-width: 760px) {

  body.cart-page-body .cart-unified-kicker {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;

    color: var(--green) !important;
    text-align: left !important;
  }

  body.cart-page-body .cart-unified-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Playfair Display", Georgia, serif !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;

    color: var(--ink) !important;
    text-align: left !important;
  }

  body.cart-page-body .cart-summary-top {
    display: block !important;
    text-align: left !important;
  }
}

/* v5.10.31
   ВАЖНО:
   левый блок "Ваш заказ / Корзина" НЕ ТРОГАЕМ.
   Ниже корректируется исключительно правый блок "Ваш заказ / Итого".
*/

@media (max-width: 760px) {

  body.cart-page-body .cart-summary-top {
    display: block !important;
    text-align: left !important;
  }

  /* Правое "Ваш заказ" копирует внешний вид левого eyebrow */
  body.cart-page-body .cart-summary-top .cart-summary-kicker {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--green) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    text-align: left !important;
  }

  /* ТОЛЬКО слово "Итого" */
  body.cart-page-body .cart-page-summary .cart-summary-top h2 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Playfair Display", serif !important;
    font-size: 36px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    letter-spacing: normal !important;

    color: var(--ink) !important;
    text-align: left !important;
  }
}

/* v5.10.32 — нижний "Ваш заказ / Итого" точно под верхний "Ваш заказ / Корзина" */
@media (max-width: 760px) {

  /* ТОЛЬКО нижняя надпись "Ваш заказ" */
  body.cart-page-body .cart-page-summary .cart-summary-top .cart-summary-kicker {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: var(--green) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: normal !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;

    text-align: left !important;
  }

  /* ТОЛЬКО слово "Итого" */
  body.cart-page-body .cart-page-summary .cart-summary-top h2 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: Inter, Arial, sans-serif !important;
    font-size: 30px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.7px !important;

    color: #101813 !important;
    text-align: left !important;
  }
}

/* v5.10.33 — нижнее "Ваш заказ" точно как верхнее над "Корзина" */
@media (max-width: 760px) {

  body.cart-page-body .cart-page-summary .cart-summary-top .cart-summary-kicker {
    display: block !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    font-family: inherit !important;
    font-size: 13px !important;
    line-height: normal !important;
    font-weight: 800 !important;

    letter-spacing: .08em !important;
    text-transform: uppercase !important;

    color: var(--green) !important;
    text-align: left !important;
  }
}

/* v5.10.34 — нижняя плашка "Ваш заказ" точно как верхняя */
@media (max-width: 760px) {

  body.cart-page-body
  .cart-page-summary
  .cart-summary-top
  .cart-summary-kicker {

    display: block !important;
    width: max-content !important;

    margin: 0 0 8px !important;
    padding: 7px 13px !important;

    border: 1px solid #c5d9b8 !important;
    border-radius: 999px !important;

    background: #d9e8cd !important;
    color: #2f633c !important;

    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    letter-spacing: .035em !important;
    text-transform: none !important;

    text-align: left !important;
  }
}

/* v5.10.35 — мобильный фон корзины */
@media (max-width:760px) {

  body.cart-page-body {
    background:
      radial-gradient(
        circle at 5% 8%,
        rgba(121,166,108,.14) 0,
        transparent 36%
      ),
      radial-gradient(
        circle at 96% 55%,
        rgba(218,190,119,.10) 0,
        transparent 34%
      ),
      linear-gradient(
        160deg,
        #f4f8f0 0%,
        #fbfaf4 50%,
        #f2f7ee 100%
      ) !important;

    background-attachment: scroll !important;
  }

}


/* v5.10.36 — мобильная продуктовая гамма */
@media (max-width:760px) {

  body.cart-page-body {
    background:
      radial-gradient(
        circle at 5% 8%,
        rgba(104,154,92,.13) 0,
        transparent 36%
      ),
      radial-gradient(
        circle at 95% 62%,
        rgba(168,193,156,.10) 0,
        transparent 34%
      ),
      linear-gradient(
        165deg,
        #f3f8f0 0%,
        #fafcf8 52%,
        #edf5ea 100%
      ) !important;
  }

  body.cart-page-body .cart-summary-total {
    padding: 13px 14px !important;
    border-radius: 13px !important;
  }

  body.cart-page-body .cart-summary-total strong {
    font-size: 19px !important;
  }
}


/* v5.10.37 — тот же фон на мобильной корзине */
@media (max-width:760px) {

  body.cart-page-body > .page-shell {
    background:
      radial-gradient(
        circle at 3% 10%,
        rgba(83,143,75,.12) 0%,
        transparent 35%
      ),
      radial-gradient(
        circle at 98% 72%,
        rgba(137,178,126,.09) 0%,
        transparent 32%
      ),
      linear-gradient(
        160deg,
        #edf6ea 0%,
        #f8fbf6 52%,
        #e9f3e6 100%
      ) !important;
  }

  body.cart-page-body .cart-page-summary .cart-summary-total {
    background: #edf7ea !important;
    border-color: #c9e1c4 !important;
  }
}

@media (max-width:760px) {

  body.cart-page-body,
  body.cart-page-body > .page-shell {
    background:
      linear-gradient(
        180deg,
        #f3f8f1 0%,
        #f8faf6 48%,
        #edf5ea 100%
      ) !important;
  }

  body.cart-page-body .cart-page-summary,
  body.cart-page-body .cart-summary-top {
    background-image: none !important;
  }

  body.cart-page-body .cart-page-summary::before,
  body.cart-page-body .cart-page-summary::after,
  body.cart-page-body .cart-summary-top::before,
  body.cart-page-body .cart-summary-top::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width:760px) {

  body.cart-page-body,
  body.cart-page-body > .page-shell {
    background:
      radial-gradient(
        circle at 4% 10%,
        rgba(91,166,83,.17) 0%,
        transparent 34%
      ),
      radial-gradient(
        circle at 98% 68%,
        rgba(126,184,111,.12) 0%,
        transparent 31%
      ),
      linear-gradient(
        165deg,
        #ecf7e8 0%,
        #f8fbf5 50%,
        #e4f1df 100%
      ) !important;
  }

}

/* v5.10.40 — более сочный мобильный фон */
@media (max-width:760px) {

  body.cart-page-body,
  body.cart-page-body > .page-shell {
    background:
      radial-gradient(
        circle at 0% 8%,
        rgba(64,153,69,.29) 0%,
        rgba(64,153,69,.12) 27%,
        transparent 43%
      ),
      radial-gradient(
        circle at 100% 70%,
        rgba(103,178,82,.23) 0%,
        rgba(103,178,82,.08) 25%,
        transparent 41%
      ),
      linear-gradient(
        160deg,
        #daeed5 0%,
        #f1f8ed 46%,
        #d2eacb 100%
      ) !important;
  }

}

/* v5.10.41 — сочный продуктовый фон на мобильном */
@media (max-width:760px) {

  body.cart-page-body {
    background: #cde7c5 !important;
  }

  body.cart-page-body > .page-shell {
    background:
      radial-gradient(
        circle at -5% 8%,
        rgba(37,132,58,.32) 0%,
        rgba(68,158,72,.18) 23%,
        transparent 42%
      ),
      radial-gradient(
        circle at 105% 70%,
        rgba(91,170,67,.28) 0%,
        rgba(122,190,88,.14) 22%,
        transparent 40%
      ),
      linear-gradient(
        155deg,
        #b9dcad 0%,
        #e7f3df 47%,
        #c1e2b5 100%
      ) !important;
  }
}

/* v5.10.43 — финальный мобильный HERO:
   изображение без приглушения, читаемость за счёт текста */

@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-image-panel {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  /* Полностью убираем слой, который приглушал фотографию */
  body .structural-mobile-hero .mobile-hero-image-panel::before,
  body .structural-mobile-hero .mobile-hero-image-panel::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
  }

  /* Не накладываем цветную вуаль на всю hero-секцию */
  body .structural-mobile-hero::before,
  body .structural-mobile-hero::after {
    background: none !important;
    background-image: none !important;
  }

  /* Заголовок — лёгкая тень */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    text-shadow:
      0 1px 1px rgba(255,255,255,.42),
      0 3px 9px rgba(19,48,26,.15) !important;
  }

  /* Подзаголовок — ещё мягче */
  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow:
      0 1px 1px rgba(255,255,255,.35),
      0 2px 6px rgba(19,48,26,.11) !important;
  }
}


/* v5.10.44 — HERO одним цельным слоем без визуального стыка */
@media (max-width:760px) {

  /* Та же фотография теперь является единым фоном всего hero */
  body .structural-mobile-hero {
    background-image: url('assets/hero-photo-clean@2x.jpg') !important;
    background-size: cover !important;
    background-position: 66% center !important;
    background-repeat: no-repeat !important;
  }

  /* Старый отдельный слой изображения больше ничего не рисует */
  body .structural-mobile-hero .mobile-hero-image-panel {
    background: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body .structural-mobile-hero .mobile-hero-image-panel::before,
  body .structural-mobile-hero .mobile-hero-image-panel::after,
  body .structural-mobile-hero::before,
  body .structural-mobile-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Текстовая панель полностью прозрачная */
  body .structural-mobile-hero .mobile-hero-text-panel,
  body .structural-mobile-hero .mobile-hero-copy {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* Сохраняем нынешнее кадрирование на очень узких телефонах */
@media (max-width:390px) {
  body .structural-mobile-hero {
    background-position: 70% center !important;
  }
}

/* v5.10.45 — мягкая дымка под текстом без белой заливки */
@media (max-width:760px) {

  body .structural-mobile-hero {
    position: relative !important;
    background-image: url('assets/hero-photo-clean@2x.jpg') !important;
    background-size: cover !important;
    background-position: 66% center !important;
    background-repeat: no-repeat !important;
  }

  /* Лёгкий градиент поверх фото, только для читаемости текста */
  body .structural-mobile-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;

    background: linear-gradient(
      90deg,
      rgba(248,248,244,.46) 0%,
      rgba(248,248,244,.34) 22%,
      rgba(248,248,244,.18) 40%,
      rgba(248,248,244,.06) 55%,
      rgba(248,248,244,0) 70%
    ) !important;
  }

  body .structural-mobile-hero .mobile-hero-text-panel {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    background: transparent !important;
  }

  body .structural-mobile-hero .mobile-hero-copy {
    position: relative !important;
    z-index: 4 !important;
    background: transparent !important;
  }

  body .structural-mobile-hero .mobile-hero-image-panel {
    background: transparent !important;
    background-image: none !important;
  }
}

@media (max-width:390px) {
  body .structural-mobile-hero {
    background-position: 70% center !important;
  }
}

/* v5.10.46 — цельное сочное фото без белой дымки */
@media (max-width:760px) {

  body .structural-mobile-hero {
    background-image: url('assets/hero-photo-clean@2x.jpg') !important;
    background-size: cover !important;
    background-position: 66% center !important;
    background-repeat: no-repeat !important;
  }

  /* Никакой белой или молочной заливки поверх фотографии */
  body .structural-mobile-hero::before,
  body .structural-mobile-hero::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0 !important;
  }

  body .structural-mobile-hero .mobile-hero-image-panel,
  body .structural-mobile-hero .mobile-hero-image-panel::before,
  body .structural-mobile-hero .mobile-hero-image-panel::after {
    background: transparent !important;
    background-image: none !important;
    content: none !important;
    display: none !important;
  }

  body .structural-mobile-hero .mobile-hero-text-panel,
  body .structural-mobile-hero .mobile-hero-copy {
    background: transparent !important;
    background-image: none !important;
  }

  /* Читаемость только за счёт мягкой тени текста */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    text-shadow:
      0 1px 2px rgba(255,255,255,.55),
      0 3px 10px rgba(18,42,24,.18) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow:
      0 1px 2px rgba(255,255,255,.42),
      0 2px 7px rgba(18,42,24,.14) !important;
  }
}

@media (max-width:390px) {
  body .structural-mobile-hero {
    background-position: 70% center !important;
  }
}

/* v5.10.47 — фото не трогаем, усиливаем только текст */
@media (max-width:760px) {

  /* Само фото остаётся полностью видимым */
  body .structural-mobile-hero {
    background-image: url('assets/hero-photo-clean@2x.jpg') !important;
    background-size: cover !important;
    background-position: 66% center !important;
    background-repeat: no-repeat !important;
  }

  /* Локальная мягкая подложка только под текстом */
  body .structural-mobile-hero .mobile-hero-copy {
    position: relative !important;
    z-index: 4 !important;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.72) 0%,
        rgba(255,255,255,.58) 62%,
        rgba(255,255,255,.18) 88%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 14px !important;
  }

  /* Заголовок — более читаемый, но без тяжёлой обводки */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #142218 !important;

    text-shadow:
      0 1px 1px rgba(255,255,255,.95),
      0 2px 5px rgba(255,255,255,.60),
      0 3px 8px rgba(15,38,21,.16) !important;
  }

  /* Подзаголовок */
  body .structural-mobile-hero .mobile-hero-copy p {
    color: #176f35 !important;

    text-shadow:
      0 1px 1px rgba(255,255,255,.90),
      0 2px 5px rgba(255,255,255,.52),
      0 2px 6px rgba(15,38,21,.12) !important;
  }
}

@media (max-width:390px) {
  body .structural-mobile-hero {
    background-position: 70% center !important;
  }
}

/* v5.10.48 — немного усиливаем читаемость текста HERO */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.64) 58%,
        rgba(255,255,255,.24) 86%,
        rgba(255,255,255,0) 100%
      ) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #0d1d12 !important;
    text-shadow:
      0 1px 1px rgba(255,255,255,1),
      0 2px 5px rgba(255,255,255,.82),
      0 3px 9px rgba(12,35,18,.22) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    color: #0d672d !important;
    font-weight: 600 !important;
    text-shadow:
      0 1px 1px rgba(255,255,255,1),
      0 2px 5px rgba(255,255,255,.72),
      0 2px 7px rgba(12,35,18,.16) !important;
  }
}

/* v5.10.49 — ещё немного повышаем читаемость HERO */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.69) 58%,
        rgba(255,255,255,.28) 86%,
        rgba(255,255,255,0) 100%
      ) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #08170d !important;
    text-shadow:
      0 1px 2px rgba(255,255,255,1),
      0 2px 6px rgba(255,255,255,.92),
      0 4px 10px rgba(10,32,16,.25) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    color: #075d27 !important;
    font-weight: 650 !important;
    text-shadow:
      0 1px 2px rgba(255,255,255,1),
      0 2px 6px rgba(255,255,255,.82),
      0 3px 8px rgba(10,32,16,.19) !important;
  }
}

/* v5.10.51 — заметно повышаем читаемость текста HERO */
@media (max-width:760px) {

  /* Заголовок делаем темнее и чётче */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #06130a !important;
    font-weight: 600 !important;

    text-shadow:
      0 1px 1px rgba(255,255,255,1),
      0 2px 4px rgba(255,255,255,.95),
      0 3px 8px rgba(255,255,255,.72),
      0 2px 5px rgba(5,25,10,.32) !important;
  }

  /* Зелёный подзаголовок тоже делаем значительно контрастнее */
  body .structural-mobile-hero .mobile-hero-copy p {
    color: #034f20 !important;
    font-weight: 700 !important;

    text-shadow:
      0 1px 1px rgba(255,255,255,1),
      0 2px 4px rgba(255,255,255,.95),
      0 3px 7px rgba(255,255,255,.68),
      0 2px 5px rgba(4,40,17,.25) !important;
  }
}

/* v5.10.52 — чистый текст без белого контура */
@media (max-width:760px) {

  /* Мягкая светлая область под ВСЕМ текстом вместо обводки букв */
  body .structural-mobile-hero .mobile-hero-copy {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.88) 0%,
        rgba(255,255,255,.76) 52%,
        rgba(255,255,255,.38) 78%,
        rgba(255,255,255,.10) 94%,
        rgba(255,255,255,0) 100%
      ) !important;
  }

  /* Заголовок — чистый, без белого контура */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #0b1c10 !important;
    font-weight: 600 !important;

    text-shadow:
      0 3px 10px rgba(10,35,17,.12) !important;
  }

  /* Подзаголовок */
  body .structural-mobile-hero .mobile-hero-copy p {
    color: #075b28 !important;
    font-weight: 700 !important;

    text-shadow:
      0 2px 7px rgba(8,55,25,.10) !important;
  }
}

/* v5.10.53 — максимально читаемый подзаголовок HERO */
@media (max-width:760px) {

  /* Заголовок оставляем чистым */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #0b1c10 !important;
    text-shadow: 0 2px 8px rgba(10,35,17,.10) !important;
  }

  /* "С бесплатной доставкой по Москве" */
  body .structural-mobile-hero .mobile-hero-copy p {
    display: inline-block !important;

    color: #064b20 !important;
    font-weight: 750 !important;
    line-height: 1.32 !important;

    /* Никакой белой обводки вокруг букв */
    text-shadow: none !important;

    /* Очень мягкая локальная подложка */
    background: rgba(255,255,255,.72) !important;
    padding: 5px 8px 6px !important;
    margin-left: -8px !important;

    border-radius: 8px !important;

    box-shadow:
      0 3px 12px rgba(255,255,255,.30) !important;

    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }
}

/* v5.10.54 — лёгкая дымка под текстом, без белой плашки под подзаголовком */
@media (max-width:760px) {

  /* Убираем отдельное белое обрамление у подзаголовка */
  body .structural-mobile-hero .mobile-hero-copy p {
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #075b28 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  /* Лёгкая общая дымка только под текстовой зоной */
  body .structural-mobile-hero .mobile-hero-copy {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.74) 0%,
        rgba(255,255,255,.58) 45%,
        rgba(255,255,255,.30) 72%,
        rgba(255,255,255,.10) 90%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 14px !important;
  }

  /* Заголовок и подзаголовок читаемы без контура букв */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #0b1c10 !important;
    text-shadow: 0 2px 7px rgba(10,35,17,.10) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    color: #075b28 !important;
    text-shadow: 0 2px 6px rgba(8,55,25,.08) !important;
  }
}

/* v5.10.55 — более плотная дымка для читаемости HERO */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.90) 0%,
        rgba(255,255,255,.82) 38%,
        rgba(255,255,255,.64) 62%,
        rgba(255,255,255,.34) 82%,
        rgba(255,255,255,.10) 94%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 14px !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1 {
    color: #09180d !important;
    text-shadow: none !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    color: #075526 !important;
    font-weight: 700 !important;

    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* v5.10.56 — HERO: дымка ещё на два тона плотнее */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.92) 38%,
        rgba(255,255,255,.78) 62%,
        rgba(255,255,255,.48) 82%,
        rgba(255,255,255,.18) 94%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 14px !important;
  }

}

/* v5.10.57 — HERO: дымка ещё на два тона плотнее */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.98) 38%,
        rgba(255,255,255,.90) 62%,
        rgba(255,255,255,.64) 82%,
        rgba(255,255,255,.30) 94%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 14px !important;
  }

}

/* v5.10.58 — локальная дымка вокруг текстового блока HERO */
@media (max-width:760px) {

  /* Убираем прежнюю прямоугольную дымку */
  body .structural-mobile-hero .mobile-hero-copy {
    position: relative !important;
    background: transparent !important;
    border-radius: 0 !important;
    isolation: isolate !important;
  }

  /*
    Дымка теперь находится непосредственно вокруг текста,
    а не закрывает левую половину фотографии.
  */
  body .structural-mobile-hero .mobile-hero-copy::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    /* немного выходит за границы текста */
    left: -12px !important;
    right: -18px !important;
    top: 20px !important;
    bottom: 20px !important;

    z-index: -1 !important;
    pointer-events: none !important;

    background:
      radial-gradient(
        ellipse at 38% 45%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.94) 28%,
        rgba(255,255,255,.78) 48%,
        rgba(255,255,255,.48) 65%,
        rgba(255,255,255,.18) 80%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 42% !important;

    filter: blur(7px) !important;
  }

  /* Сам текст остаётся поверх дымки */
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p,
  body .structural-mobile-hero .mobile-hero-cta {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Никакой обводки самих букв */
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow: none !important;
  }
}

/* v5.10.59 — убираем кнопку "Выбрать продукты" из мобильного HERO */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-cta {
    display: none !important;
  }

}

/* v5.10.60 — заголовок и подзаголовок на одной вертикальной оси */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy {
    text-align: left !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1 {
    margin-bottom: 16px !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    margin-top: 0 !important;
  }
}

/* v5.10.60 — заголовок и подзаголовок на одной вертикальной оси */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy {
    text-align: left !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1 {
    margin-bottom: 16px !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    margin-top: 0 !important;
  }
}

/* v5.10.61 — компактная дымка только вокруг HERO-текста */
@media (max-width:760px) {

  /* Убираем старую большую дымку */
  body .structural-mobile-hero .mobile-hero-copy::before {
    content: none !important;
    display: none !important;
  }

  /* Дымка компактно вокруг заголовка + подзаголовка */
  body .structural-mobile-hero .mobile-hero-text-panel::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 7px !important;
    top: 23px !important;

    width: 58% !important;
    height: 170px !important;

    z-index: 2 !important;
    pointer-events: none !important;

    background:
      radial-gradient(
        ellipse at 40% 45%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 30%,
        rgba(255,255,255,.72) 50%,
        rgba(255,255,255,.42) 68%,
        rgba(255,255,255,.16) 84%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 50% !important;
    filter: blur(8px) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy {
    position: relative !important;
    z-index: 4 !important;
    background: transparent !important;
  }
}

@media (max-width:390px) {
  body .structural-mobile-hero .mobile-hero-text-panel::before {
    width: 61% !important;
    height: 165px !important;
  }
}

/* v5.10.61 — компактная дымка только вокруг HERO-текста */
@media (max-width:760px) {

  /* Убираем старую большую дымку */
  body .structural-mobile-hero .mobile-hero-copy::before {
    content: none !important;
    display: none !important;
  }

  /* Дымка компактно вокруг заголовка + подзаголовка */
  body .structural-mobile-hero .mobile-hero-text-panel::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 7px !important;
    top: 23px !important;

    width: 58% !important;
    height: 170px !important;

    z-index: 2 !important;
    pointer-events: none !important;

    background:
      radial-gradient(
        ellipse at 40% 45%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 30%,
        rgba(255,255,255,.72) 50%,
        rgba(255,255,255,.42) 68%,
        rgba(255,255,255,.16) 84%,
        rgba(255,255,255,0) 100%
      ) !important;

    border-radius: 50% !important;
    filter: blur(8px) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy {
    position: relative !important;
    z-index: 4 !important;
    background: transparent !important;
  }
}

@media (max-width:390px) {
  body .structural-mobile-hero .mobile-hero-text-panel::before {
    width: 61% !important;
    height: 165px !important;
  }
}

/* v5.10.62 — более плотная белая дымка вокруг HERO-текста */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-text-panel::before {
    background:
      radial-gradient(
        ellipse at 39% 44%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 24%,
        rgba(255,255,255,.95) 40%,
        rgba(255,255,255,.82) 55%,
        rgba(255,255,255,.60) 68%,
        rgba(255,255,255,.34) 80%,
        rgba(255,255,255,.13) 90%,
        rgba(255,255,255,0) 100%
      ) !important;

    /* чуть больше пространства вокруг букв */
    left: 3px !important;
    top: 18px !important;
    width: 61% !important;
    height: 182px !important;

    /* край остаётся мягким */
    filter: blur(7px) !important;
  }

  /* Сами буквы без белой обводки */
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow: none !important;
  }
}

@media (max-width:390px) {
  body .structural-mobile-hero .mobile-hero-text-panel::before {
    left: 1px !important;
    width: 64% !important;
    height: 178px !important;
  }
}

/* v5.10.63 — точное выравнивание и сближение HERO-текста */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    display: block !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: left !important;
    transform: none !important;
  }

  /* "Свежие продукты" */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
  }

  /* "с бесплатной доставкой по Москве" */
  body .structural-mobile-hero .mobile-hero-copy p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* v5.10.64 — точное выравнивание двух текстов HERO */
@media (max-width:760px) {

  /* ТОЛЬКО "Свежие продукты" */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    position: relative !important;
    left: 0 !important;
    transform: none !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    text-indent: 0 !important;
    text-align: left !important;

    /* уменьшаем расстояние до второй надписи */
    margin-bottom: 7px !important;
  }

  /* ТОЛЬКО "с бесплатной доставкой по Москве" */
  body .structural-mobile-hero .mobile-hero-copy p {
    position: relative !important;
    left: 0 !important;
    transform: none !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    text-indent: 0 !important;
    text-align: left !important;

    margin-top: 0 !important;
  }

}

/* v5.10.65 — оптическое выравнивание подзаголовка с заголовком */
@media (max-width:760px) {

  /* "Свежие продукты" — НЕ ТРОГАЕМ */

  /* Только "с бесплатной доставкой по Москве" */
  body .structural-mobile-hero .mobile-hero-copy p {
    position: relative !important;
    left: 4px !important;

    margin-left: 0 !important;
    padding-left: 0 !important;

    /* сохраняем компактное расстояние между строками */
    margin-top: 0 !important;
  }
}

/* v5.10.66 — точное выравнивание HERO и дымка только вокруг букв */
@media (max-width:760px) {

  /* -----------------------------------------------------
     1. УБИРАЕМ БОЛЬШОЕ БЕЛОЕ ОБЛАКО
     ----------------------------------------------------- */

  body .structural-mobile-hero .mobile-hero-text-panel::before,
  body .structural-mobile-hero .mobile-hero-copy::before {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
  }

  body .structural-mobile-hero .mobile-hero-copy {
    background: transparent !important;
    background-image: none !important;
  }


  /* -----------------------------------------------------
     2. ВЫРАВНИВАЕМ ОБЕ НАДПИСИ ПО ОДНОМУ ЛЕВОМУ КРАЮ
     ----------------------------------------------------- */

  /* "Свежие продукты" */
  body .structural-mobile-hero .mobile-hero-copy h1 {
    position: relative !important;
    left: 4px !important;

    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;

    margin-bottom: 7px !important;
    text-align: left !important;
  }

  /* "с бесплатной доставкой по Москве" */
  body .structural-mobile-hero .mobile-hero-copy p {
    position: relative !important;
    left: 4px !important;

    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;

    margin-top: 0 !important;
    text-align: left !important;
  }


  /* -----------------------------------------------------
     3. БЕЛАЯ ДЫМКА ТОЛЬКО ВОКРУГ КОНТУРА БУКВ
     ----------------------------------------------------- */

  body .structural-mobile-hero .mobile-hero-copy h1 {
    text-shadow:
      0 0 8px rgba(255,255,255,.98),
      0 0 14px rgba(255,255,255,.90),
      0 0 22px rgba(255,255,255,.64) !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow:
      0 0 7px rgba(255,255,255,.98),
      0 0 13px rgba(255,255,255,.88),
      0 0 20px rgba(255,255,255,.60) !important;
  }
}


/* v5.10.67 — дымка вокруг целых текстовых фраз, не вокруг букв */
@media (max-width:760px) {

  /* Убираем любые прежние большие облака */
  body .structural-mobile-hero .mobile-hero-text-panel::before,
  body .structural-mobile-hero .mobile-hero-copy::before {
    content: none !important;
    display: none !important;
  }

  body .structural-mobile-hero .mobile-hero-copy {
    background: transparent !important;
  }

  /* Убираем дымку непосредственно с букв */
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow: none !important;
    position: relative !important;
    z-index: 2 !important;
  }


  /* --------------------------------------------------
     ДЫМКА ВОКРУГ ВСЕЙ ФРАЗЫ "Свежие продукты"
     -------------------------------------------------- */

  body .structural-mobile-hero .mobile-hero-copy h1::before {
    content: "" !important;
    position: absolute !important;

    left: -9px !important;
    right: -9px !important;
    top: -7px !important;
    bottom: -7px !important;

    z-index: -1 !important;
    pointer-events: none !important;

    background: rgba(255,255,255,.84) !important;
    border-radius: 18px !important;

    filter: blur(9px) !important;
  }


  /* --------------------------------------------------
     ДЫМКА ВОКРУГ ВСЕЙ ФРАЗЫ
     "с бесплатной доставкой по Москве"
     -------------------------------------------------- */

  body .structural-mobile-hero .mobile-hero-copy p::before {
    content: "" !important;
    position: absolute !important;

    left: -8px !important;
    right: -8px !important;
    top: -5px !important;
    bottom: -5px !important;

    z-index: -1 !important;
    pointer-events: none !important;

    background: rgba(255,255,255,.82) !important;
    border-radius: 15px !important;

    filter: blur(8px) !important;
  }


  /* Обе надписи остаются на одной вертикальной линии */
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    left: 4px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1 {
    margin-bottom: 7px !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p {
    margin-top: 0 !important;
  }
}

/* v5.10.68 — более плотная и чёткая дымка вокруг текстовых фраз */
@media (max-width:760px) {

  /* "Свежие продукты" */
  body .structural-mobile-hero .mobile-hero-copy h1::before {
    left: -10px !important;
    right: -10px !important;
    top: -7px !important;
    bottom: -7px !important;

    background: rgba(255,255,255,.98) !important;

    border-radius: 15px !important;

    /* Было 9px — делаем границу заметно чётче */
    filter: blur(3px) !important;

    box-shadow:
      0 0 5px rgba(255,255,255,.98),
      0 0 10px rgba(255,255,255,.82) !important;
  }

  /* "с бесплатной доставкой по Москве" */
  body .structural-mobile-hero .mobile-hero-copy p::before {
    left: -9px !important;
    right: -9px !important;
    top: -6px !important;
    bottom: -6px !important;

    background: rgba(255,255,255,.97) !important;

    border-radius: 13px !important;

    /* Было 8px */
    filter: blur(3px) !important;

    box-shadow:
      0 0 5px rgba(255,255,255,.96),
      0 0 9px rgba(255,255,255,.78) !important;
  }

}

/* v5.10.69 — компактная дымка вокруг каждого слова HERO */
@media (max-width:760px) {

  /* Убираем все предыдущие большие дымки */
  body .structural-mobile-hero .mobile-hero-text-panel::before,
  body .structural-mobile-hero .mobile-hero-copy::before,
  body .structural-mobile-hero .mobile-hero-copy h1::before,
  body .structural-mobile-hero .mobile-hero-copy p::before {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body .structural-mobile-hero .mobile-hero-copy,
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /*
   * Каждое слово получает собственную небольшую дымку.
   * Она мягкая, без квадратной общей плашки.
   */
  body .structural-mobile-hero .hero-haze-word {
    position: relative !important;
    z-index: 1 !important;

    display: inline !important;

    padding: 0 2px !important;

    background: rgba(255,255,255,.72) !important;

    border-radius: 6px !important;

    box-shadow:
      0 0 4px 3px rgba(255,255,255,.72),
      0 0 8px 5px rgba(255,255,255,.42) !important;

    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
  }

  /*
   * У подзаголовка дымку делаем чуть плотнее,
   * потому что текст мельче.
   */
  body .structural-mobile-hero .mobile-hero-copy p .hero-haze-word {
    background: rgba(255,255,255,.78) !important;

    box-shadow:
      0 0 4px 3px rgba(255,255,255,.78),
      0 0 8px 5px rgba(255,255,255,.46) !important;
  }
}

/* v5.10.70 — молочный полупрозрачный туман вокруг каждого слова */
@media (max-width:760px) {

  /* Убираем прямоугольный фон предыдущей версии */
  body .structural-mobile-hero .hero-haze-word {
    position: relative !important;
    display: inline-block !important;
    z-index: 1 !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    isolation: isolate !important;
  }


  /* Сам туман */
  body .structural-mobile-hero .hero-haze-word::before {
    content: "" !important;

    position: absolute !important;

    /* совсем небольшой выход за границы слова */
    left: -5px !important;
    right: -5px !important;
    top: -3px !important;
    bottom: -3px !important;

    z-index: -1 !important;
    pointer-events: none !important;

    /*
       Центр слегка молочный,
       края быстро растворяются в фотографии.
    */
    background: radial-gradient(
      ellipse at center,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.66) 34%,
      rgba(255,255,255,.48) 57%,
      rgba(255,255,255,.24) 75%,
      rgba(255,255,255,.08) 88%,
      rgba(255,255,255,0) 100%
    ) !important;

    border-radius: 45% !important;

    filter: blur(3px) !important;
  }


  /* У маленького текста туман немного плотнее для читаемости */
  body .structural-mobile-hero
  .mobile-hero-copy p
  .hero-haze-word::before {

    background: radial-gradient(
      ellipse at center,
      rgba(255,255,255,.80) 0%,
      rgba(255,255,255,.72) 34%,
      rgba(255,255,255,.52) 57%,
      rgba(255,255,255,.26) 75%,
      rgba(255,255,255,.08) 88%,
      rgba(255,255,255,0) 100%
    ) !important;
  }


  /* Никакой белой обводки самих букв */
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow: none !important;
  }

}

/* v5.10.71 — одно мягкое свечение вокруг всего HERO-текста */
@media (max-width:760px) {

  /* Убираем все предыдущие word-haze эффекты */
  body .structural-mobile-hero .hero-haze-word,
  body .structural-mobile-hero .hero-haze-word::before {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    border: 0 !important;
  }

  body .structural-mobile-hero .mobile-hero-text-panel::before,
  body .structural-mobile-hero .mobile-hero-copy::before,
  body .structural-mobile-hero .mobile-hero-copy h1::before,
  body .structural-mobile-hero .mobile-hero-copy p::before {
    content: none !important;
    display: none !important;
  }

  /* Сам текст */
  body .structural-mobile-hero .mobile-hero-copy {
    position: relative !important;
    z-index: 4 !important;
    background: transparent !important;
    isolation: isolate !important;
  }

  /* Одно мягкое облако вокруг двух строк текста */
  body .structural-mobile-hero .mobile-hero-copy::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: -12px !important;
    top: 24px !important;

    width: 118% !important;
    height: 150px !important;

    z-index: -1 !important;
    pointer-events: none !important;

    background:
      radial-gradient(
        ellipse at 38% 46%,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.64) 30%,
        rgba(255,255,255,.42) 52%,
        rgba(255,255,255,.20) 70%,
        rgba(255,255,255,.07) 84%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
    border-radius: 50% !important;
  }

  /* Без белой обводки букв */
  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow: none !important;
  }
}

/* v5.10.72 — свечение на два тона плотнее */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {
    background:
      radial-gradient(
        ellipse at 38% 46%,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.84) 30%,
        rgba(255,255,255,.66) 52%,
        rgba(255,255,255,.40) 70%,
        rgba(255,255,255,.18) 84%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }

}

/* v5.10.73 — более плотная общая дымка + чистый подзаголовок */
@media (max-width:760px) {

  /* ==================================================
     1. ОБЩАЯ ДЫМКА — ЕЩЁ НА ДВА ТОНА ПЛОТНЕЕ
     ================================================== */

  body .structural-mobile-hero .mobile-hero-copy::after {
    background:
      radial-gradient(
        ellipse at 38% 46%,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.95) 28%,
        rgba(255,255,255,.84) 48%,
        rgba(255,255,255,.62) 66%,
        rgba(255,255,255,.34) 81%,
        rgba(255,255,255,.12) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }


  /* ==================================================
     2. УБИРАЕМ ВСЕ ОТДЕЛЬНЫЕ ЭФФЕКТЫ С ПОДЗАГОЛОВКА
     ================================================== */

  body .structural-mobile-hero .mobile-hero-copy p {
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;

    filter: none !important;
  }

  body .structural-mobile-hero .mobile-hero-copy p::before,
  body .structural-mobile-hero .mobile-hero-copy p::after {
    content: none !important;
    display: none !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }


  /* ==================================================
     3. УБИРАЕМ ЭФФЕКТЫ С ОТДЕЛЬНЫХ СЛОВ ПОДЗАГОЛОВКА
     ================================================== */

  body .structural-mobile-hero
  .mobile-hero-copy p .hero-haze-word {
    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  body .structural-mobile-hero
  .mobile-hero-copy p .hero-haze-word::before,

  body .structural-mobile-hero
  .mobile-hero-copy p .hero-haze-word::after {
    content: none !important;
    display: none !important;

    background: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

}

/* v5.10.74 — общая HERO-дымка ещё на два тона плотнее */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {
    background:
      radial-gradient(
        ellipse at 38% 46%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 28%,
        rgba(255,255,255,.94) 48%,
        rgba(255,255,255,.78) 66%,
        rgba(255,255,255,.50) 81%,
        rgba(255,255,255,.22) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }

}

/* v5.10.75 — немного больше HERO-дымки слева сверху */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {
    background:

      /* дополнительная мягкая дымка в левом верхнем углу */
      radial-gradient(
        ellipse at 16% 18%,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.58) 28%,
        rgba(255,255,255,.32) 52%,
        rgba(255,255,255,.12) 72%,
        rgba(255,255,255,0) 90%
      ),

      /* основная нынешняя дымка */
      radial-gradient(
        ellipse at 36% 43%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 28%,
        rgba(255,255,255,.94) 48%,
        rgba(255,255,255,.78) 66%,
        rgba(255,255,255,.50) 81%,
        rgba(255,255,255,.22) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }

}

/* v5.10.75 — немного больше HERO-дымки слева сверху */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {
    background:

      /* дополнительная мягкая дымка в левом верхнем углу */
      radial-gradient(
        ellipse at 16% 18%,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.58) 28%,
        rgba(255,255,255,.32) 52%,
        rgba(255,255,255,.12) 72%,
        rgba(255,255,255,0) 90%
      ),

      /* основная нынешняя дымка */
      radial-gradient(
        ellipse at 36% 43%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 28%,
        rgba(255,255,255,.94) 48%,
        rgba(255,255,255,.78) 66%,
        rgba(255,255,255,.50) 81%,
        rgba(255,255,255,.22) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }

}

/* v5.10.76 — увеличиваем диаметр дымки в левом верхнем секторе HERO */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {

    /*
      Дымка стала немного больше и смещена вверх-влево.
      Это добавляет светлую область над первой буквой «С»,
      не создавая отдельного пятна.
    */
    left: -24px !important;
    top: 8px !important;

    width: 132% !important;
    height: 178px !important;

    background:
      radial-gradient(
        ellipse at 30% 38%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 30%,
        rgba(255,255,255,.94) 49%,
        rgba(255,255,255,.78) 67%,
        rgba(255,255,255,.50) 81%,
        rgba(255,255,255,.22) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(9px) !important;
  }

}

/* v5.10.76 — предыдущая дымка, только немного большего диаметра */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {

    /* Положение возвращаем как в удачной версии */
    left: -12px !important;
    top: 24px !important;

    /* Только немного увеличиваем размер */
    width: 124% !important;
    height: 162px !important;

    /* Возвращаем удачную плотность v5.10.74 */
    background:
      radial-gradient(
        ellipse at 38% 46%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 28%,
        rgba(255,255,255,.94) 48%,
        rgba(255,255,255,.78) 66%,
        rgba(255,255,255,.50) 81%,
        rgba(255,255,255,.22) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }

}

/* v5.10.77 — та же дымка, только немного шире */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {
    left: -14px !important;
    top: 22px !important;

    width: 130% !important;
    height: 170px !important;

    /* Плотность и характер дымки не меняем */
    background:
      radial-gradient(
        ellipse at 38% 46%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 28%,
        rgba(255,255,255,.94) 48%,
        rgba(255,255,255,.78) 66%,
        rgba(255,255,255,.50) 81%,
        rgba(255,255,255,.22) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }

}

/* v5.10.79 — немного больше дымки в ЛЕВОМ верхнем секторе */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {

    /* Текущие размеры и положение сохраняем */
    left: -14px !important;
    top: 22px !important;
    width: 130% !important;
    height: 170px !important;

    background:

      /* Дополнительная мягкая дымка СЛЕВА СВЕРХУ */
      radial-gradient(
        ellipse at 18% 18%,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.68) 25%,
        rgba(255,255,255,.44) 48%,
        rgba(255,255,255,.20) 68%,
        rgba(255,255,255,.06) 84%,
        rgba(255,255,255,0) 100%
      ),

      /* Основную дымку оставляем прежней */
      radial-gradient(
        ellipse at 38% 46%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.99) 28%,
        rgba(255,255,255,.94) 48%,
        rgba(255,255,255,.78) 66%,
        rgba(255,255,255,.50) 81%,
        rgba(255,255,255,.22) 92%,
        rgba(255,255,255,0) 100%
      ) !important;

    filter: blur(8px) !important;
  }

}

/* v5.10.80 — асимметричная дизайнерская дымка вокруг HERO-текста */
@media (max-width:760px) {

  body .structural-mobile-hero .mobile-hero-copy::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    /*
      Не расширяем вправо.
      Вместо этого уводим облако заметно влево и немного вверх.
    */
    left: -34px !important;
    top: 5px !important;

    width: 118% !important;
    height: 178px !important;

    z-index: -1 !important;
    pointer-events: none !important;

    background:

      /* Мягкий объём СЛЕВА СВЕРХУ — район буквы "С" */
      radial-gradient(
        ellipse at 14% 20%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 26%,
        rgba(255,255,255,.72) 48%,
        rgba(255,255,255,.42) 66%,
        rgba(255,255,255,.16) 82%,
        rgba(255,255,255,0) 100%
      ),

      /* Основное мягкое облако непосредственно под текстом */
      radial-gradient(
        ellipse at 40% 50%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 32%,
        rgba(255,255,255,.74) 53%,
        rgba(255,255,255,.45) 70%,
        rgba(255,255,255,.18) 84%,
        rgba(255,255,255,0) 100%
      ) !important;

    /* Край мягкий, без ощущения белой плашки */
    filter: blur(9px) !important;
    border-radius: 50% !important;
  }

  /*
    Все старые отдельные эффекты у слов выключаем,
    чтобы была одна цельная дизайнерская дымка.
  */
  body .structural-mobile-hero .hero-haze-word,
  body .structural-mobile-hero .hero-haze-word::before,
  body .structural-mobile-hero .hero-haze-word::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    filter: none !important;
  }

  body .structural-mobile-hero .mobile-hero-copy h1,
  body .structural-mobile-hero .mobile-hero-copy p {
    text-shadow: none !important;
  }

}

/* =========================================================
   v5.10.82 — правильная геометрия мобильной шапки
   ЛОГОТИП | ПОИСК | КАТАЛОГ
   ========================================================= */

@media (max-width:760px) {

  /* Основная строка */
  body .main-bar.centered-search-bar {
    display: grid !important;

    grid-template-columns:
      138px
      minmax(0, 1fr)
      126px !important;

    grid-template-rows: 72px !important;

    column-gap: 14px !important;

    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;

    padding: 8px 20px !important;

    align-items: center !important;
    box-sizing: border-box !important;
  }


  /* ==================================================
     1. ЛОГОТИП — ПЕРВАЯ КОЛОНКА
     ================================================== */

  body .main-bar.centered-search-bar .company-logo-link {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 138px !important;
    min-width: 138px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
  }

  body .main-bar.centered-search-bar .company-logo-header {
    width: 126px !important;
    max-width: 126px !important;
    height: auto !important;
    max-height: 72px !important;

    display: block !important;
  }


  /* ==================================================
     2. ПОИСК — СТРОГО ЦЕНТРАЛЬНАЯ КОЛОНКА
     ================================================== */

  body .main-bar.centered-search-bar .header-search.mobile-search-single {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 50px !important;

    margin: 0 !important;
    justify-self: stretch !important;
    align-self: center !important;
  }

  body .main-bar.centered-search-bar
  .mobile-search-single #searchInput {
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;

    box-sizing: border-box !important;
  }


  /* ==================================================
     3. КАТАЛОГ — ПРАВАЯ КОЛОНКА
     ================================================== */

  body .main-bar.centered-search-bar .header-catalog-nav {
    grid-column: 3 !important;
    grid-row: 1 !important;

    width: 126px !important;
    min-width: 126px !important;

    margin: 0 !important;

    justify-self: end !important;
    align-self: center !important;
  }

  body .main-bar.centered-search-bar .header-catalog-button {
    width: 126px !important;
    min-width: 126px !important;
    height: 50px !important;
  }


  /* Старый spacer больше не участвует в сетке */
  body .main-bar.centered-search-bar .header-spacer {
    display: none !important;
  }

}

/* =========================================================
   v5.10.83 — компактнее логотип/каталог, шире поиск
   ========================================================= */

@media (max-width:760px) {

  /* Общая строка:
     ЛОГОТИП | ПОИСК | КАТАЛОГ
  */
  body .main-bar.centered-search-bar {
    display: grid !important;

    grid-template-columns:
      118px
      minmax(0, 1fr)
      96px !important;

    grid-template-rows: 72px !important;

    /* Было 14 px — сильно уменьшаем */
    column-gap: 6px !important;

    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;

    /* Было по 20 px — отдаём больше места поиску */
    padding: 8px 10px !important;

    align-items: center !important;
    box-sizing: border-box !important;
  }


  /* ==========================
     ЛОГОТИП
     ========================== */

  body .main-bar.centered-search-bar .company-logo-link {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 118px !important;
    min-width: 118px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body .main-bar.centered-search-bar .company-logo-header {
    /* Чуть крупнее первоначальных 118 px */
    width: 122px !important;
    max-width: 122px !important;
    height: auto !important;
    max-height: 72px !important;

    display: block !important;
  }


  /* ==========================
     ПОИСК — максимально широкий
     ========================== */

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: stretch !important;
    align-self: center !important;
  }

  body .main-bar.centered-search-bar
  .mobile-search-single #searchInput {

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 50px !important;
    box-sizing: border-box !important;
  }


  /* ==========================
     КАТАЛОГ
     ========================== */

  body .main-bar.centered-search-bar .header-catalog-nav {
    grid-column: 3 !important;
    grid-row: 1 !important;

    width: 96px !important;
    min-width: 96px !important;

    margin: 0 !important;

    justify-self: end !important;
    align-self: center !important;
  }

  body .main-bar.centered-search-bar .header-catalog-button {
    width: 96px !important;
    min-width: 96px !important;
    height: 50px !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  body .main-bar.centered-search-bar .header-spacer {
    display: none !important;
  }

}

/* =========================================================
   v5.10.84 — визуально одинаковые отступы:
   ЛОГОТИП | 8px | ПОИСК | 8px | КАТАЛОГ
   ========================================================= */

@media (max-width:760px) {

  body .main-bar.centered-search-bar {
    display: grid !important;

    /*
      Колонка логотипа намеренно немного уже самого изображения:
      это компенсирует визуальное пустое пространство внутри PNG.
    */
    grid-template-columns:
      112px
      minmax(0, 1fr)
      96px !important;

    grid-template-rows: 72px !important;

    column-gap: 8px !important;
    row-gap: 0 !important;

    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;

    padding: 8px 10px !important;

    align-items: center !important;
    box-sizing: border-box !important;
  }


  /* -------------------------
     ЛОГОТИП
     ------------------------- */

  body .main-bar.centered-search-bar .company-logo-link {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 112px !important;
    min-width: 112px !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    overflow: visible !important;
  }

  body .main-bar.centered-search-bar .company-logo-header {
    /* Сам логотип остаётся крупным */
    width: 122px !important;
    max-width: 122px !important;
    height: auto !important;

    margin: 0 !important;
    display: block !important;
  }


  /* -------------------------
     ПОИСК
     ------------------------- */

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: stretch !important;
    align-self: center !important;
  }

  body .main-bar.centered-search-bar
  .mobile-search-single #searchInput {

    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }


  /* -------------------------
     КАТАЛОГ
     ------------------------- */

  body .main-bar.centered-search-bar .header-catalog-nav {
    grid-column: 3 !important;
    grid-row: 1 !important;

    width: 96px !important;
    min-width: 96px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    align-self: center !important;
  }

  body .main-bar.centered-search-bar .header-catalog-button {
    width: 96px !important;
    min-width: 96px !important;
    margin: 0 !important;
  }

  body .main-bar.centered-search-bar .header-spacer {
    display: none !important;
  }
}

/* =========================================================
   v5.10.85 — визуальная компенсация прозрачного края логотипа

   Левый край поиска двигаем к логотипу на 10px,
   но правый край поиска оставляем на прежнем месте.
   ========================================================= */

@media (max-width:760px) {

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    /* Подтягиваем поиск влево к ВИДИМОМУ краю логотипа */
    margin-left: -10px !important;

    /*
      Одновременно увеличиваем ширину на эти же 10px.
      Поэтому правый край поиска НЕ двигается,
      и расстояние поиск → Каталог остаётся прежним.
    */
    width: calc(100% + 10px) !important;

    max-width: none !important;
    min-width: 0 !important;
  }

}

/* v5.10.86 — ещё сильнее подтягиваем поиск к логотипу */
@media (max-width:760px) {

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    /* Было -10px, теперь -18px */
    margin-left: -18px !important;

    /*
      Увеличиваем ширину на те же 18px,
      чтобы правый край поиска остался там же.
    */
    width: calc(100% + 18px) !important;

    min-width: 0 !important;
    max-width: none !important;
  }

}

/* =========================================================
   v5.10.87 — выравниваем визуальные отступы вокруг поиска
   ========================================================= */

@media (max-width:760px) {

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    /*
      Было -18px.
      Ещё на 8px приближаем поиск к логотипу.
    */
    margin-left: -26px !important;

    /*
      Расширяем поиск ровно на величину сдвига.
      Поэтому его ПРАВЫЙ край остаётся на прежнем месте.
    */
    width: calc(100% + 26px) !important;

    min-width: 0 !important;
    max-width: none !important;
  }

}

/* =========================================================
   v5.10.88 — финальная корректировка на 5px
   ========================================================= */

@media (max-width:760px) {

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    /* Было -26px, добавляем ещё 5px */
    margin-left: -31px !important;

    /* Правый край поиска сохраняем на прежнем месте */
    width: calc(100% + 31px) !important;

    min-width: 0 !important;
    max-width: none !important;
  }

}

/* =========================================================
   v5.10.89 — ещё 5px к логотипу
   ========================================================= */

@media (max-width:760px) {

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    /* Было -31px, добавляем ещё 5px */
    margin-left: -36px !important;

    /* Правый край поиска остаётся на прежнем месте */
    width: calc(100% + 36px) !important;

    min-width: 0 !important;
    max-width: none !important;
  }

}

/* =========================================================
   v5.10.90 — ещё 5px к логотипу
   ========================================================= */

@media (max-width:760px) {

  body .main-bar.centered-search-bar
  .header-search.mobile-search-single {

    /* Было -36px, добавляем ещё 5px */
    margin-left: -41px !important;

    /* Правый край поиска оставляем на прежнем месте */
    width: calc(100% + 41px) !important;

    min-width: 0 !important;
    max-width: none !important;
  }

}

/* =========================================================
   v5.10.91 — единый размер поисковой строки на всех страницах
   Повторяет главную страницу
   ========================================================= */

@media (max-width:760px) {

  body .main-bar.centered-search-bar .header-search,
  body .main-bar.centered-search-bar .header-search.mobile-search-single,
  body .main-bar.centered-search-bar .search-wrap {

    grid-column: 2 !important;
    grid-row: 1 !important;

    position: relative !important;

    /* Те же размеры и сдвиг, что сейчас на главной */
    margin-left: -41px !important;
    width: calc(100% + 41px) !important;

    min-width: 0 !important;
    max-width: none !important;

    height: 50px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    justify-self: stretch !important;
    align-self: center !important;
  }


  /* Сам input */
  body .main-bar.centered-search-bar .header-search input[type="search"],
  body .main-bar.centered-search-bar #searchInput {

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 50px !important;

    margin: 0 !important;

    padding:
      0
      10px
      0
      42px !important;

    box-sizing: border-box !important;

    border: 1px solid #d5dcd6 !important;
    border-radius: 15px !important;

    background: #fff !important;

    font-size: 16px !important;
    line-height: normal !important;

    box-shadow: none !important;
    outline: none !important;
  }


  /* Лупа — в одинаковом месте на каждой странице */
  body .main-bar.centered-search-bar .header-search-button,
  body .main-bar.centered-search-bar .search-button-left {

    position: absolute !important;

    z-index: 5 !important;

    left: 12px !important;
    top: 50% !important;

    width: 22px !important;
    height: 22px !important;

    padding: 0 !important;
    margin: 0 !important;

    transform: translateY(-50%) !important;

    border: 0 !important;
    background: transparent !important;
  }

}

/* =========================================================
   v5.10.106 — PRODUCT PAGE
   независимые блоки количества и "Добавить в корзину"
   ========================================================= */

@media (max-width:760px) {

  /*
   * Главный нижний блок.
   * Первая колонка строго 126px под количество.
   * Вторая получает всё оставшееся пространство.
   */
  body .product-page-buy {
    display: grid !important;

    grid-template-columns:
      126px
      minmax(0, 1fr) !important;

    grid-template-rows: 48px !important;

    align-items: center !important;

    column-gap: 14px !important;
    row-gap: 0 !important;

    width: auto !important;

    left: 0 !important;
    right: 0 !important;

    box-sizing: border-box !important;
  }


  /* ==================================================
     − КОЛИЧЕСТВО +
     ================================================== */

  body .product-page-buy .product-page-qty {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;

    display: grid !important;

    grid-template-columns:
      34px
      58px
      34px !important;

    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;

    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    align-self: center !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    flex: none !important;
  }


  body .product-page-buy .product-page-qty button {
    position: static !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    line-height: 1 !important;

    box-sizing: border-box !important;
  }


  body .product-page-buy .product-page-qty #qtyValue,
  body .product-page-buy .product-page-qty > span {
    position: static !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;

    height: 46px !important;

    margin: 0 !important;
    padding: 0 2px !important;

    transform: none !important;

    text-align: center !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;
  }


  /* ==================================================
     ДОБАВИТЬ В КОРЗИНУ
     ================================================== */

  body .product-page-buy .product-page-add {
    grid-column: 2 !important;
    grid-row: 1 !important;

    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    transform: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    white-space: nowrap !important;
  }

}


/* =========================================================
   Очень узкий телефон:
   если для двух блоков физически не хватает места,
   ставим их друг под другом.
   ========================================================= */

@media (max-width:380px) {

  body .product-page-buy {
    grid-template-columns: 1fr !important;
    grid-template-rows: 48px 48px !important;

    row-gap: 10px !important;
  }

  body .product-page-buy .product-page-qty {
    grid-column: 1 !important;
    grid-row: 1 !important;

    justify-self: center !important;
  }

  body .product-page-buy .product-page-add {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 100% !important;
  }

}


/* =========================================================
   DP Food v5.10.113
   Каталог: компактное название + цена
   ========================================================= */

@media (max-width:760px) {

  /* Текстовая часть карточки */
  #productGrid .retail-product-card .retail-card-body {
    display: block !important;

    padding-left: 10px !important;
    padding-right: 10px !important;

    text-align: left !important;
  }


  /* ==================================================
     НАЗВАНИЕ ТОВАРА
     Убираем старые min-height 42/47px
     ================================================== */

  #productGrid .retail-product-card .retail-card-heading {
    display: block !important;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
  }


  #productGrid .retail-product-card .retail-card-heading h3 {
    display: -webkit-box !important;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

    text-align: left !important;

    line-height: 1.18 !important;
  }


  /* Старая отдельная единица измерения не занимает места */
  #productGrid .retail-product-card .retail-card-unit {
    display: none !important;

    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* Рейтинг на мобильном и так скрыт,
     но гарантируем, что он не создаёт отступ */
  #productGrid .retail-product-card .retail-card-rating {
    display: none !important;

    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==================================================
     ЦЕНА
     Убираем старые margin-top 8/9px
     ================================================== */

  #productGrid .retail-product-card .retail-main-price {
    display: flex !important;

    align-items: baseline !important;
    justify-content: flex-start !important;

    width: 100% !important;

    margin: 5px 0 0 0 !important;
    padding: 0 !important;

    text-align: left !important;

    gap: 0 !important;

    line-height: 1.1 !important;
  }


  #productGrid .retail-product-card .retail-main-price-line,
  #productGrid .retail-product-card .retail-main-price strong {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #286a3c !important;

    line-height: 1.1 !important;

    text-align: left !important;

    white-space: nowrap !important;
  }

}