:root{--ink:#0c2624;--slate:#34504d;--glass:#d6ece7;--chalk:#f3f8f7;--amber:#e59b2f;--line:#c4d8d4;--head:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow",system-ui,sans-serif}

*{box-sizing: border-box; margin:0;}

html{scroll-behavior: smooth;scroll-padding-top: 90px;}

body{font: 1.05rem/1.6 var(--body);color: var(--slate);background: var(--chalk);}

h1,h2,h3,h4{font-family: var(--head);color: var(--ink);line-height: 1.1;}

button{font: inherit; cursor: pointer;}

img{display: block; max-width: 100%;}

:focus-visible{outline: 3px solid var(--amber);outline-offset: 2px;}

.sr{position: absolute; left: -9999px;}

.btn{display: inline-block; background: var(--amber);color: var(--ink);font-weight: 600; text-decoration: none;border: 0;padding: .75rem 1.5rem;border-radius: 999px;transition: background .2s,transform .2s;}

.btn:hover{background: #f2b358;transform: translateY(-1px)}

.btn:disabled{opacity:.45;cursor: not-allowed;transform: none;}

.btn:wa{background: #1faa59;color:#fff;width:100%}

.ghost{color: #fff; font-weight: 600;text-underline-offset: 4px;}


.bar{background: var(--amber);color: var(--ink);text-align: center; font-weight: 600; font-size: .9rem; padding:.4rem 1rem}

header{position: sticky;top: 0;z-index:20;display: flex;align-items: center;gap: 1.2rem;padding: .8rem 5vw; background: #012918;}

.logo{font:700 1.6rem var(--head);color: #fff;text-decoration: none; white-space: nowrap}

.logo span{color: var(--amber)}

.search{flex: 1;max-width: 460px;margin-left: auto;}

.search input{width: 100%;padding: .6rem 1.1rem;border: 0;border-radius: 999px;font: inherit}

.cart-btn{background: none;border: 1px solid #fff6;color: #fff; border-radius: 999px;padding: .45rem 1.1rem}

.cart-btn b{background: var(--amber);color: var(--ink);border-radius: 999px;padding: 0 .55rem;margin-left: .4rem;}

.hero h3{color: var(--amber)}

.hero{padding: 6rem 7vw; color: #cfe3df; background: var(--ink);
background-image: repeating-linear-gradient(45deg,#ffffff0d 0 2px,transparent 2px 12px),repeating-linear-gradient(-45deg,#ffffff0d 0 2px,transparent 2px 12px)}

.hero h1{color: #fff;font-size: clamp(2.8rem,7vw,5.2rem);max-width: 12ch;margin-bottom: 1rem}

.hero p{max-width: 32rem;font-size: 1.2rem;margin-bottom: 2rem}

.row{display: flex;gap: 1.5rem;align-items: center;flex-wrap: wrap;}


.perks{display: grid;grid-template-columns: repeat(3,1fr);gap: 1rem;padding: 1.5rem 5vw;background: var(--glass)}

.perks h3{font-size: 1.25rem}

.perks p{font-size: .95rem}


.shop{padding: 4rem 5vw;max-width: 1300px; margin: 0 auto;}

.shop head{display: flex;justify-content: space-between;align-items: end;flex-wrap: wrap;gap: 1rem;margin-bottom: 2rem}

.shop h2,.custom h2{font-size: clamp(2rem,4vw,3rem)}

.tools{display: flex;gap: 1rem;flex-wrap: wrap;align-items: center}

.chips{ display: flex;gap: .5rem;flex-wrap: wrap;}

.chips button{background: #fff;color: var(--ink);border: 1px solid var(--line);border-radius: 999px;padding: .35rem 1rem;transition: all .2s}

.chips button:hover{border-color: var(--ink)}

.chips button.on{background: var(--ink);color: #fff;border-color: var(--ink)}

select{font: inherit;padding: .4rem .8rem;border: 1px solid var(--line);border-radius: 8px;background: #fff; color: var(--ink)}


.grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(250px,1fr));gap: 1.5rem}

.card{background: #fff;border: 1px solid var(--line);border-radius: 6px;overflow: hidden;display: flex;flex-direction: column;transition: box-shadow .25s,transform .25s}

.card:hover{box-shadow: 0 14px 30px #0c262422;transform:translateY(-4px)}

.card-img{position: relative; border: 0;padding: 0;background: var(--glass);overflow: hidden;aspect-ratio: 4/3;}

.card-img img{width: 100%;height: 100%;object-fit: cover;transition: transform .5s}

.card:hover .card-img img{transform: scale(1.06)}

.badge{position: absolute;top: .7rem;left: .7rem;z-index: 1;background: var(--ink);color: #fff;font-size: .8rem;font-weight: 600;padding: .15rem .7rem;border-radius: 999px}

.card-body{padding: 1rem 1.1rem 1.2rem;display: flex;flex-direction: column;gap: .3rem;flex: 1}

.card-body small{color: var(--slate)}

.card-body h3{font-size: 1.4rem}

.price{font-weight: 600;color: var(--ink);font-size: 1.15rem;margin-bottom: .6rem}

.price span{font-weight: 400;font-size: .9rem;color: var(--slate)}

.card-body .btn{margin-top: auto;text-align: center}

.empty{text-align: center;padding: 3rem 0}


.custom{padding: 4.5rem 5vw;text-align: center;background: var(--glass)}

.custom p{max-width: 34rem;margin: .8rem auto 1.8rem}

footer{display: flex;justify-content: space-between;flex-wrap: wrap;gap: 1rem;padding: 1.5rem 5vw;background: var(--ink);color: #cfe3df;font-size: .95rem}

footer a{color: inherit}


dialog{border: 0;border-radius: 8px;padding: 0;width: min(800px,94vw);margin: auto;overflow: hidden}

dialog::backdrop{background: #0c2624b3}

.m{display: grid;grid-template-columns: 1fr 1fr;position: relative}

.m img{width: 100%;height: 100%;min-height: 320px;object-fit: cover}

.m-info{padding: 2rem;display: flex;flex-direction: column;gap: .7rem}

.m-info h2{font-size: 2.2rem}

.m .x{position: absolute;top: .5rem;right: .7rem}

.x{background: none;border: 0;font-size: 2rem;line-height: 1;color: var(--ink)}

.x-info .btn{margin-top: auto}


.overlay{position: fixed;inset: 0;background: #0c262480;z-index: 30}

.drawer{position: fixed;top: 0;right: 0;bottom: 0;z-index: 40;width: min(420px,100%);background: #fff;display: flex;flex-direction: column;transform: translateX(100%);transition: transform .3s}

.drawer.open{transform: none}

.drawer-head{display: flex;justify-content: space-between;align-items: center;padding: 1rem 1.3rem;border-bottom: 1px solid var(--line)}

#items{list-style: none;padding: 0 1.3rem;flex: 1;overflow: auto}

#items li{display: grid;grid-template-columns: 64px 1fr auto;gap: .9rem;padding: 1rem 0;border-bottom: 1px solid var(--line);align-items: center}

#items img{width: 64px;height: 64px;object-fit: cover;border-radius: 4px}

#items h4{font-size: 1.15rem}

#items small{display: block}

.qty{display: inline-flex;align-items: center;gap: .6rem;margin-top: .3rem}

.qty button{width: 26px;height: 26px;border: 1px solid var(--line);background: #fff;border-radius: 50%}

.rm{background: none;border: 0;color: #b3261e;font-size: .85rem}

.drawer-foot{padding: 1.2rem 1.3rem;border-top: 1px solid var(--line);display: grid;gap: .7rem}

.total{display: flex;justify-content: space-between;font-size: 1.2rem}

.muted{padding: 2rem 0;text-align: center}

@media(max-width: 760px){
    header{flex-wrap: wrap;}.search{order: 3;max-width: none;flex-basis: 100%}.cart-btn{margin-left: auto}
    .hero{padding: 4rem 5vw}.perks{grid-template-columns: 1fr}
    .m{grid-template-columns: 1fr}.m img{min-height: 220px}
}

@media(prefers-reduced-motion: reduce){*{transition: none!important;scroll-behavior: auto!important}}