/*
Theme Name: Comida
Theme URI: https://www.comidabyken.me
Author: Comida by KEN
Description: Block theme for Comida by KEN, an eighteen-seat supperclub in Maadi, Cairo.
  The design is built on the one tension the business runs on: guests cannot see the menu
  or the address, but they do know the shape of the evening.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: comida
Tags: block-theme, e-commerce, one-column
*/

/* Fraunces carries the personality; its optical-sizing axis is what keeps the big
   display sizes from looking like a stock serif. */
h1, h2, h3, .wp-block-post-title, .comida-display {
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 96;
  text-wrap: balance;
}

/* ------------------------------------------------------------------ masthead
 * The logo stays centred and the navigation sits on its own row between two
 * rules - that arrangement is the site's existing signature and the one piece of
 * the old header worth keeping.
 */
.comida-masthead { border-bottom: 1px solid var(--wp--preset--color--haze); }
.comida-masthead__logo { display: flex; justify-content: center; padding: 12px 0 10px; }
.comida-masthead__logo img { max-width: 118px; height: auto; }

.comida-nav {
  border-top: 1px solid var(--wp--preset--color--haze);
  padding: 6px 0;
}

/* WooCommerce auto-inserts customer-account and mini-cart into block-theme headers.
   Declaring them here means it stops guessing, and they sit at the right edge while
   the navigation stays optically centred. */
.comida-nav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.comida-nav__bar > .wp-block-navigation { grid-column: 2; }
.comida-nav__utils {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.comida-nav__utils a,
.comida-nav__utils button { color: var(--wp--preset--color--ink); }
.comida-nav__utils .wc-block-mini-cart__badge { font-family: var(--wp--preset--font-family--mono); }
@media (max-width: 720px) {
  .comida-nav__bar { grid-template-columns: 1fr auto; }
  .comida-nav__bar > .wp-block-navigation { grid-column: 1; justify-self: start; }
  .comida-nav__utils { grid-column: 2; }
}
.comida-nav .wp-block-navigation__container { gap: clamp(20px, 4vw, 44px); }
.comida-nav a {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.comida-nav a:hover,
.comida-nav .current-menu-item > a { color: var(--wp--preset--color--grape); }

/* ------------------------------------------------------------------- eyebrow
 * Monospace metadata. The old footer already spoke this way; making it a system
 * rather than an accident is most of the personality here.
 */
.comida-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
}

/* --------------------------------------------------------------- season strip
 * The season posters are the only real imagery the brand has, so they are matted
 * like prints rather than bled edge to edge.
 */
body .comida-seasons.wp-block-gallery.has-nested-images {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 4px 4px 16px;
  margin: 0;
}
body .comida-seasons.wp-block-gallery.has-nested-images > figure {
  flex: 0 0 clamp(212px, 24vw, 268px);
  scroll-snap-align: start;
  margin: 0;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--haze);
  padding: 12px;
}
body .comida-seasons.wp-block-gallery.has-nested-images > figure img {
  width: 100%; height: auto; display: block;
}
.comida-seasons:focus-visible { outline: 2px solid var(--wp--preset--color--grape); outline-offset: 4px; }

/* -------------------------------------------------------------------- footer */
.comida-footer { border-top: 3px solid var(--wp--preset--color--grape); padding: 44px 0 56px; }
.comida-footer a { color: var(--wp--preset--color--ink); text-decoration: none; }
.comida-footer a:hover { color: var(--wp--preset--color--grape); text-decoration: underline; }
.comida-socials {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.comida-socials a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                       /* tap target */
  height: 44px;
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--haze);
  border-radius: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.comida-socials a:hover {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
}

.comida-colophon {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px; line-height: 1.9; letter-spacing: 0.04em;
  color: var(--wp--preset--color--mute);
}

/* ---------------------------------------------------------- commerce polish */
.woocommerce div.product .price,
.wc-block-components-product-price { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; }
.woocommerce table.shop_table,
.woocommerce-checkout .order-total { font-variant-numeric: tabular-nums; }
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button.alt {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 2px; padding: 14px 26px;
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
}
.woocommerce .button.alt:hover, .woocommerce a.button:hover { background: var(--wp--preset--color--grape); color: #fff; }

/* --------------------------------------------------------------- foundations */
:where(a, button, input, select, textarea, .wp-block-button__link, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--grape);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* The masthead was 201px of chrome before any content. Two causes: WooCommerce's
   mini-cart button is 45px tall on its own, and the two header rows were separated
   by the root block gap. */
.comida-masthead { --wp--style--block-gap: 0px; }
.comida-masthead > * + * { margin-block-start: 0; }

.comida-nav__utils .wp-block-woocommerce-mini-cart,
.comida-nav__utils .wc-block-mini-cart__button {
  height: auto;
  min-height: 0;
  padding: 0;
}
.comida-nav__utils .wc-block-mini-cart__button { display: flex; align-items: center; }
.comida-nav__utils .wc-block-mini-cart__icon { width: 20px; height: 20px; }
.comida-nav__utils .wc-block-mini-cart__badge {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  min-width: 16px;
  padding: 0 4px;
}
.comida-nav__utils .wp-block-woocommerce-customer-account svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ commerce
 * WooCommerce's classic checkout ships almost unstyled. These rules give it the
 * same type, rhythm and restraint as the rest of the site - it is the page that
 * takes the money, so it should not look like a different website.
 */
.comida-checkout h3, .comida-cart h3,
.woocommerce-billing-fields h3, #order_review_heading {
  font-family: var(--wp--preset--font-family--display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 18px;
}
.woocommerce form .form-row { margin: 0 0 18px; padding: 0; }
.woocommerce form .form-row label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
  display: block;
  margin-bottom: 7px;
}
.woocommerce form .form-row .required { color: var(--wp--preset--color--rose); border: 0; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--wp--preset--color--haze);
  border-radius: 2px;
  background: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--body);
  font-size: 16px;                 /* 16px stops iOS zooming the page on focus */
  color: var(--wp--preset--color--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--wp--preset--color--grape);
  outline: 2px solid var(--wp--preset--color--grape);
  outline-offset: 1px;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--wp--preset--color--rose); }

.woocommerce-checkout #payment,
.woocommerce .woocommerce-checkout-review-order-table,
.woocommerce-cart .cart_totals {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--haze);
  border-radius: 2px;
}
.woocommerce-checkout #payment { padding: 20px; }
.woocommerce table.shop_table { border-collapse: collapse; }
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--wp--preset--color--haze); padding: 13px 16px; }
.woocommerce table.shop_table th {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--wp--preset--color--mute); font-weight: 400;
}
.woocommerce table.shop_table .order-total .amount { font-size: 20px; }
.woocommerce-checkout #payment ul.payment_methods { padding: 0; margin: 0 0 16px; border: 0; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--haze); }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment div.payment_box { background: var(--wp--preset--color--paper); border-radius: 2px; font-size: 14px; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce #payment #place_order { width: 100%; min-height: 52px; }

.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-top-color: var(--wp--preset--color--grape);
  background: var(--wp--preset--color--base);
  font-size: 15px;
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--wp--preset--color--grape); }

@media (max-width: 768px) {
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
}

/* Lift the page: the first block inside main should sit directly under the masthead
   rather than inheriting the root block gap. */
main > .wp-block-post-content > *:first-child,
main > *:first-child { margin-block-start: 0; }

/* --------------------------------------------------------------------- hero
 * A crossfading carousel with no JavaScript and no slider library: the slides are
 * stacked, each running the same keyframes on a negative delay. Purely decorative,
 * so the stack is aria-hidden and the images carry empty alt - the headline is the
 * accessible content, not the photographs.
 */
.comida-hero {
  position: relative;
  /* Tall enough that the dining-room frame breathes, but capped: an uncapped 78vh
     put the CTA at 750px, below the fold on a 720px laptop. The px ceiling is what
     keeps the button reachable on tall monitors too. */
  min-height: min(76vh, 660px);
  display: grid;
  place-items: center;
  padding: var(--wp--preset--spacing--40) 24px;
  overflow: hidden;
  isolation: isolate;
}
.comida-hero__slides { position: absolute; inset: 0; z-index: -2; }
.comida-hero__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: comidaHeroFade 15s linear infinite;
  will-change: opacity;
}
@keyframes comidaHeroFade {
  0%   { opacity: 1 }
  16%  { opacity: 1 }
  20%  { opacity: 0 }
  96%  { opacity: 0 }
  100% { opacity: 1 }
}
/* One still image, no motion, for anyone who has asked for less of it. */
@media (prefers-reduced-motion: reduce) {
  .comida-hero__slides img { animation: none; opacity: 0; }
  .comida-hero__slides img:first-child { opacity: 1; }
}

.comida-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 68% at 50% 52%, rgba(23,18,28,.60) 0%, rgba(23,18,28,.34) 60%, rgba(23,18,28,0) 100%),
    linear-gradient(180deg, rgba(23,18,28,.26) 0%, rgba(23,18,28,.32) 55%, rgba(23,18,28,.40) 100%);
}
.comida-hero__inner { max-width: 1080px; text-align: center; }
.comida-hero h1 {
  color: var(--wp--preset--color--paper);
  max-width: 16ch;
  margin: 0 auto;
}
.comida-hero__lede {
  /* Measured: #E7DDEF gave 3.93:1 against these photographs' blown highlights, under
     the 4.5:1 AA floor for body text. Paper takes it to 4.86:1. */
  color: var(--wp--preset--color--paper);
  max-width: 54ch;
  margin: var(--wp--preset--spacing--20) auto 0;
  font-size: var(--wp--preset--font-size--md);
}
.comida-hero__actions { margin: var(--wp--preset--spacing--40) 0 0; }
.comida-hero__cta {
  display: inline-block;
  /* Comida purple. White on #9544D6 measures 5.17:1 - clear of the 4.5:1 AA floor
     for this 13px label. */
  background: var(--wp--preset--color--grape);
  color: #fff;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-sizing: border-box;
  min-height: 44px;            /* content-box would add the padding on top of this */
  padding: 16px 28px;
  border-radius: 2px;
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color .18s ease, color .18s ease;
}
.comida-hero__cta:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); text-decoration: none; }
@media (max-width: 640px) { .comida-hero { min-height: min(62vh, 460px); } }

/* --------------------------------------------------------- checkout layout
 * WooCommerce stacks billing, then the order review and payment box full-width
 * underneath, so on a wide screen the person paying scrolls past a column of
 * whitespace to reach the button. Two columns instead. Explicit row placement,
 * not grid-template-areas: the heading and the review are separate siblings, and
 * naming one area for both put the review in an implicit row under the billing.
 */
@media (min-width: 900px) {
  .comida-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 56px;
    align-items: start;
  }
  .comida-checkout form.checkout > .woocommerce-form-coupon-toggle,
  .comida-checkout form.checkout > .woocommerce-form-coupon,
  .comida-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }

  .comida-checkout form.checkout > .col2-set { grid-column: 1; grid-row: 2 / span 2; }
  .comida-checkout form.checkout > .col2-set .col-1,
  .comida-checkout form.checkout > .col2-set .col-2 { float: none; width: 100%; }

  .comida-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; }
  .comida-checkout form.checkout > #order_review { grid-column: 2; grid-row: 3; }
}
.comida-checkout .col2-set .col-2:empty { display: none; }

/* ------------------------------------------------------------------- terms
 * The terms are shown in full and must be scrolled through before the agreement
 * can be ticked. Sizing lives here; the gating is in checkout-terms.js.
 */
.comida-terms-scroll {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--wp--preset--color--haze);
  border-radius: 2px;
  background: var(--wp--preset--color--base);
  padding: 14px 16px;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
}
.comida-terms-scroll:focus-visible { outline: 2px solid var(--wp--preset--color--grape); outline-offset: 2px; }
.comida-terms-scroll p:last-child, .comida-terms-scroll ul:last-child { margin-bottom: 0; }
.comida-terms-hint {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--rose);
  margin: 0 0 10px;
}
.comida-terms-hint[hidden] { display: none; }
.woocommerce-terms-and-conditions-wrapper .validate-required input[disabled] + span { opacity: .55; }

/* ------------------------------------------------ checkout: column strategy
 * Long content left, short content right.
 *
 * Billing, then payment method, then place-order flow down the left as one linear
 * task. The order summary is short, so it takes the right column and sticks - the
 * total stays visible while the form is filled without pinning the tall element.
 *
 * display:contents on #order_review is what makes this possible: WooCommerce nests
 * the totals table and #payment inside one wrapper, and this lets both become grid
 * items of the form so they can be placed in different columns.
 */
@media (min-width: 900px) {
  .comida-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 56px;
    align-items: start;
  }
  .comida-checkout form.checkout > .woocommerce-form-coupon-toggle,
  .comida-checkout form.checkout > .woocommerce-form-coupon,
  .comida-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }

  /* Billing spans both right-column rows so the summary starts level with it
     instead of after it - otherwise the sticky panel only appears once the
     visitor has already scrolled past the whole form. */
  .comida-checkout form.checkout > .col2-set { grid-column: 1; grid-row: 2 / span 2; }
  .comida-checkout form.checkout > .col2-set .col-1,
  .comida-checkout form.checkout > .col2-set .col-2 { float: none; width: 100%; }

  .comida-checkout form.checkout > #order_review { display: contents; }

  /* Right column: what they are buying, and what it costs.
     The standalone heading is dropped and re-drawn on the table itself. As a
     separate grid item it needed its own row, and a spanning billing form always
     pushed the table a full row below it - roughly 100px of dead space no amount
     of row sizing removed. One grid item, no gap. */
  /* The "Your Order" heading is dropped, not positioned.
     It is a sibling grid item of the table, and every arrangement collided: its own
     row let a spanning billing form push the table ~100px below it, one shared cell
     painted it across the table's header row, and a padding offset does nothing
     because padding is ignored on a table with border-collapse:collapse. A caption
     inside the table survives none of it either - WooCommerce's updated_checkout
     AJAX re-renders that region from the template and throws it away.
     The table already says PRODUCT / SUBTOTAL and TOTAL. The label earned nothing. */
  .comida-checkout form.checkout > #order_review_heading { display: none; }
  .comida-checkout form.checkout .woocommerce-checkout-review-order-table {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    position: sticky;
    top: 24px;
  }

  /* Left column, below the form: how they pay, and the button. */
  .comida-checkout form.checkout #payment {
    grid-column: 1;
    grid-row: 4;
    margin-top: 40px;
  }
}

/* ------------------------------------------------------------------- mobile
 * Most of the audience is on a phone, so these are corrections, not polish.
 */

/* Any control under 16px makes iOS zoom the whole page on focus and leaves the
   visitor scrolled sideways in the middle of paying. */
@media (max-width: 900px) {
  .woocommerce input[type="text"], .woocommerce input[type="email"],
  .woocommerce input[type="tel"], .woocommerce input[type="number"],
  .woocommerce input[type="password"], .woocommerce input[type="search"],
  .woocommerce select, .woocommerce textarea,
  .woocommerce .quantity input.qty,
  .woocommerce form .form-row input.input-text,
  input#coupon_code {
    font-size: 16px;
  }
}

/* Tap targets. Measured at 390px: burger 24x24, cart remove 24x24, footer links
   22px tall - all well under the 44px minimum. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comida-footer .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.woocommerce a.remove {
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 22px;
}
.comida-nav__utils .wc-block-mini-cart__button {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

@media (max-width: 640px) {
  /* Single column everywhere; the classic checkout floats do not collapse alone. */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { float: none; width: 100%; margin-right: 0; }

  /* Season strip: one card per swipe rather than a sliver of the next. */
  body .comida-seasons.wp-block-gallery.has-nested-images > figure { flex-basis: 74vw; }

  /* The order table crushes at phone width; let it scroll rather than squash. */
  .woocommerce table.shop_table { display: block; overflow-x: auto; }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { padding: 11px 12px; }

  .comida-footer .wp-block-columns { gap: 8px; }
  .comida-colophon { text-align: left !important; }
}

/* -------------------------------------------- checkout density (pointer only)
 * Tighter fields so more of the form clears the fold. Scoped to wide viewports
 * with a fine pointer: on touch the 46px control height and 16px text are tap
 * target and iOS-zoom requirements, not styling, and must not be compressed.
 */
@media (min-width: 900px) and (pointer: fine) {
  .comida-checkout form .form-row { margin-bottom: 11px; }
  .comida-checkout form .form-row label { margin-bottom: 3px; font-size: 10px; }
  .comida-checkout form .form-row input.input-text,
  .comida-checkout form .form-row select,
  .comida-checkout form .form-row textarea,
  .comida-checkout .select2-container .select2-selection--single {
    min-height: 38px;
    padding: 7px 11px;
    font-size: 15px;
  }
  .comida-checkout form .form-row textarea { min-height: 78px; }
  .comida-checkout h3, .comida-checkout #order_review_heading { font-size: 19px; margin-bottom: 12px; }
  .comida-checkout .woocommerce-billing-fields { margin-top: 0; }

  /* Two-up the short fields so the column is not a single tall stack. */
  .comida-checkout form .form-row-first,
  .comida-checkout form .form-row-last { width: calc(50% - 8px); }
  .comida-checkout #billing_postcode_field,
  .comida-checkout #billing_city_field { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
  .comida-checkout #billing_city_field { margin-right: 12px; }
  .comida-checkout #billing_phone_field,
  .comida-checkout #billing_email_field { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
  .comida-checkout #billing_phone_field { margin-right: 12px; }

  .comida-checkout table.shop_table th,
  .comida-checkout table.shop_table td { padding: 9px 12px; }
  .comida-checkout #payment { padding: 16px; }
}

/* ------------------------------------------------------------- cart layout
 * Single column. Every order is seats at one dinner, so the items table already
 * states the total; a second panel repeating it was two numbers for one fact.
 * Total and action sit under the table, in the same box.
 */
.comida-cart .cart-collaterals { display: none; }

/* Flush against the table so the items and what they cost read as one object,
   not a table and a separate widget. WooCommerce puts a bottom margin on
   shop_table which otherwise leaves a gap between the two borders. */
.comida-cart .woocommerce-cart-form table.shop_table { margin-bottom: 0; }
.comida-cart .woocommerce-cart-form { margin-bottom: 0; }

.comida-cart__summary {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--wp--preset--color--haze);
  border-top: 0;
  background: var(--wp--preset--color--base);
  padding: 16px 18px;
}
.comida-cart__total { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.comida-cart__total-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mute);
}
.comida-cart__total-value {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.comida-cart__total-value .amount { font-weight: 600; }
.comida-cart__checkout {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 2px;
  background: var(--wp--preset--color--grape);
  color: #fff;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color .18s ease;
}
.comida-cart__checkout:hover { background: var(--wp--preset--color--ink); color: #fff; text-decoration: none; }
@media (max-width: 560px) {
  .comida-cart__summary { flex-direction: column; align-items: stretch; }
  .comida-cart__total { justify-content: space-between; }
  .comida-cart__checkout { width: 100%; }
}

/* WooCommerce ships its buttons as content-box, so any width:100% plus padding
   overflows its container - the cart's checkout button broke out of the totals
   panel by 44px. Same trap as a min-height tap target on content-box. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce #respond input#submit,
.comida-cart .cart-collaterals .checkout-button,
.woocommerce #payment #place_order {
  box-sizing: border-box;
}
.comida-cart .cart_totals > h2 { margin-bottom: 14px; }

/* Product titles in the cart table read as body copy, not as pink links in a wall
   of numbers; the row is already obviously clickable. */
.comida-cart td.product-name a,
.comida-checkout td.product-name a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.comida-cart td.product-name a:hover { color: var(--wp--preset--color--grape); text-decoration: underline; }
.comida-cart .cart-collaterals .wc-proceed-to-checkout { padding: 12px 0 0; }

/* ---------------------------------------------------- commerce type scale
 * Cart and checkout tables are a scanning task, not reading: they were running at
 * the page's 17px body size, which made a dinner name wrap to six lines and put
 * prices and headings at the same weight. One step down, tabular figures, and
 * numbers that line up in a column.
 */
.comida-cart table.shop_table,
.comida-checkout table.shop_table {
  font-size: 15px;
  line-height: 1.5;
}
.comida-cart table.shop_table td.product-name,
.comida-checkout table.shop_table td.product-name {
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}
.comida-cart table.shop_table .product-price,
.comida-cart table.shop_table .product-subtotal,
.comida-checkout table.shop_table td { font-variant-numeric: tabular-nums; }
.comida-cart table.shop_table .amount,
.comida-checkout table.shop_table .amount { white-space: nowrap; }

/* The dinner name is the only thing in these rows anyone reads; give it the room
   rather than letting a thumbnail column and five equal columns squeeze it. */
.comida-cart table.shop_table td.product-thumbnail,
.comida-cart table.shop_table th.product-thumbnail { width: 64px; }
.comida-cart table.shop_table td.product-thumbnail img { width: 48px; height: auto; }
.comida-cart table.shop_table td.product-remove,
.comida-cart table.shop_table th.product-remove { width: 44px; }
.comida-cart table.shop_table td.product-name,
.comida-cart table.shop_table th.product-name { width: auto; min-width: 34%; }

.comida-cart table.shop_table .quantity input.qty {
  width: 64px;
  min-height: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Coupon row: two secondary actions should not read as loudly as the primary one. */
.comida-cart .actions .button,
.comida-cart .actions input.button {
  font-size: 11px;
  padding: 11px 16px;
  min-height: 40px;
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--haze);
}
.comida-cart .actions .button:hover,
.comida-cart .actions input.button:hover {
  border-color: var(--wp--preset--color--ink);
  background: transparent;
  color: var(--wp--preset--color--ink);
}
.comida-cart .actions .coupon input#coupon_code { min-height: 40px; font-size: 15px; }

/* ----------------------------------------------------- single product page
 * The product title inherited the page h1: 63px with a 0.98 line-height. A
 * line-height below 1 lets the glyph box overflow its line box, so the last line
 * painted down over the price - which is why "3,250 EGP" rendered sliced. Smaller
 * and with room to breathe, so the title, price, description, date and add-to-cart
 * all sit alongside the product image instead of pushing past it.
 */
.wp-block-woocommerce-single-product .wp-block-post-title,
.single-product .wp-block-post-title {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.08;
  margin: 0 0 10px;
}
.single-product .wp-block-woocommerce-product-price,
.single-product p.price {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  margin: 0 0 18px;
  color: var(--wp--preset--color--ink);
}
.single-product .wp-block-post-excerpt,
.single-product .woocommerce-product-details__short-description { margin-bottom: 16px; }
.single-product .wp-block-post-excerpt p,
.single-product .woocommerce-product-details__short-description p { font-size: 16px; line-height: 1.55; }
.single-product form.cart { margin-top: 18px; }
.single-product .variations th.label label { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }

/* ------------------------------------------------------------------ select2
 * WooCommerce replaces the country and state <select> with a select2 widget and
 * hides the native control (it measures 1px wide). Styling the native select did
 * nothing; these are the elements actually on screen, and without this they render
 * at roughly double the height of every other field.
 */
body .comida-checkout .select2-container--default .select2-selection--single,
body .comida-checkout .select2-container .select2-selection--single {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--haze);
  border-radius: 2px;
  background: var(--wp--preset--color--base);
}
body .comida-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  padding: 0 30px 0 11px;
  font-size: 15px;
  color: var(--wp--preset--color--ink);
}
body .comida-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  right: 6px;
}
body .comida-checkout .select2-container--default.select2-container--focus .select2-selection--single,
body .comida-checkout .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--wp--preset--color--grape);
  outline: 2px solid var(--wp--preset--color--grape);
  outline-offset: 1px;
}
body .select2-dropdown {
  border-color: var(--wp--preset--color--haze);
  border-radius: 2px;
  font-size: 15px;
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--wp--preset--color--grape);
}
/* Touch keeps the 46px target and 16px text; iOS zooms anything smaller. */
@media (max-width: 900px) {
  body .comida-checkout .select2-container--default .select2-selection--single { height: 46px; min-height: 46px; }
  body .comida-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; font-size: 16px; }
  body .comida-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
}

/* The header template part and <main> are siblings in .wp-site-blocks, so the root
   block gap put 28px of dead space under the navbar on every page before main's
   own padding even started. */
.wp-site-blocks > header + main,
.wp-site-blocks > header + * { margin-block-start: 0; }