/* 3TREE Premium Mobile V4: preview only, scoped to the React homepage and mobile viewport. */
@media (max-width:767px) {
:root{--tree-paper:#f7f3ed;--tree-ink:#241d18;--tree-gold:#c9a55c}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{min-width:0;background:var(--tree-paper)}
#root,main,main>section{min-width:0;max-width:100%}
main{overflow-x:clip;background:var(--tree-paper)!important}
img,video{max-width:100%}a,button{touch-action:manipulation}
:is(a,button,input,select,textarea):focus-visible{outline:3px solid var(--tree-gold);outline-offset:3px}
input,select,textarea{font-size:16px!important;max-width:100%}
.container-wide{padding-inline:18px!important}
/* Compact shopping-app header, existing menu logic remains unchanged. */
header{background:#fffdf9!important;box-shadow:0 2px 12px rgba(32,25,19,.06)}
header>.container-wide.flex{height:62px!important;padding-inline:12px!important;gap:5px!important}
header>.container-wide.flex>div{min-width:0}
header .header-icon{width:38px!important;min-width:34px;height:42px!important}
header .header-icon svg{width:20px;height:20px}
header>.relative.border-t{display:none!important}
header .fixed.inset-0>div.absolute.inset-y-0{width:min(88vw,355px)!important;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
header .fixed.inset-0 button,header .fixed.inset-0 a{min-height:43px}
/* Hero: the desktop cover contains a giant embedded logo. On mobile show a furniture image instead. */
main>section:nth-child(1){position:relative!important;display:flex!important;flex-direction:column!important;min-height:0!important;padding:0 0 20px!important;background:#211915!important;overflow:hidden}
main>section:nth-child(1)>img{display:none!important}
main>section:nth-child(1)::before{content:"";display:block;width:100%;height:clamp(290px,91vw,430px);background:linear-gradient(180deg,rgba(28,22,18,.02) 38%,rgba(28,22,18,.72) 100%),url('https://images.hostinger.com/0f448616-a5da-4613-ace0-e8ae9b92646a.png') center/cover no-repeat;background-color:#3a3028}
main>section:nth-child(1)::after{content:"3TREE  •  CRAFTED FOR LIFE";position:absolute;top:18px;inset-inline:18px;color:#fff;font-size:11px;letter-spacing:.18em;font-weight:700;text-align:center;text-shadow:0 2px 9px #211915}
main>section:nth-child(1)>.absolute{position:relative!important;inset:auto!important;bottom:auto!important;margin:-8px 0 0!important;padding:0 14px!important;z-index:1}
main>section:nth-child(1)>.absolute .container-wide{padding:0!important}
main>section:nth-child(1)>.absolute .flex{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px!important}
main>section:nth-child(1)>.absolute a{width:100%!important;min-width:0!important;min-height:50px!important;display:flex!important;justify-content:center!important;padding:10px 7px!important;text-align:center;font-size:12px!important;line-height:1.4!important;letter-spacing:0!important;white-space:normal}
/* About: editorial image card + compact readable copy, no fixed-height gaps. */
main>section:nth-child(2){display:flex!important;flex-direction:column!important;padding:18px 14px 22px!important;gap:0!important;background:var(--tree-paper)!important}
main>section:nth-child(2)>:first-child{position:relative!important;min-height:0!important;height:235px!important;overflow:hidden;border-radius:14px 14px 0 0}
main>section:nth-child(2)>:first-child img{object-fit:cover!important}
main>section:nth-child(2)>:nth-child(2){min-height:0!important;height:auto!important;padding:22px 19px 24px!important;background:#fff!important;color:var(--tree-ink)!important;border-radius:0 0 14px 14px;box-shadow:0 10px 26px rgba(42,30,22,.06)}
main>section:nth-child(2)>:nth-child(2) h2{font-size:clamp(24px,6vw,30px)!important;line-height:1.4!important;color:var(--tree-ink)!important}
main>section:nth-child(2)>:nth-child(2) p:not(:first-child){font-size:14px!important;line-height:1.9!important;color:#51463e!important;margin-top:13px!important}
/* Philosophy: image first, then dark text card. Avoid V2 white-on-white. */
main>section:nth-child(3){display:flex!important;flex-direction:column!important;gap:0!important;background:#241b16!important}
main>section:nth-child(3)>:nth-child(2){order:0!important;position:relative!important;min-height:0!important;height:220px!important;overflow:hidden}
main>section:nth-child(3)>:nth-child(2) img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
main>section:nth-child(3)>:first-child{order:1!important;display:block!important;min-height:0!important;height:auto!important;padding:24px 21px 29px!important;background:#241b16!important;color:#fff!important}
main>section:nth-child(3)>:first-child h2{font-size:clamp(25px,6vw,31px)!important;line-height:1.38!important;color:#fff!important}
main>section:nth-child(3)>:first-child p:not(:first-child){font-size:14px!important;line-height:1.9!important;color:#f3e9df!important;margin-top:12px!important}
/* Factory: text flows under photo rather than overlaying a short viewport. */
main>section:nth-child(4){background:#241b16!important}
main>section:nth-child(4)>img{height:240px!important;width:100%!important;object-fit:cover!important;display:block!important}
main>section:nth-child(4)>.absolute.inset-0.bg-gradient-to-r{display:none!important}
main>section:nth-child(4)>.absolute.inset-0.flex{position:relative!important;inset:auto!important;display:block!important;padding:0 14px 20px!important}
main>section:nth-child(4)>.absolute.inset-0.flex .container-wide{padding:0!important}
main>section:nth-child(4)>.absolute.inset-0.flex .border{padding:23px 18px!important;background:#30241e!important;border:1px solid #5c4b3d!important;box-shadow:none!important;backdrop-filter:none!important;border-radius:12px}
main>section:nth-child(4)>.absolute.inset-0.flex h2{font-size:clamp(24px,6vw,30px)!important;line-height:1.4!important}
main>section:nth-child(4)>.absolute.inset-0.flex p{font-size:14px!important;line-height:1.85!important}
main>section:nth-child(4)>.absolute.inset-0.flex .mt-8.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important}
main>section:nth-child(4)>.absolute.inset-0.flex .mt-8.grid>div{min-width:0;gap:8px!important}
main>section:nth-child(4)>.absolute.inset-0.flex .mt-8.grid span{font-size:12px!important;line-height:1.5!important}
/* Category cards: generous photography and legible captions. */
main>section:nth-child(5){display:grid!important;grid-template-columns:1fr!important;gap:13px!important;padding:16px 14px!important;background:var(--tree-paper)!important}
main>section:nth-child(5)>a{min-height:320px!important;height:320px!important;border-radius:15px!important;overflow:hidden}
main>section:nth-child(5)>a img{width:100%!important;height:100%!important;object-fit:cover!important}
main>section:nth-child(5)>a h2{font-size:clamp(28px,8vw,38px)!important}
/* All other editorial image/text grids: avoid 500px empty columns. */
main h1,main h2,main h3{overflow-wrap:break-word}
.shop-card-premium{min-width:0;max-width:100%;overflow:hidden}
.shop-card-title{font-size:14px!important;line-height:1.5!important}
.shop-card-button{min-height:46px}
footer{overflow-wrap:anywhere}
}
@media(max-width:359px){main>section:nth-child(1)>.absolute .flex{grid-template-columns:1fr!important}.container-wide{padding-inline:12px!important}main>section:nth-child(4)>.absolute.inset-0.flex .mt-8.grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.shop-card-premium,.shop-card-image img{transition:none!important}}