/* Cebu Food Trays — ordering UI */ :root { --cft-blue-grey: #8FA3C4; --cft-teal-blue: #3D7A94; --cft-orange: #E8862E; --cft-gold: #F0C877; --cft-olive: #C3C14A; --cft-dark: #2B2B2B; --cft-cream: #FBF8F3; } /* ---------- Menu grid ---------- */ .cft-menu-category-title { margin: 40px 0 18px; font-weight: 700; } .cft-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; margin-bottom: 12px; } .cft-menu-card { display: flex; flex-direction: column; } .cft-menu-card-img img { width: 100%; height: 170px; object-fit: cover; display: block; } .cft-menu-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .cft-menu-card-title { margin: 0; font-size: 18px; font-weight: 700; } .cft-menu-card-excerpt { color: #666; font-size: 14px; margin: 0; flex: 1; } .cft-menu-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .cft-menu-card-price { font-weight: 700; color: var(--cft-teal-blue); } /* ---------- Buttons ---------- */ .cft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 26px; border: none; border-radius: 999px; background: var(--cft-orange); color: #fff; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity .15s ease, transform .1s ease; } .cft-btn:hover { opacity: .9; } .cft-btn:active { transform: scale(0.98); } .cft-btn-sm { padding: 8px 18px; font-size: 13px; } .cft-btn-block { width: 100%; } .cft-btn-dark { background: var(--cft-dark); } .cft-btn-primary { background: var(--cft-orange); } .cft-btn-outline { /* !important throughout: Astra's own dynamic link-color CSS (from Customizer > Colors) targets plain `a` elements with a selector that otherwise wins the cascade against a single-class rule like this one whenever this button is rendered as an (e.g. "View My Orders" on the order confirmation page) rather than a