/* ESGMarket premium finish: type, header, cards, motion, trust strip, checkout steps, footer */
:root{--shadow-sm:0 6px 18px rgba(20,20,20,.06);--shadow-lg:0 20px 46px rgba(0,0,0,.13)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html:not([data-theme="dark"]) body{background:#fbfaf8}
h1,h2,h3{letter-spacing:-.02em}
.eyebrow{letter-spacing:.18em}
.section-head h2{font-weight:800}
.btn.primary{background:linear-gradient(135deg,#ffa03f,#f47b20 55%,#e8650a)!important;border:0!important;box-shadow:0 10px 24px rgba(244,123,32,.28)}
.btn.primary:active{transform:translateY(1px)}
.hero-feature{border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden}
.filter{border-radius:999px}

/* 5. Header: slim, sticky, cleaner search */
.header{position:sticky;top:0;z-index:90;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);border-bottom:1px solid #efeeea}
html[data-theme="dark"] .header{background:#151514;box-shadow:0 0 0 100vmax #151514;border-bottom-color:#2b2b29}
#search{border-radius:999px!important;background:#f3f2ee!important;border:1px solid transparent!important;transition:border-color .2s,box-shadow .2s,background .2s}
#search:focus{background:#fff!important;border-color:#f47b20!important;box-shadow:0 0 0 4px rgba(244,123,32,.14)!important;outline:0}
html[data-theme="dark"] #search{background:#232321!important}

/* 2. Product cards */
.product{border-radius:20px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
html:not([data-theme="dark"]) .product{border-color:#efeeea}
.product-media{overflow:hidden}
.product-media img{transition:transform .5s ease}
@media(hover:hover){.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.product:hover .product-media img{transform:scale(1.06)}}
.product-info{padding:12px 13px 14px}
.product-info h3{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-price{font-weight:800;font-size:17px}
.p-priceline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.p-old{color:#999;font-size:12.5px}
.p-off{background:#fff1e8;color:#e65f00;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:800}
.p-save{color:#16833a;font-size:12px;font-weight:700;margin-top:4px}
.p-sale{position:absolute;left:10px;bottom:10px;background:#e8325a;color:#fff;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px}
.quick-add{background:#151515!important;color:#fff!important;border:0!important;width:34px;height:34px;border-radius:50%;transition:background .2s,transform .2s}
.quick-add:active{transform:scale(.92)}
@media(hover:hover){.quick-add:hover{background:#f47b20!important}}
html[data-theme="dark"] .quick-add{background:#f47b20!important}

/* 3. Motion */
@media (prefers-reduced-motion:no-preference){
  .modal:not([hidden])>.modal-card{animation:esgSheet .32s cubic-bezier(.2,.9,.3,1)}
  @keyframes esgSheet{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
  .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
}

/* 4. Trust strip */
.trust-strip{max-width:1340px;margin:6px auto 22px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trust-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #efeeea;border-radius:16px;padding:13px 15px;box-shadow:var(--shadow-sm)}
.trust-item svg{width:30px;height:30px;flex:0 0 auto;fill:none;stroke:#f47b20;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust-item b{display:block;font-size:13px}
.trust-item span{display:block;font-size:11.5px;color:#777;margin-top:1px}
html[data-theme="dark"] .trust-item{background:#1a1a19;border-color:#2e2e2c}
@media(max-width:700px){.trust-strip{grid-template-columns:repeat(2,1fr);gap:8px;padding:0 12px;margin-bottom:16px}.trust-item{padding:10px;gap:8px}.trust-item svg{width:24px;height:24px}.trust-item b{font-size:12px}.trust-item span{font-size:10.5px}}

/* 7. Checkout steps */
.esg-steps{display:flex;align-items:center;justify-content:center;margin:2px 44px 16px 0}
.esg-step{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#9a9a96}
.esg-step i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ecebe7;font-style:normal;font-size:12px;color:#777}
.esg-step+.esg-step::before{content:"";width:22px;height:2px;background:#dcdbd6;margin:0 6px 0 2px;border-radius:2px}
.esg-step.done i{background:#16a34a;color:#fff}.esg-step.done+.esg-step::before{background:#16a34a}
.esg-step.on i{background:#f47b20;color:#fff}.esg-step.on{color:#151515}
html[data-theme="dark"] .esg-step.on{color:#fff}

/* 8. Footer */
footer{background:linear-gradient(180deg,#131312,#0b0b0a)!important}
footer h4{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:#f6a460}
footer a{transition:color .2s}
footer a:hover{color:#f47b20}
.footer-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.footer-social a{border:1px solid #3a3a37;border-radius:999px;padding:7px 14px;font-size:13px}
.footer-wa{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:#22c55e;color:#fff!important;font-weight:800;border-radius:999px;padding:10px 18px;font-size:14px}
.footer-pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:1340px;margin:22px auto 0;padding-top:18px;border-top:1px solid #262624;font-size:12px;color:#9b9b96}
.footer-pay b{border:1px solid #3a3a37;border-radius:8px;padding:5px 10px;color:#ddd;font-weight:700}