/* shop-forward homepage + shop page (tree_shop_forward.py); colours come from --pc1..--pct on <main> */
.hx .alt{background:var(--pct)}
.hx-price{font-size:1.35rem;font-weight:700;color:#fff;margin-top:1rem}
.hx-price span{font-weight:400;font-size:1rem;opacity:.85}
.hx-trust{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1.1rem;font-size:.95rem}
.hx-trust li{display:flex;align-items:center;gap:.4rem}
.hx-btn-lg{padding:.9rem 1.6rem;font-size:1.05rem;border-radius:10px}
.hx-kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block;margin-bottom:.4rem}
/* hero */
.hx .hero{background:linear-gradient(160deg,var(--pc1),var(--pc2) 60%,var(--pc3))}
.hx .hero p{color:rgba(255,255,255,.88)}
.hx .hero .eyebrow{color:#fff;opacity:.8}
.hx .hero .btn-primary,.hx .hx-cta .btn-primary{background:#fff;color:var(--pc1)}
.hx .hero .hx-trust{color:#fff}
.hx .hero-img{position:relative}
.hx-badge{position:absolute;left:-14px;bottom:18px;background:#fff;color:var(--green-dark);border-radius:12px;padding:.55rem .9rem;box-shadow:0 10px 26px rgba(0,0,0,.25);font-weight:700;line-height:1.25;font-size:.98rem}
.hx-badge small{display:block;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* key-facts cards */
.hx-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(20,53,31,.10);position:relative;z-index:2}
.hx-home .hx-strip{margin-top:-1.6rem}
.hx-strip>div{padding:1rem 1.1rem;display:flex;gap:.7rem;align-items:flex-start;border-left:1px solid var(--line)}
.hx-strip>div:first-child{border-left:0}
.hx-strip svg{color:var(--gold);flex:none;margin-top:.15rem}
.hx-strip dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hx-strip dd{font-weight:600;font-size:.95rem;line-height:1.35}
/* about + tick box */
.hx-two{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem}
.hx-habout{padding:2.2rem 0}
.hx-habout .hx-two{align-items:stretch}
.hx-habout h2,.hx-about h2{margin-bottom:.8rem}
.hx-habout .lead{font-size:1.05rem;line-height:1.58;max-width:none;margin-bottom:.8rem}
.hx-habout .lead:last-child{margin-bottom:0}
.hx-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.2rem;display:flex;flex-direction:column}
.hx-panel h3{font-size:1.15rem;margin-bottom:.55rem}
.hx-ticks{list-style:none;display:flex;flex-direction:column;gap:.32rem}
.hx-panel .hx-ticks{flex:1;justify-content:space-between;font-size:.95rem}
.hx-ticks li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.35}
.hx-ticks svg{color:var(--gold);flex:none;margin-top:.15rem}
/* buy block */
.hx-buy{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.4rem;box-shadow:0 12px 30px rgba(20,53,31,.08)}
.hx-buy .hx-trust{color:var(--muted);font-size:.9rem}
.hx-sizes{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1.1rem}
.hx-size{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:.5rem .8rem;text-decoration:none;color:var(--ink);min-width:118px}
.hx-size:hover{border-color:var(--green)}
.hx-size b{display:block;font-size:.95rem}.hx-size span{color:var(--muted);font-size:.9rem}
.hx-home .hx-buy .bullets{margin-bottom:1rem}
/* fact tables */
.hx-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
.hx-specs .spec{margin-top:0}.hx-specs .spec th{width:38%}
.hx-shop .spec th{background:var(--pct)}
/* guide cards */
.hx-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.hx-head a{font-weight:600}
.hx-g3{grid-template-columns:repeat(3,1fr)}
.hx-gcard{padding:0;overflow:hidden;gap:0}
.hx-gcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.hx-gcard .in{padding:.9rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.35rem}
/* closing buy band */
.hx-cta-sec{padding-top:0}
.hx-shop .hx-cta-sec{padding-top:2.75rem}
.hx-cta{background:linear-gradient(160deg,var(--pc1),var(--pc2) 70%);color:#fff;border-radius:18px;padding:2rem 2.2rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.hx-cta-t{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.2;color:#fff;margin:0 0 .3rem;font-size:1.6rem}
.hx-cta p{color:rgba(255,255,255,.85)}
/* shop page */
.hx-shop .pdp{align-items:start;padding-bottom:1.6rem}
.hx-shop .gallery img#main-img{border-radius:14px;box-shadow:0 14px 34px rgba(20,53,31,.16)}
.hx-shop .hx-buy .buy-btn{padding:1rem;font-size:1.1rem}
.hx-shop .buybox .hx-ticks{margin-top:1rem;font-size:.97rem}
.hx-about{padding:2.4rem 0}
.hx-about .hx-two{align-items:center}
.hx-about .lead{font-size:1.08rem;line-height:1.6;max-width:none}
.hx-about .lead+.lead{margin-top:1rem}
.hx-about img{border-radius:14px;aspect-ratio:1/1;object-fit:cover;width:100%}
.hx-shop .guide-cards .card{padding:0;overflow:hidden;gap:0}
.hx-shop .guide-cards .card img{border-radius:0}
.hx-shop .guide-cards .card h3{padding:.8rem .9rem 0}.hx-shop .guide-cards .card p{padding:.3rem .9rem .95rem}
@media (min-width:769px){.hx-about .hx-two{grid-template-columns:1.4fr .6fr}}
@media (max-width:900px){.hx-g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
 /* phone hero: photo first, compact text, one main button */
 .hx .hero{padding:0 0 2.5rem}.hx .hero .wrap{gap:1rem}
 .hx .hero-img{order:-1;margin:0 -1.25rem}
 .hx .hero-img img{border-radius:0;box-shadow:none;aspect-ratio:16/10}
 .hx-badge{left:1.25rem;bottom:12px;padding:.4rem .7rem;font-size:.9rem}
 .hx .hero h1{font-size:1.9rem;margin-bottom:.3rem}.hx .hero .eyebrow{margin-bottom:.35rem;font-size:.72rem}
 .hx .hero p{font-size:1.02rem;line-height:1.45}.hx-price{margin-top:.55rem;font-size:1.2rem}
 .hx .hero .btns{margin-top:.8rem;gap:.55rem 1rem;align-items:center}
 .hx .hero .btns .btn-primary{flex:1 1 100%;text-align:center}
 .hx .hero .btns .btn-ghost{border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-size:.98rem}
 .hx .hero .hx-trust{margin-top:.65rem;font-size:.82rem;gap:.15rem .8rem}
 .hx-strip{grid-template-columns:1fr 1fr}
 .hx-strip>div{border-left:0;border-top:1px solid var(--line);padding:.7rem .8rem}
 .hx-strip>div:nth-child(-n+2){border-top:0}
 .hx-strip dd{font-size:.86rem}.hx-strip svg{display:none}
 .hx-two,.hx-specs{grid-template-columns:1fr}
 /* homepage guide cards: swipe slider with the next card peeking (Ali 2026-11-10) */
 .hx-g3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.6rem;scrollbar-width:thin}
 .hx-g3 .card{scroll-snap-align:start}
 .hx-two{gap:1.1rem}
 .hx-buy{padding:1.1rem}.hx-cta{padding:1.5rem}
 .hx-shop .pdp{gap:1.2rem;padding-top:.8rem;padding-bottom:1.2rem}
 .hx-shop .gallery img#main-img{aspect-ratio:4/3}
 .hx-shop .thumbs{margin-top:.45rem}.hx-shop .thumbs img{width:52px;height:52px}
 .hx-shop .buybox h1{font-size:1.7rem}.hx-shop .price{margin:.35rem 0}
 .hx-about img{aspect-ratio:16/9}
}
