.shop{padding-top:16px;padding-bottom:56px}
.shop h1{font-size:clamp(34px,5vw,52px);line-height:1.1}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.product{background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.product .pic{height:178px;display:grid;place-items:center;background:var(--lav);border-bottom:3px solid var(--ink)}
.product:nth-child(3n+2) .pic{background:var(--peach)}
.product:nth-child(3n) .pic{background:var(--butter)}
.product .pic img{width:160px;height:160px}
.product .info{padding:13px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.product h2{font-size:21px;line-height:1.2;margin:0}
.product .price{display:flex;align-items:center;font-size:22px;font-weight:700;margin-left:-6px;font-variant-numeric:tabular-nums}
.product .stock{color:var(--soft);font-size:14px}
.product .btn{margin-top:auto;text-align:center;padding:8px}
.product .btn:disabled{background:var(--line);color:var(--soft);box-shadow:none;cursor:default;transform:none}

dialog{background:var(--card);color:var(--ink);padding:24px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto}
dialog::backdrop{background:rgba(44,37,32,.55)}
dialog img{margin:0 auto}
dialog h2{font-size:26px;text-align:center;line-height:1.2}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0}
dt{font-weight:700}
dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
dialog .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
dialog .btn[hidden]{display:none}