/* ==================================================================
   Sohoo Product Category Page - shared styles (white & orange)
   Extracted from productlist-*.html templates; edit here once,
   applies to all category list pages.
   ================================================================== */
/* ---------- Page shell & breadcrumb ---------- */
.sh-main{max-width:1600px;margin:0 auto;padding:120px 32px 80px}
.sh-crumb{font-size:13px;color:#999}
.sh-crumb a{color:#555;text-decoration:none}
.sh-crumb a:hover{color:#eb6636}
.sh-crumb .sep{margin:0 8px;color:#ccc}
.sh-crumb .cur{color:#eb6636}
/* ---------- Hero banner ---------- */
.sh-hero{position:relative;margin:20px 0 0;padding:46px 52px;background:linear-gradient(135deg,#fafafa 0%,#f8f5f2 55%,#fdf3ec 100%);border-radius:18px;overflow:hidden}
.sh-hero::before{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;background:rgba(235,102,54,.07)}
.sh-hero::after{content:"";position:absolute;right:46px;bottom:-80px;width:200px;height:200px;border-radius:50%;background:rgba(235,102,54,.06)}
.sh-hero-tag{position:relative;z-index:1;display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#eb6636;font-weight:700}
.sh-hero-tag::before{content:"";width:22px;height:3px;border-radius:2px;background:#eb6636}
.sh-hero-title{position:relative;z-index:1;margin:14px 0 0;font-size:40px;font-weight:800;color:#161616;line-height:1.15;letter-spacing:.5px}
.sh-hero-title em{font-style:normal;color:#eb6636}
.sh-hero-bar{position:relative;z-index:1;margin:20px 0 0;width:64px;height:4px;border-radius:2px;background:#eb6636}
/* ---------- Category pills ---------- */
.sh-tabs{margin:24px 0 0}
.sh-tabs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sh-tabs a{display:block;padding:10px 20px;font-size:13.5px;font-weight:600;color:#555;background:#f7f7f7;border:1px solid #eeeeee;border-radius:999px;text-decoration:none;transition:all .25s ease}
.sh-tabs a:hover{color:#eb6636;border-color:#eb6636}
.sh-tabs a.selected{color:#fff;background:#eb6636;border-color:#eb6636}
/* ---------- Layout row: filter + grid ---------- */
.sh-layout{display:flex;flex-wrap:wrap;align-items:flex-start;margin-top:30px}
.sh-filter{width:270px;flex:0 0 270px;margin-right:28px}
.sh-fcard{background:#fff;border:1px solid #eee;border-radius:14px;padding:8px 22px 20px;box-shadow:0 2px 12px rgba(0,0,0,.03)}
.sh-fblock{padding:0;border-bottom:1px solid #f0f0f0}
.sh-fblock:last-child{border-bottom:none}
.sh-fblock h4{margin:0;padding:24px 0 10px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#eb6636;font-weight:700}
.sh-select{width:100%;margin:6px 0 16px;padding:9px 12px;font-size:13px;color:#333;background:#fff;border:1px solid #e5e5e5;border-radius:8px;cursor:pointer;outline:none}
.sh-select:focus{border-color:#eb6636}
.sh-check{display:flex;align-items:center;gap:9px;padding:9px 0;font-size:13px;color:#555;cursor:pointer;transition:color .2s}
.sh-check:hover{color:#161616}
.sh-check input{width:15px;height:15px;accent-color:#eb6636;margin:0;cursor:pointer}
.sh-check .cnt{color:#bbb;font-size:12px;margin-left:auto}
/* ---------- Product grid & cards ---------- */
.sh-result-info{font-size:16.5px;color:#374151;margin:26px 0 0;padding-top:2px;font-weight:500}
.sh-result-info strong{color:#eb6636;font-weight:700}
.sh-grid{flex:1;min-width:0}
.sh-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px}
.sh-grid li{width:calc(33.333% - 16px);box-sizing:border-box}
.sh-card{display:flex;flex-direction:column;height:100%;background:#f6f6f8;border:1px solid #eeeeee;border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.sh-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.09);border-color:#eb6636}
.sh-card-img{display:flex;align-items:center;justify-content:center;background:#fff;aspect-ratio:1/1;overflow:hidden}
.sh-card-img img{width:100%;height:100%;object-fit:contain;padding:12px;box-sizing:border-box;transition:transform .35s ease}
.sh-card:hover .sh-card-img img{transform:scale(1.06)}
.sh-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.sh-card-cat{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#eb6636;font-weight:700}
.sh-card-name{margin:8px 0 0;font-size:15.5px;font-weight:700;color:#161616;line-height:1.4;transition:color .2s}
.sh-card:hover .sh-card-name{color:#eb6636}
#shFail{display:none;width:100%;text-align:center;padding:70px 0;color:#999;font-size:15px}
/* ---------- Bottom SEO overview ---------- */
.sh-overview{margin:56px 0 0;background:#fff;border:1px solid #eee;border-radius:14px;padding:36px 44px;box-sizing:border-box;position:relative}
.sh-overview::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:14px 0 0 14px;background:#eb6636}
.sh-overview h2{margin:0 0 14px;font-size:20px;font-weight:700;color:#161616}
.sh-overview p{margin:0;font-size:15px;line-height:1.9;color:#555}
/* ---------- Desktop hidden ---------- */
.sh-trigger{display:none}
.sh-filter-close{display:none}
#shMask{display:none}
/* ---------- Tablet ---------- */
@media(max-width:1200px){
	.sh-grid li{width:calc(33.333% - 16px)}
}
/* ---------- Mobile ---------- */
@media(max-width:768px){
	.sh-main{padding:70px 16px 60px}
	.sh-hero{padding:32px 24px 34px;margin-top:14px}
	.sh-hero-title{font-size:26px}
	.sh-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.sh-tabs::-webkit-scrollbar{display:none}
	.sh-tabs ul{flex-wrap:nowrap;padding-bottom:2px}
	.sh-tabs li{flex:0 0 auto}
	.sh-tabs a{white-space:nowrap;padding:9px 16px}
	.sh-trigger{display:block;width:100%;margin:18px 0 0;padding:13px 16px;background:#fff;border:1px solid #eb6636;border-radius:10px;color:#eb6636;font-size:14px;font-weight:700;cursor:pointer;text-align:center}
	.sh-filter{position:fixed;left:0;right:0;bottom:0;width:100%;max-height:86%;margin:0;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.18);transform:translateY(105%);transition:transform .3s ease;z-index:200;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:30px}
	.sh-filter.open{transform:none}
	.sh-filter .sh-fcard{border:none;border-radius:0;box-shadow:none;padding:4px 20px 0}
	.sh-filter .sh-fcard::before{content:"Filters";display:block;font-size:18px;font-weight:700;color:#161616;padding:14px 0 6px}
	.sh-filter-close{display:block;position:sticky;top:0;width:100%;padding:14px 20px;background:#fff;border:none;border-bottom:1px solid #eee;font-size:15px;font-weight:700;color:#eb6636;text-align:right;cursor:pointer;z-index:5}
	.sh-grid li{width:calc(50% - 12px)}
	.sh-grid ul{gap:18px 14px}
	.sh-card-img img{padding:8px}
	.sh-overview{padding:28px 22px;margin-top:36px}
	#shMask{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s ease}
	#shMask.open{opacity:1;pointer-events:auto}
}
/* ---------- Sub-category index (PSU hub page) ---------- */
.sh-subs{margin:34px 0 0}
.sh-subs-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px}
.sh-subs-grid li{width:calc(33.333% - 16px);box-sizing:border-box}
.sh-sub-card{display:flex;flex-direction:column;justify-content:space-between;min-height:180px;padding:30px 28px;background:#fff;border:1px solid #eee;border-radius:16px;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden}
.sh-sub-card::after{content:"";position:absolute;right:-50px;top:-50px;width:130px;height:130px;border-radius:50%;background:rgba(235,102,54,.06)}
.sh-sub-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.08);border-color:#eb6636}
.sh-sub-tag{position:relative;z-index:1;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#eb6636;font-weight:700}
.sh-sub-name{margin:12px 0 0;font-size:24px;font-weight:800;color:#161616;line-height:1.2;position:relative;z-index:1}
.sh-sub-arrow{margin-top:24px;font-size:13px;font-weight:700;color:#eb6636;position:relative;z-index:1}
@media(max-width:768px){
	.sh-subs-grid li{width:calc(50% - 12px)}
	.sh-sub-card{min-height:130px;padding:22px 18px}
	.sh-sub-name{font-size:19px}
	.sh-sub-arrow{margin-top:16px}
}
/* ---------- Section title ---------- */
.sh-sec-title{margin:60px 0 0;font-size:26px;font-weight:800;color:#161616;position:relative;padding-left:18px;line-height:1.3}
.sh-sec-title::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:2px;background:#eb6636}
/* ---------- Why choose ---------- */
.sh-why-grid{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:24px}
.sh-why-grid li{width:calc(25% - 18px);box-sizing:border-box;background:#fff;border:1px solid #eee;border-radius:14px;padding:26px 24px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.sh-why-grid li:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.07);border-color:#eb6636}
.sh-why-num{font-size:13px;font-weight:800;color:#eb6636;letter-spacing:1px;background:#fdf3ec;border:1px solid #fbe0cf;border-radius:999px;padding:4px 12px;display:inline-block}
.sh-why-grid h3{margin:16px 0 0;font-size:17px;font-weight:700;color:#161616}
.sh-why-grid p{margin:10px 0 0;font-size:13.5px;line-height:1.7;color:#666}
/* ---------- Featured products ---------- */
.sh-feat-grid{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:24px}
.sh-feat-grid li{width:calc(25% - 18px);box-sizing:border-box}
@media(max-width:1200px){
	.sh-why-grid li,.sh-feat-grid li{width:calc(33.333% - 16px)}
	.sh-feat-grid li:nth-child(n+4){display:none}
}
@media(max-width:768px){
	.sh-why-grid li,.sh-feat-grid li{width:calc(50% - 12px)}
	.sh-sec-title{font-size:21px;margin-top:44px}
	.sh-why-grid li{padding:20px 16px}
}