/* PYHORO v2 — phone layout (<=760px), modelled on the PYHORO Buyer app. Loaded with media="(max-width:760px)". */
body{padding-bottom:84px;font-size:14px}
.utility,.catnav,.site-footer .about{display:none}
.container{padding:0 16px}

/* ----- Header: logo + location, bell, cart, then full-width search ----- */
.site-header .bar{flex-wrap:wrap;gap:14px 10px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:16px}
.brand{flex:1 1 auto;min-width:0;gap:10px}
.brand-tile{width:46px;height:46px;border-radius:13px}
.brand-text b{font-size:22px}
.brand-text small{display:none}
.brand-text .deliver{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--on-deep);margin-top:3px;white-space:nowrap}
.head-actions{order:2;gap:8px}
.head-account{display:none}
.round-btn{width:46px;height:46px;border-radius:23px}
.cart-pill{font-size:0;width:46px;height:46px;padding:0;justify-content:center;position:relative;background:rgba(255,255,255,.1);gap:0}
.cart-pill .n{position:absolute;top:-3px;right:-3px;font-size:11px;font-weight:800}
.search{order:3;flex:1 1 100%;height:52px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.search select{display:none}
.search input{padding:0 14px;font-size:14px}
.search button{background:var(--primary);border-radius:12px;padding:0 18px}
.search button .ico{display:none}

/* Home: hero overlaps the purple header, like the app */
body.is-home .site-header .bar{padding-bottom:58px}
body.is-home main.page{padding-top:0}
body.is-home .hero-wrap{margin-top:-46px;position:relative;z-index:2}
main.page{padding:16px 0 28px}
.page-gap{gap:20px}

/* ----- Hero banner: text left, photo right ----- */
body .hero{flex:1 1 100%;min-height:0;flex-wrap:nowrap;border-radius:22px}
body .hero-copy{flex:1 1 56%;padding:20px 8px 20px 18px;gap:12px}
body .hero .tag{font-size:10px;padding:5px 9px}
body .hero h1{margin-top:12px;font-size:26px;line-height:1.05}
body .hero p{margin-top:10px;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .hero .btn{height:42px;padding:0 16px;font-size:13px}
body .hero .btn-ghost-light,body .hero-price,body .hero-tiles{display:none}
body .hero-img{flex:0 0 44%;min-height:0}
body .hero-img::before{background:linear-gradient(90deg,var(--primary) 0%,rgba(63,29,191,0) 45%)}

/* ----- Trust strip: three short items ----- */
body .trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:14px 6px}
body .trust .row{flex-direction:column;text-align:center;gap:8px;align-items:center}
body .trust .row>span:last-child small{display:none}
body .trust .row>span:last-child b{font-size:12px;font-weight:600;line-height:1.25;display:block}
body .trust .row:nth-child(n+4){display:none}
.icon-tile{width:42px;height:42px}

/* ----- Section titles ----- */
.section-head{margin-bottom:12px;flex-wrap:nowrap}
.section-head h2{font-size:22px}
.section-head .more{font-size:13px;font-weight:700;white-space:nowrap}
.section-head .row.wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:60%}
.section-head .row.wrap::-webkit-scrollbar{display:none}
.chip{white-space:nowrap}

/* ----- Categories: round photos in one row ----- */
body .cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body .cat{background:none;box-shadow:none;padding:0;gap:6px;border-radius:0}
body .cat-img{width:68px;height:68px;border-radius:34px;margin:0}
body .cat b{font-size:12px;font-weight:600;line-height:1.2}
body .cat small{display:none}
body .cat-grid .cat:nth-child(n+4):not(:last-child){display:none}

/* ----- Top deals: swipe row ----- */
body .deals{padding:16px 14px}
body .deal-grid{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none}
body .deal-grid::-webkit-scrollbar{display:none}
body a.deal{flex:0 0 118px;scroll-snap-align:start}
body .deal-img span{font-size:12px;padding:4px 8px}
body .deal-price{font-size:16px}

/* ----- Shops: swipe row of compact cards ----- */
body .shop-grid{display:flex;overflow-x:auto;gap:12px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
body .shop-grid::-webkit-scrollbar{display:none}
body .shop.card{flex:0 0 168px;width:168px;max-width:168px;min-width:0;padding:12px;gap:0;overflow:hidden}
body .shop .shop-thumbs,body .shop .btn{display:none}
body .shop-logo{width:40px;height:40px;border-radius:20px}
body .shop .row{gap:8px;flex-wrap:nowrap}
body .shop .grow b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .shop .grow small{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ----- Product grid: two per row ----- */
.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pc-body{padding:9px 10px 11px;gap:5px}
.pc-name{font-size:13px;height:35px}
.pc-price b{font-size:16px}
.pc-buy{flex-wrap:wrap}
.pc-off{top:7px;left:7px;font-size:11px;padding:3px 6px}

/* ----- Promo cards, footer ----- */
body .promo{padding:20px;border-radius:20px}
body .promo h3{font-size:20px}
.site-footer{margin-top:20px}
.site-footer .cols{padding-top:24px;gap:22px 28px}
.toasts{bottom:92px;right:12px}

/* ----- Bottom navigation ----- */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:#fff;border-top:1px solid var(--line);padding:8px 4px max(10px,env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(16,24,40,.08)}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--muted);position:relative;padding-top:6px}
.bnav a.on{color:var(--primary);font-weight:800}
.bnav a.on::before{content:"";position:absolute;top:-8px;width:34px;height:3px;border-radius:2px;background:var(--primary)}
.bnav .bi{position:relative;display:flex}
.bnav .bi i{position:absolute;top:-6px;right:-9px;min-width:17px;height:17px;border-radius:9px;background:var(--deal);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px}
.cart-pill .n[hidden]{display:none}
body .trust .row small{display:none !important}
body .hero h1{font-size:24px}
body .deals .section-head .row{gap:8px;flex-wrap:nowrap;min-width:0}
body .deals .section-head .icon-tile{width:36px;height:36px;border-radius:11px}
body .deals .section-head h2{font-size:20px;white-space:nowrap}
body .deals .section-head .pill{font-size:11px;padding:4px 8px}
body .deals .section-head .more{font-size:0}
body .deals .section-head .more::after{content:"See all";font-size:13px}
body .section-head h2{white-space:nowrap}
body a.deal>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
body .deal .old{font-size:12px}
body .shop .row>.grow{min-width:0}
body .ap-head{flex-wrap:wrap;gap:12px}
body .ap-head>.grow{flex:1 1 100%}
body .ap-head h1{font-size:24px}
.bnav-off{display:none}
body:has(.cart-bar) .bnav,body:has(.co-bar) .bnav,body:has(.pd-sticky) .bnav{display:none}
/* Section headings never push the page wider: long titles get "..." and the "See all" link stays on screen. */
.section-head>.row:not(.wrap){flex:1 1 auto;min-width:0}
.section-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis}
.section-head>.more{flex:none}
/* Fixed bottom bars always match the screen width. */
.pd-sticky,.cart-bar,.co-bar,.bnav{max-width:100%;box-sizing:border-box}
.pd-sticky .btn{padding:0 12px;min-width:0}