/*
 * Café Ordering Kit — structural styles for the WP Cafe menu.
 * Brand-neutral: layout only, no colours. Each site's theme supplies the
 * palette (via CSS variables) and the WP Cafe accent (--wpc-primary-color).
 *
 * NOTE: WP Cafe's card-core.css loads after this file, so overrides of its
 * declarations (padding, position, price size) use !important on purpose.
 */

/* Card padding. */
.wpc-food-menu-item{ padding:15px; }

/* Title + price matched at the same size (the visible title is a link). */
.wpc-food-menu-item .wpc-food-inner-content .wpc-post-title,
.wpc-food-menu-item .wpc-post-title a,
.wpc-food-menu-item .wpc-menu-price{ font-size:20px!important; }

/* Drop card-core's right gutter that was reserved for the absolute button. */
.wpc-food-menu-item .wpc-food-inner-content p{ padding:0!important; }

/* Let the add-to-cart flow to the bottom-right instead of being absolutely pinned. */
.wpc-food-menu-item .wpc-add-to-cart{ position:static!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; text-align:right!important; margin-top:10px!important; }

/* Long titles: keep the price on the first line and let the name wrap below it,
   instead of the leader dots + price breaking onto their own line. */
.wpc-food-menu-item .wpc-post-title{ display:flex!important; flex-wrap:nowrap!important; align-items:baseline!important; column-gap:8px!important; }
.wpc-food-menu-item .wpc-post-title > a{ flex:0 1 auto!important; }
.wpc-food-menu-item .wpc-title-border{ flex:1 1 12px!important; }
.wpc-food-menu-item .wpc-menu-currency{ flex:0 0 auto!important; white-space:nowrap!important; }

/* Items without a real photo: hide the grey WooCommerce placeholder and let the
   text fill the card. Real photos still show, and new photos appear on their own
   as they're added in WooCommerce. */
.wpc-food-menu-item:has(img.woocommerce-placeholder) .wpc-col-md-4{ display:none!important; }
.wpc-food-menu-item:has(img.woocommerce-placeholder) .wpc-col-md-8{ flex:0 0 100%!important; max-width:100%!important; width:100%!important; }