/* Mobile homepage (phones only, max-width 760px). Approved by Marlot 02-11-2026 as mockup v3.
   Markup lives in index.html, pt/index.html and es/index.html inside <div id="mh">, built by
   scripts/build_home_m.py. On phones the old home sections are hidden; on wider screens #mh is. */
#mh{display:none}
@media (max-width:760px){
  main.mhhome>*:not(#mh):not(.searchbar){display:none!important}
  body:has(main.mhhome) .promo{display:none!important}
  #mh{display:block;background:var(--cream);color:var(--charcoal);font-family:var(--body)}
}
#mh *{box-sizing:border-box}
#mh h1,#mh h2,#mh h3,#mh p,#mh ul{margin:0;padding:0}
#mh a{color:inherit;text-decoration:none}
#mh button{font:inherit;cursor:pointer;color:inherit}
#mh .mh-k{display:block;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
#mh .mh-h2{font-family:var(--head);font-weight:800;font-size:28px;line-height:1.08;letter-spacing:-.02em;color:var(--forest);margin:10px 0 12px;text-wrap:balance}
#mh .mh-lead{font-size:15px;line-height:1.55;color:#4d5449;margin:0 0 28px}
#mh .mh-sec{padding:64px 20px}
#mh .mh-be{background:var(--beige)}
#mh .mh-link{font-family:var(--head);font-weight:700;font-size:14px;color:var(--forest);display:inline-flex;gap:6px;align-items:center}
#mh .mh-link:after{content:"\2192"}

/* hero: photo on top (horse, Marlot and the bale), text below on forest */
#mh .mh-hero{position:relative;color:#fff;background:var(--forest-2) url(/assets/hero-photo.webp) 60% 0/auto 380px no-repeat;padding-top:330px}
#mh .mh-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,42,2,.35) 0,rgba(12,42,2,0) 80px,rgba(12,42,2,0) 280px,var(--forest-2) 380px)}
#mh .mh-in{position:relative;z-index:1;padding:0 20px 74px}
#mh .mh-hero .mh-k{color:var(--gold-soft)}
#mh .mh-hero h1{font-family:var(--head);font-weight:800;font-size:37px;line-height:1.04;letter-spacing:-.03em;margin:10px 0 14px;color:#fff;text-wrap:balance}
#mh .mh-hero p{font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.88);margin:0 0 20px}
#mh .mh-hero p b{color:#fff;font-weight:600}
#mh .mh-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#mh .mh-btn{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--head);font-weight:700;font-size:14.5px;padding:14px 10px;border-radius:40px;border:0;line-height:1.2}
#mh .mh-btn svg{width:18px;height:18px;fill:currentColor;flex:none}
#mh .mh-wa{background:#1FA855;color:#fff}
#mh .mh-cr{background:var(--cream);color:var(--forest)}
#mh .mh-code{margin-top:12px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.75)}
#mh .mh-code button{background:none;border:0;padding:0;color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;font-size:12.5px}
#mh .mh-tick{position:absolute;left:0;right:0;bottom:0;height:48px;z-index:2;overflow:hidden;border-top:1px solid rgba(251,250,246,.14);display:flex;align-items:center}
#mh .mh-row{display:flex;gap:34px;white-space:nowrap;animation:mhtk 40s linear infinite;padding-left:20px}
#mh .mh-row span{font-size:13px;color:rgba(255,255,255,.85)}
#mh .mh-row b{color:var(--gold-soft);letter-spacing:1px;margin-right:6px;font-weight:600}
#mh .mh-trust{display:grid;grid-template-columns:1fr 1fr;margin:0 0 20px;border:1px solid rgba(251,250,246,.16);border-radius:14px;background:rgba(251,250,246,.06)}
#mh .mh-tr{display:flex;align-items:center;gap:9px;padding:12px 14px;color:#fff;text-decoration:none}
#mh .mh-tr+.mh-tr{border-left:1px solid rgba(251,250,246,.16)}
#mh .mh-tr b{font-family:var(--head);font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1}
#mh .mh-tr span{display:block;font-size:11.5px;line-height:1.3;color:rgba(255,255,255,.8)}
#mh .mh-tr i{display:block;font-style:normal;color:var(--gold-soft);letter-spacing:1px;font-size:11px;margin-bottom:1px}
#mh .mh-g{width:20px;height:20px;flex:none;background:#fff;border-radius:50%;padding:3px}
#mh .mh-tlab{position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;align-items:center;gap:6px;padding:0 14px 0 20px;background:linear-gradient(90deg,var(--forest-2) 78%,rgba(12,42,2,0));color:#fff}
#mh .mh-tlab .mh-g{width:18px;height:18px;padding:2.5px}
#mh .mh-tlab b{font-family:var(--head);font-weight:800;font-size:14px;padding-right:12px;color:#fff;margin:0;letter-spacing:0}
#mhRev{scroll-margin-top:70px}
#mh a.mh-tick{color:inherit;text-decoration:none}
#mh .mh-tr:active,#mh a.mh-tick:active{background:rgba(251,250,246,.08)}
html:has(#mh){scroll-behavior:smooth}
@keyframes mhtk{to{transform:translateX(-50%)}}

/* shop list */
#mh .mh-idx{list-style:none;margin-top:6px}
#mh .mh-idx a{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #E3DED3}
#mh .mh-t{width:58px;height:58px;border-radius:12px;background:#E3DED3 center/cover}
#mh .mh-idx b{font-family:var(--head);font-weight:800;font-size:17px;color:var(--charcoal);display:block}
#mh .mh-idx small{display:block;font-size:13px;line-height:1.35;color:#4d5449}
#mh .mh-ar{font-size:18px;color:var(--forest)}

/* the bale and why horses are happy with it */
#mh .mh-bale{position:relative;margin:0 -20px;height:300px;background:#ddd url(/assets/mh/news-pasture-inline-haybale.webp) 40% 62%/cover}
#mh .mh-pin{position:absolute;display:flex;align-items:center;gap:7px;transform:translate(-8px,-50%)}
#mh .mh-pin i{width:16px;height:16px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 5px rgba(251,250,246,.35);flex:none;position:relative}
#mh .mh-pin i:after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--forest)}
#mh .mh-pin span{background:rgba(251,250,246,.94);color:var(--forest);font-family:var(--head);font-weight:700;font-size:12px;padding:6px 10px;border-radius:40px;box-shadow:0 4px 14px rgba(0,0,0,.15);white-space:nowrap}
#mh .mh-pin.mh-r{flex-direction:row-reverse;transform:translate(calc(-100% + 8px),-50%)}
#mh .mh-happy{list-style:none;margin:26px 0 22px}
#mh .mh-happy li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;padding:15px 0;border-bottom:1px solid #E3DED3}
#mh .mh-happy li:first-child{border-top:1px solid #E3DED3}
#mh .mh-happy li:before{content:"";grid-row:1/3;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#E4EAE1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23113602' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
#mh .mh-happy b{font-family:var(--head);font-weight:800;font-size:16.5px;color:var(--forest);line-height:1.25}
#mh .mh-happy span{font-size:15px;line-height:1.5;color:#4d5449;margin-top:3px}

/* field to stable */
#mh .mh-steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:8px -20px 0;padding:0 20px 4px;scroll-padding-left:20px}
#mh .mh-steps::-webkit-scrollbar{display:none}
#mh .mh-st{flex:none;width:78%;scroll-snap-align:start}
#mh .mh-st .mh-im{height:200px;border-radius:14px;background:#E3DED3 center/cover}
#mh .mh-st .mh-k{margin-top:14px}
#mh .mh-st h3{font-family:var(--head);font-weight:800;font-size:18px;color:var(--forest);margin:4px 0 6px}
#mh .mh-st p{font-size:15px;line-height:1.5;color:#4d5449}

/* small bales: turning pallet + one-tap choices */
#mh .mh-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 18px}
#mh .mh-perks div{background:var(--beige);border-radius:12px;padding:12px 10px}
#mh .mh-perks b{display:block;font-family:var(--head);font-weight:900;font-size:18px;color:var(--forest);white-space:nowrap}
#mh .mh-perks span{display:block;font-size:11.5px;line-height:1.3;color:#4d5449}
#mh .mh-yard{position:relative;height:230px;margin:0 -20px;background:var(--beige);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#mh .p3-stage{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 20%}
#mh .p3-anchor{position:absolute;left:50%;width:0;height:0;transform-style:preserve-3d}
#mh .p3-rot{position:absolute;width:0;height:0;transform-style:preserve-3d}
#mh .p3-box{position:absolute;width:0;height:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.9,.25,1.08),opacity .35s}
#mh .p3-f{position:absolute;left:0;top:0;backface-visibility:hidden}
#mh .p3-shadow{position:absolute;left:0;top:0;background:radial-gradient(closest-side,rgba(40,30,10,.42),rgba(0,0,0,0))}
#mh .hay{background:url(/assets/pdpm/bale-hay.jpg) center/cover}
#mh .hay.side{background:linear-gradient(rgba(10,20,0,.3),rgba(10,20,0,.3)),url(/assets/pdpm/bale-hay.jpg) 30% center/cover}
#mh .hay.top{background:linear-gradient(rgba(255,250,220,.1),rgba(255,250,220,.1)),url(/assets/pdpm/bale-hay.jpg) 70% center/cover}
#mh .bale-edge{box-shadow:inset 0 0 0 1.5px rgba(25,30,8,.55),inset 0 0 16px rgba(0,0,0,.22)}
#mh .wood{background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),url(/assets/pdpm/wood.jpg) center/100% 100%}
#mh .wood.side{background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)),url(/assets/pdpm/wood.jpg) center/100% 100%}
#mh .wood.top{background:repeating-linear-gradient(90deg,rgba(60,35,10,.4) 0 3px,transparent 3px 36px),url(/assets/pdpm/wood.jpg) center/100% 100%}
#mh .mh-yx{position:absolute;right:18px;top:16px;z-index:2;text-align:right;line-height:1;color:var(--forest);opacity:0;transition:opacity .3s}
#mh .mh-yx.on{opacity:1}
#mh .mh-yx b{display:block;font-family:var(--head);font-weight:900;font-size:34px}
#mh .mh-yx span{font-size:11px;font-weight:600;color:#4d5449}
#mh .mh-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
#mh .mh-tile{border:1px solid #E3DED3;background:var(--cream);border-radius:14px;padding:12px 8px;text-align:left;display:grid;gap:2px}
#mh .mh-tile em{font-style:normal;font-size:11.5px;font-weight:600;color:#4d5449}
#mh .mh-tile b{font-family:var(--head);font-weight:900;font-size:16px;color:var(--charcoal)}
#mh .mh-tile span{font-family:var(--head);font-weight:800;font-size:13.5px;color:var(--forest);font-variant-numeric:tabular-nums;min-height:1.2em}
#mh .mh-tile[aria-checked="true"]{border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest);background:#fff}
#mh .mh-cta{display:block;width:100%;margin-top:14px;border:0;border-radius:40px;background:var(--forest);color:var(--cream);font-family:var(--head);font-weight:700;font-size:15.5px;padding:16px;text-align:center}
#mh .mh-fine{font-size:12.5px;color:#4d5449;line-height:1.45;margin-top:10px;text-align:center}

/* delivery card, real prices from /.netlify/functions/delivery-estimate */
#mh .mh-ticket{background:#fff;border-radius:14px;box-shadow:0 1px 0 #E3DED3}
#mh .mh-ticket .mh-top{padding:18px}
#mh .mh-field{display:flex;background:var(--beige);border-radius:40px;padding:4px}
#mh .mh-field input{flex:1;min-width:0;border:0;background:transparent;padding:0 16px;font:inherit;font-size:16px;color:var(--charcoal);outline:none;box-shadow:none}
#mh .mh-field button{border:0;background:var(--forest);color:var(--cream);font-family:var(--head);font-weight:700;border-radius:40px;padding:12px 18px;font-size:14px;white-space:nowrap}
#mh .mh-route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:18px}
#mh .mh-p{font-size:11px;color:#4d5449;line-height:1.25}
#mh .mh-p span{display:block}
#mh .mh-p b{display:block;font-family:var(--head);font-weight:800;font-size:14px;color:var(--charcoal)}
#mh .mh-p.mh-r{text-align:right}
#mh .mh-line{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--sage) 0 6px,transparent 6px 11px)}
#mh .mh-line:before,#mh .mh-line:after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%)}
#mh .mh-line:before{left:-2px;background:var(--forest)}
#mh .mh-line:after{right:-2px;background:var(--gold)}
#mh .mh-line em{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-style:normal;font-family:var(--head);font-weight:800;font-size:12px;color:var(--forest);background:#fff;padding:0 6px;white-space:nowrap}
#mh .mh-msg{margin-top:12px;font-size:13.5px;line-height:1.45;color:#B23A2E}
#mh .mh-bot{padding:6px 18px 16px;border-top:1px solid var(--beige)}
#mh .mh-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--beige)}
#mh .mh-opt:last-child{border:0}
#mh .mh-opt b{font-family:var(--head);font-weight:800;font-size:14.5px}
#mh .mh-opt .mh-a{font-family:var(--head);font-weight:900;font-size:18px;color:var(--forest);text-align:right;font-variant-numeric:tabular-nums}
#mh .mh-opt p{grid-column:1/-1;font-size:14px;line-height:1.45;color:#4d5449}

/* reviews */
#mh .mh-g5{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;color:#4d5449}
#mh .mh-g5 b{font-family:var(--head);font-weight:900;color:var(--forest);font-size:15px}
#mh .mh-g5 i{font-style:normal;color:var(--gold);letter-spacing:1px}
#mh .mh-quotes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px}
#mh .mh-quotes::-webkit-scrollbar{display:none}
#mh .mh-q{flex:none;width:100%;scroll-snap-align:start;padding:0 20px}
#mh .mh-q blockquote{margin:0;font-family:var(--head);font-weight:800;font-size:23px;line-height:1.22;letter-spacing:-.01em;color:var(--forest)}
#mh .mh-q blockquote:before{content:"\201C";display:block;font-size:64px;line-height:.6;color:var(--gold);margin:14px 0 8px}
#mh .mh-who{margin-top:16px;font-size:13.5px;color:#4d5449}
#mh .mh-who b{color:var(--charcoal);font-weight:600}
#mh .mh-dots{display:flex;gap:6px;margin-top:22px;align-items:center}
#mh .mh-dots i{width:7px;height:7px;border-radius:7px;background:#E3DED3;transition:all .3s}
#mh .mh-dots i.on{width:22px;background:var(--forest)}
#mh .mh-dots .mh-link{margin-left:auto}

/* closing photo with the newsletter */
#mh .mh-close{position:relative;height:520px;color:#fff;background:var(--forest-2) url(/assets/mh/welcome-hero.webp) 37% center/cover}
#mh .mh-close:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,42,2,.1) 20%,rgba(12,42,2,.92) 78%)}
#mh .mh-close .mh-in{position:absolute;left:0;right:0;bottom:0;padding:0 20px 30px}
#mh .mh-close .mh-k{color:var(--gold-soft)}
#mh .mh-close .mh-h2{color:#fff}
#mh .mh-close p{margin:0 0 16px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
#mh .mh-close .mh-field{background:var(--cream)}
#mh .mh-alt{margin-top:12px;font-size:13px;color:rgba(255,255,255,.8)}
#mh .mh-alt a{color:var(--gold-soft);text-decoration:underline}

#mh a:focus-visible,#mh button:focus-visible,#mh input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){#mh .mh-row{animation:none}#mh .p3-box{transition:none}}