/* Customer storefront. Administrative layouts retain their existing styles. */
:root{--store-ink:#173b2b;--store-soft:#f3f7f3;--store-border:#dce7df}
body[data-surface=customer]{background:#fafbf8;color:var(--store-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.demo-strip{background:#edf5ee;color:#3d6450;font-size:.8125rem;letter-spacing:.1px;padding:7px 16px;text-align:center;line-height:1.5}
body[data-surface=customer] .header{background:#fff;border-bottom:1px solid var(--store-border);box-shadow:none}
body[data-surface=customer] .brand strong{font-size:19px;letter-spacing:-.5px}
body[data-surface=customer] .brand small{font-size:.8125rem;color:#4e6458}
body[data-surface=customer] .header-inner{max-width:1200px;min-height:78px}
body[data-surface=customer] #top-nav a{border-radius:12px;min-height:44px;font-size:13px}
body[data-surface=customer] #top-nav a.active{background:#edf5ee;color:#157b44}
body[data-surface=customer] #main{padding-top:24px;max-width:1200px}
body[data-surface=customer] .filters{margin-bottom:22px;padding:8px;border-radius:16px;box-shadow:0 3px 18px #173b2b06}
body[data-surface=customer] .search-field{background:#f4f7f3;min-height:50px;border-radius:11px;flex:1}
body[data-surface=customer] .filters input{background:transparent;border:0;min-width:0}
body[data-surface=customer] .filters select{border:0;background:#f4f7f3;font-size:13px}
body[data-surface=customer] .filters button{min-height:48px;border-radius:11px}
body[data-surface=customer] .hero{position:relative;background:#edf3df;border:0;border-radius:26px;min-height:365px;padding:44px 46px;display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
body[data-surface=customer] .hero h1{font-size:clamp(34px,4.2vw,58px);font-weight:750;line-height:1.08;letter-spacing:-2px;margin:18px 0;color:#173c2b}
body[data-surface=customer] .hero p{font-size:15px;line-height:1.75;color:#526b56;max-width:390px}
body[data-surface=customer] .hero .eyebrow{display:inline-block;border-radius:30px;background:#fff9;padding:8px 12px;font-size:.8125rem;letter-spacing:1px;color:#315b40}
body[data-surface=customer] .hero .button{padding:15px 22px;border-radius:12px;margin-top:9px;font-size:14px}
.hero-note{display:block;margin-top:13px;color:#5b725e;font-size:.8125rem}
body[data-surface=customer] .hero-art{isolation:isolate;position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
body[data-surface=customer] .hero-art:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:#fff8;z-index:-1}
body[data-surface=customer] .hero-art img{width:45%;height:225px;object-fit:contain;filter:drop-shadow(0 16px 10px #21452d18);transform:rotate(-7deg)}
body[data-surface=customer] .hero-art img+img{transform:rotate(8deg);margin-top:40px}
body[data-surface=customer] .float-label{bottom:20px;background:white;border:1px solid #d9e6d8;border-radius:14px;font-size:.8125rem;box-shadow:0 5px 22px #35533710}
body[data-surface=customer] .trust-row{padding:22px 8px;margin:0 0 12px;justify-content:space-between;font-size:.875rem;color:#48644f;border-bottom:1px solid var(--store-border)}
body[data-surface=customer] .trust-row .icon{color:#18824a;width:19px}
body[data-surface=customer] .section-heading{margin:30px 0 20px;align-items:end}
body[data-surface=customer] .section-heading h2{font-size:29px;letter-spacing:-.8px;margin:6px 0}
body[data-surface=customer] .section-heading p{font-size:.875rem;color:#4e6458}
body[data-surface=customer] .eyebrow{font-weight:650;font-size:.8125rem;letter-spacing:1.1px;color:#4e6458}
body[data-surface=customer] .chips{gap:8px;flex-wrap:wrap;overflow:visible}
body[data-surface=customer] .chip{padding:10px 16px;font-size:.875rem;min-height:42px;border-radius:11px;background:#fff;border:1px solid var(--store-border);color:#53725e}
body[data-surface=customer] .chip.active{background:#184b32;border-color:#184b32;color:white}
body[data-surface=customer] .product{border-radius:18px;padding:12px;background:#fff;box-shadow:none;transition:box-shadow .15s,border-color .15s}
body[data-surface=customer] .product:hover{border-color:#a6cbb4;box-shadow:0 6px 20px #1c4b3210}
body[data-surface=customer] .product-photo{background:#f4f7f0;border-radius:12px}
body[data-surface=customer] .product-photo img{padding:16px;height:176px;object-fit:contain}
body[data-surface=customer] .promo{top:10px;left:10px;border-radius:7px;background:#e1edca;color:#285b30;font-size:.8125rem;font-weight:750;padding:5px 8px}
body[data-surface=customer] .category{font-size:.8125rem;color:#4e6458;line-height:1.5}
body[data-surface=customer] .product h3{font-weight:650;font-size:14px;line-height:1.45;margin:7px 0;min-height:41px}
body[data-surface=customer] .prices{align-items:baseline;gap:7px;flex-wrap:wrap}
body[data-surface=customer] .prices del{font-size:.8125rem;color:#4e6458}
body[data-surface=customer] .product .price{font-size:23px;letter-spacing:-.7px;color:#184b32}
body[data-surface=customer] .stock{font-size:.8125rem;line-height:1.6;color:#4e6458}
body[data-surface=customer] .stock.unavailable{color:#8b6555}
body[data-surface=customer] .product-footer{margin-top:14px;gap:6px}
body[data-surface=customer] .product-footer button{font-size:.875rem;min-height:44px;border-radius:10px;font-weight:650}
body[data-surface=customer] .product-footer input{width:46px;padding:6px;min-height:44px;border-radius:10px;background:#f5f7f4}
body[data-surface=customer] .page-header{margin:8px 0 26px;gap:16px}
body[data-surface=customer] .page-header h1{font-size:34px;line-height:1.2;margin:8px 0;letter-spacing:-1px}
body[data-surface=customer] .page-header p{font-size:14px;color:#4e6458;line-height:1.65}
body[data-surface=customer] .panel{box-shadow:0 4px 24px #193b2b05;border:1px solid var(--store-border);border-radius:18px}
body[data-surface=customer] .panel h2{font-size:21px;letter-spacing:-.4px}
body[data-surface=customer] button,body[data-surface=customer] .button{min-height:44px;border-radius:11px}
body[data-surface=customer] input,body[data-surface=customer] select,body[data-surface=customer] textarea{border:1px solid #d5e2d9;border-radius:10px;min-width:0;max-width:100%}
body[data-surface=customer] input:focus,body[data-surface=customer] select:focus,body[data-surface=customer] textarea:focus{outline:2px solid #a2d4b6;outline-offset:2px}
body[data-surface=customer] .form-stack label,body[data-surface=customer] .form-grid label{font-size:13px;color:#3c5c48}
body[data-surface=customer] .checkbox{align-items:center;line-height:1.5}
body[data-surface=customer] .checkbox input{min-height:0;width:18px;height:18px;flex:none}
.demo-payment-note{font-size:.875rem;color:#4e6458;line-height:1.6;background:#f3f7f0;border:1px solid #dfe9db;border-radius:11px;padding:11px 13px}
.sandbox-help{font-size:.875rem;margin:12px 0;border:1px solid var(--store-border);padding:12px;border-radius:10px;color:#526955;overflow-wrap:anywhere}
.sandbox-help summary{cursor:pointer;min-height:24px;font-weight:650}
.sandbox-help p{line-height:1.7}.sandbox-help a{text-decoration:underline}
.auth-back{text-align:center;font-size:13px;color:#5f7567;padding:12px}
body[data-surface=customer] .login-wrap{max-width:450px;margin:35px auto 65px}
body[data-surface=customer] .login-wrap .page-header{text-align:center}
body[data-surface=customer] .login-wrap .form-stack{gap:18px;padding:28px}
body[data-surface=customer] .customer-order-grid{gap:24px}
body[data-surface=customer] .money-row{gap:14px;font-size:13px;line-height:1.65}
body[data-surface=customer] .money-row span:first-child{min-width:0;overflow-wrap:anywhere}
body[data-surface=customer] .money-row strong{white-space:nowrap}
body[data-surface=customer] .money-row.total{font-size:21px;letter-spacing:-.5px}
body[data-surface=customer] .order-card{padding:20px;box-shadow:none;border:1px solid var(--store-border);text-align:left;max-width:100%;overflow-wrap:anywhere}
body[data-surface=customer] .notice{background:#f2f7f1;border:1px solid #dfe9df;font-size:.875rem;color:#42634d;border-radius:12px}
body[data-surface=customer] .notice.warning{background:#fff7e8;border-color:#f0d7a5;color:#855b1b}
body[data-surface=customer] .product-detail{gap:40px;align-items:start;margin:25px 0}
body[data-surface=customer] .product-detail>.product-photo img{height:360px;padding:45px}
body[data-surface=customer] .product-detail h1{font-size:34px;line-height:1.2;letter-spacing:-1px;margin:14px 0}
body[data-surface=customer] .product-detail .price{font-size:34px}
body[data-surface=customer] .buy{margin:22px 0;gap:10px}
body[data-surface=customer] .buy button{flex:1;min-height:50px}
body[data-surface=customer] footer{background:#edf3ed;color:#47614f;border-top:1px solid #dce7dc;padding:36px max(24px,calc((100% - 1152px)/2));gap:32px;font-size:.875rem;line-height:1.8}
.footer-brand{font-size:20px;font-weight:750;letter-spacing:-.5px;color:#1f5135}
body[data-surface=customer] footer strong{font-size:13px;color:#214a30}
body[data-surface=customer] footer small{display:block;max-width:300px;font-size:.8125rem}
body[data-surface=customer] .bottom-nav{background:#fff;box-shadow:0 -5px 25px #183b2b09;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #e1e9e1}
body[data-surface=customer] .bottom-nav a{min-height:62px;font-size:.8125rem;color:#4e6458}
body[data-surface=customer] .bottom-nav a.active{color:#16834a;background:#f4f8f3}
body[data-surface=customer] .form-error:not(:empty){background:#fff0ec;border-radius:10px;padding:12px;font-size:13px}
body[data-surface=customer] .loading{color:#4e6458;padding:65px 15px;text-align:center}
@media(max-width:768px){
 body[data-surface=customer] .header-inner{min-height:68px;padding:12px 16px;gap:10px}
 body[data-surface=customer] .brand strong{font-size:17px}
 body[data-surface=customer] .brand img{width:35px;height:35px}
 body[data-surface=customer] #main{padding:18px 16px 95px}
 body[data-surface=customer] .filters{gap:7px;flex-wrap:wrap;margin-bottom:18px}
 body[data-surface=customer] .filters .search-field{flex-basis:100%;min-height:46px}
 body[data-surface=customer] .filters select{flex:1;min-width:0;min-height:44px}
 body[data-surface=customer] .filters button{min-width:80px;min-height:44px}
 body[data-surface=customer] .hero{padding:26px 22px;min-height:0;grid-template-columns:1fr;border-radius:20px;gap:8px}
 body[data-surface=customer] .hero h1{font-size:37px;letter-spacing:-1.5px;line-height:1.1;margin:16px 0}
 body[data-surface=customer] .hero p{font-size:13px;max-width:290px}
 body[data-surface=customer] .hero .button{padding:13px 16px;font-size:13px}
 body[data-surface=customer] .hero-art{min-height:160px;margin-top:8px;max-width:280px;width:100%;justify-self:center}
 body[data-surface=customer] .hero-art:before{width:185px;height:185px}
 body[data-surface=customer] .hero-art img{height:155px;padding:0}
 body[data-surface=customer] .hero-art img+img{margin-top:12px}
 body[data-surface=customer] .float-label{bottom:0;font-size:.8125rem;padding:9px 12px}
 body[data-surface=customer] .trust-row{display:grid;grid-template-columns:1fr;gap:12px;padding:18px 5px;font-size:.875rem;background:transparent;border-radius:0;margin-bottom:0}
 body[data-surface=customer] .section-heading{margin:24px 0 16px;gap:10px}
 body[data-surface=customer] .section-heading h2{font-size:26px}
 body[data-surface=customer] .section-heading small{font-size:.8125rem;white-space:nowrap}
 body[data-surface=customer] .section-heading p{font-size:.8125rem}
 body[data-surface=customer] .chips{gap:6px;padding-bottom:16px}
 body[data-surface=customer] .chip{padding:9px 11px;font-size:.8125rem;min-height:40px}
 body[data-surface=customer] .products{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-surface=customer] .product{padding:9px;min-width:0;border-radius:14px}
 body[data-surface=customer] .product-photo img{height:135px;padding:10px}
 body[data-surface=customer] .product h3{font-size:.875rem;min-height:36px;overflow-wrap:anywhere}
 body[data-surface=customer] .product .price{font-size:20px}
 body[data-surface=customer] .product .stock{font-size:.8125rem}
 body[data-surface=customer] .product-footer{flex-wrap:nowrap;gap:5px}
 body[data-surface=customer] .product-footer input{width:38px;font-size:14px;flex:none;padding:4px}
 body[data-surface=customer] .product-footer button{font-size:.8125rem;padding:9px 5px;min-width:0;flex:1}
 body[data-surface=customer] .product-footer .icon{width:14px;height:14px}
 body[data-surface=customer] .page-header h1{font-size:29px}
 body[data-surface=customer] .page-header p{font-size:13px}
 body[data-surface=customer] .panel{padding:21px 17px;border-radius:16px;min-width:0}
 body[data-surface=customer] .cart-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:18px 0}
 body[data-surface=customer] .cart-row img{width:44px;height:52px}
 body[data-surface=customer] .cart-row h3{font-size:13px;line-height:1.5;margin:0}
 body[data-surface=customer] .cart-row .quantity{grid-column:2;justify-content:start}
 body[data-surface=customer] .cart-row>button{grid-column:2;justify-self:start;font-size:.875rem;min-height:36px;padding:4px 8px}
 body[data-surface=customer] .checkout-progress li{font-size:.8125rem}
 body[data-surface=customer] .checkout-summary{position:static;order:-1}
 body[data-surface=customer] .checkout-submit{bottom:70px;padding:10px 0;box-shadow:0 -7px 18px #ffffffee}
 body[data-surface=customer] .checkout-submit button{font-size:14px;min-height:52px}
 body[data-surface=customer] .login-wrap{margin:16px auto 30px}
 body[data-surface=customer] .login-wrap .form-stack{padding:23px 18px}
 body[data-surface=customer] .product-detail{display:grid;grid-template-columns:1fr;gap:24px}
 body[data-surface=customer] .product-detail>.product-photo img{height:240px;padding:30px}
 body[data-surface=customer] .product-detail h1{font-size:28px}
 body[data-surface=customer] .customer-order-grid{display:grid;grid-template-columns:1fr;gap:18px}
 body[data-surface=customer] footer{padding:28px 22px 95px;grid-template-columns:1fr;gap:20px}
 body[data-surface=customer] .customer-order-grid .actions{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){body[data-surface=customer] *{scroll-behavior:auto;transition:none}}