
:root{--teal:#087e90;--dark:#243d42;--muted:#64777a;--line:#e5ecec;--bg:#f6faf9}*{box-sizing:border-box}
body{margin:0;font:15px/1.55 Arial,Helvetica,sans-serif;color:var(--dark);background:white}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}
.notice{background:var(--teal);color:#fff;text-align:center;padding:8px;font-size:12px;letter-spacing:1px}
header{position:sticky;top:0;background:#fff;z-index:20;box-shadow:0 2px 12px #143c3d10}
.nav{max-width:1250px;margin:auto;min-height:82px;display:flex;align-items:center;gap:23px;padding:10px 22px}
.logo{width:140px;height:57px;object-fit:contain}.navlinks{display:flex;align-items:center;gap:22px;margin-left:auto}
.navlinks a:hover,.foot a:hover{color:var(--teal)}.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions a,.nav-actions button{background:white;border:1px solid var(--line);border-radius:22px;padding:9px 13px;white-space:nowrap}
.nav-actions button{color:var(--dark)}.pill{display:inline-block;background:var(--teal);color:white;border-radius:100px;padding:0px 6px;margin-left:3px}
main{min-height:55vh}.wrap{max-width:1200px;margin:auto;padding:55px 22px}.hero{background:linear-gradient(110deg,#087e90,#0a9cad);color:white;padding:90px 22px}
.hero-inner{max-width:1200px;margin:auto}.hero h1{font-size:clamp(36px,5vw,64px);max-width:690px;line-height:1.1;margin:14px 0}.hero p{max-width:580px;font-size:18px;opacity:.95}
.btn{display:inline-block;border:0;background:var(--teal);color:#fff;padding:12px 20px;border-radius:7px;font-weight:bold}
.btn.light{background:white;color:var(--teal)}.btn.secondary{background:white;color:var(--dark);border:1px solid var(--line)}
.eyebrow{font-size:12px;letter-spacing:2px;color:var(--teal);font-weight:bold}.title{font-size:clamp(28px,3vw,39px);line-height:1.2;margin:10px 0 24px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0}.toolbar input{flex:1;min-width:200px}
input,textarea,select{border:1px solid #d6e3e2;border-radius:7px;padding:11px;background:white;max-width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--line);background:white;padding:8px 13px;border-radius:24px}
.chip.active{background:var(--teal);color:white}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:white;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px #183b3d16}
.card img{width:100%;height:220px;object-fit:contain;background:#f8fafa;display:block;padding:12px}
.cardbody{padding:16px}.category{color:var(--teal);text-transform:uppercase;font-size:11px;letter-spacing:1px;font-weight:bold}
.card h3{font-size:17px;line-height:1.4;min-height:48px;margin:8px 0}.price{font-size:21px;font-weight:bold;margin:8px 0 14px}
.card .btn{width:100%;text-align:center}.foot{background:#183f44;color:#fff;padding:42px 22px;margin-top:40px}
.footinner{max-width:1200px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.foot a{margin-right:17px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.panel{background:var(--bg);padding:30px;border-radius:16px}
.detail{display:grid;grid-template-columns:1.05fr 1fr;gap:55px}.detail-photo{border:1px solid var(--line);border-radius:16px;width:100%;height:480px;object-fit:contain;padding:30px}
.detail h1{font-size:clamp(30px,3.5vw,45px);line-height:1.15}.detail p{color:var(--muted)}
.qty{width:90px}.breadcrumbs{color:var(--muted);margin-bottom:28px}.breadcrumbs a{color:var(--teal)}
.feature{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature>div{padding:25px;background:var(--bg);border-radius:12px}
.field{display:flex;flex-direction:column;gap:6px;margin:15px 0}.field textarea{min-height:130px}
.shade{position:fixed;inset:0;background:#0007;z-index:29;display:none}.shade.open{display:block}
.drawer{position:fixed;right:0;top:0;bottom:0;background:white;width:min(440px,100%);z-index:30;transform:translateX(105%);transition:.2s;box-shadow:0 0 30px #0002;padding:25px;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head button{border:0;background:white;font-size:26px}
.cartitems{overflow:auto;flex:1}.cartline{display:flex;gap:12px;border-bottom:1px solid var(--line);padding:14px 0;align-items:center}
.cartline img{width:65px;height:65px;object-fit:contain}.cartline .mini{margin-left:auto;white-space:nowrap}
.mini button{border:1px solid var(--line);background:white;border-radius:5px}.muted{color:var(--muted)}.message{padding:12px;background:var(--bg);border-radius:8px}
@media(max-width:950px){.grid{grid-template-columns:repeat(3,1fr)}.nav{flex-wrap:wrap}.navlinks{order:3;width:100%;justify-content:center;margin:0;flex-wrap:wrap}.nav-actions{margin-left:auto}.detail{gap:25px}}
@media(max-width:650px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card img{height:165px}.cardbody{padding:12px}.card h3{font-size:14px;min-height:60px}.nav{gap:8px}.navlinks{gap:13px;font-size:13px}.logo{width:100px;height:46px}.nav-actions{gap:5px}.nav-actions a,.nav-actions button{font-size:12px;padding:7px}.hero{padding:55px 22px}.two,.detail,.feature{grid-template-columns:1fr}.detail-photo{height:320px}.wrap{padding:35px 17px}}

/* Kitchen photo hero with legible gradient overlay */
.hero{background-image:linear-gradient(90deg,rgba(3,112,129,.98) 0%,rgba(4,121,139,.93) 32%,rgba(4,117,135,.65) 58%,rgba(4,117,135,.12) 100%),url("hero-kitchen.jpg");background-size:cover;background-position:center right;min-height:620px;display:flex;align-items:center}
@media(max-width:650px){.hero{min-height:540px;background-position:65% center;background-image:linear-gradient(90deg,rgba(3,112,129,.96),rgba(4,117,135,.76)),url("hero-kitchen.jpg")}}

/* HERO REFINEMENT: keep text left and preserve full photographic composition */
.hero{background-color:#087e90;background-image:linear-gradient(90deg,rgba(3,112,129,.99) 0%,rgba(3,112,129,.98) 30%,rgba(3,112,129,.78) 48%,rgba(3,112,129,.15) 72%,rgba(3,112,129,0) 100%),url("hero-kitchen.jpg");background-repeat:no-repeat;background-size:100% 100%,auto 100%;background-position:center,right center;min-height:560px;padding:65px 22px;display:flex;align-items:center}
.hero-inner{width:100%;max-width:1200px;margin:0 auto}
.hero h1{max-width:620px;font-size:clamp(36px,4.1vw,60px)}
.hero p{max-width:560px}
@media(max-width:650px){.hero{min-height:510px;background-image:linear-gradient(90deg,rgba(3,112,129,.96),rgba(3,112,129,.78)),url("hero-kitchen.jpg");background-size:100% 100%,auto 100%;background-position:center,right center;padding:55px 22px}.hero h1{font-size:clamp(34px,9vw,46px)}}

/* Enhanced contact page and footer */
.foot{background:#12383d;color:#f2fafa;padding:0 22px;margin-top:50px}
.footer-grid{max-width:1200px;margin:auto;padding:56px 0 44px;display:grid;grid-template-columns:1.45fr .75fr 1.2fr 1fr;gap:38px}
.footer-grid h3{font-size:14px;text-transform:uppercase;letter-spacing:1.5px;margin:8px 0 18px;color:#fff}
.footer-grid p,.footer-grid address,.footer-grid small{font-size:14px;line-height:1.75;color:#d1e4e5;font-style:normal}
.footer-grid a{color:#d1e4e5;text-decoration:none}.footer-grid a:hover{color:#fff;text-decoration:underline}
.footer-logo{width:145px;height:72px;object-fit:contain;background:white;border-radius:10px;padding:7px}
.footer-brand p{max-width:270px}.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-bottom{border-top:1px solid #ffffff29;max-width:1200px;margin:auto;padding:20px 0 26px;display:flex;justify-content:space-between;gap:15px;color:#c0d7d9;font-size:12px}
.contact-wrap{padding-top:70px;padding-bottom:75px}.contact-intro{color:var(--muted);font-size:17px;margin-top:-10px;margin-bottom:34px}
.contact-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:15px}.contact-card{border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;gap:18px;align-items:flex-start;background:#fff}
.contact-card h2{font-size:18px;margin:0 0 12px}.contact-card address{font-style:normal;line-height:1.8}.contact-card a{color:var(--teal);overflow-wrap:anywhere}
.contact-symbol{flex:0 0 43px;height:43px;display:grid;place-items:center;background:#e7f5f5;border-radius:11px;color:var(--teal);font-size:24px}
.hours-line{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:8px 0;font-size:14px}.hours-line strong{white-space:nowrap}
.contact-form{border:1px solid var(--line);box-shadow:0 10px 32px #183b3d0b;padding:30px;border-radius:16px}.contact-form h2{margin:0;font-size:25px}
.contact-form .field input,.contact-form .field textarea{width:100%}.contact-form .btn{width:100%}.contact-form #formnote{font-size:12px;line-height:1.6}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-layout{grid-template-columns:1fr}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr;gap:20px}.footer-bottom{flex-direction:column}.contact-card{padding:17px}.contact-form{padding:20px}.hours-line{flex-wrap:wrap}}
