/* ==========================================================================
   cart.css — Cociniña cart page  (Phase 2)
   --------------------------------------------------------------------------
   WHAT THIS FILE CONTROLS
     1.  Page shell, page title, layout order
     2.  Two-column layout
     3.  Cart items — thumbnail, name, price, quantity, remove
     4.  Totals card
     5.  Coupon
     6.  Proceed to Checkout + trust line
     7.  Same-day notice
     8.  Continue shopping
     9.  Empty cart
     10. Sticky mobile checkout bar (behind its own flag)
     11. Entry motion
     12. Reduced motion

   SCOPE
     Every selector is prefixed with .cn-cart, a body class the theme adds
     only when is_cart() is true — and, while previewing, only when the
     preview token is present. The checkout, the mini-cart and every other
     page are untouched.

   NOTE ON THE CART BLOCK
     This cart is the WooCommerce Cart *block*, rendered by React in the
     browser, so there are no WooCommerce PHP cart hooks. We never override
     a WooCommerce template: this file restyles the classes WooCommerce
     itself ships, and cn-cart.js appends the few extra elements.

     Layout is driven by CSS *container* queries on .wp-block-woocommerce-cart
     (container-type: inline-size), NOT media queries, so the rules below
     match WooCommerce's own 700px container breakpoint. Rules that depend on
     the viewport instead (the sticky bar, tap targets) use media queries and
     say so.

   All values come from tokens.css. Do not hardcode colours or sizes here.
   ========================================================================== */


/* ==========================================================================
   1. PAGE SHELL, TITLE, LAYOUT ORDER
   ========================================================================== */

body.cn-cart {
  background-color: var(--cn-page-bg);
  background-image: var(--cn-gradient-page);
  background-attachment: fixed;
  color: var(--cn-text);
  font-family: var(--cn-font-body);
  line-height: var(--cn-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cn-cart #content,
.cn-cart .site-content,
.cn-cart .ast-container,
.cn-cart #primary,
.cn-cart .entry-content,
.cn-cart .site-main {
  background: transparent;
}

.cn-cart #content {
  padding-top: var(--cn-space-xl);
  padding-bottom: calc(var(--cn-space-3xl) + var(--cn-widget-safe));
}

/* --- The "Cart" page title ---------------------------------------------
   Redundant: the Cart item in the menu is already highlighted. Hidden
   visually only — not display:none, heading not removed — so screen readers
   and search engines still get it. Same technique as checkout. */
.cn-cart .entry-header .entry-title,
.cn-cart .ast-single-post-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cn-cart .entry-header {
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
}

.cn-cart .wp-block-woocommerce-cart,
.cn-cart .wc-block-cart {
  max-width: var(--cn-checkout-max);
  margin-inline: auto;
  padding-inline: var(--cn-page-gutter);
  box-sizing: border-box;
}

.cn-cart .entry-content > .alignwide {
  max-width: none;
}


/* ==========================================================================
   2. TWO-COLUMN LAYOUT
   --------------------------------------------------------------------------
   WooCommerce ships 65/35 and already stacks the totals BELOW the items at
   its 700px container breakpoint. We only retune the split to 58/42 so the
   cart matches checkout, and make the totals card stick.
   ========================================================================== */

@container (min-width: 700px) {

  .cn-cart .wc-block-components-sidebar-layout {
    gap: 0;
  }
  .cn-cart .wc-block-components-sidebar-layout .wc-block-components-main {
    width: 58%;
    padding-right: calc(var(--cn-column-gap) / 2);
  }
  .cn-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 42%;
    padding-left: calc(var(--cn-column-gap) / 2);
  }

  /* Sticks clear of the site header, which is itself sticky. */
  .cn-cart .wc-block-cart__sidebar {
    position: sticky;
    align-self: flex-start;
    top: calc(var(--cn-main-h) + var(--cn-space-md));
  }
}

@container (max-width: 699px) {
  .cn-cart .wc-block-components-sidebar-layout .wc-block-components-main,
  .cn-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 100%;
    padding-inline: 0;
  }
}


/* ==========================================================================
   3. CART ITEMS
   ========================================================================== */

/* The table is a layout device here, not a data table, and table sizing
   does not account for padding on a <tr>. Leaving it as a table made the
   row 367px wide inside a 390px viewport and pushed 8px off-screen, so the
   whole structure is taken out of table layout and rebuilt as a grid. */
.cn-cart .wc-block-cart-items,
.cn-cart table.wc-block-cart-items,
.cn-cart .wc-block-cart-items > tbody,
.cn-cart .wc-block-cart-items > thead {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  margin: 0;
}

/* WooCommerce's PRODUCT / TOTAL header adds nothing once each row is a
   card, and it cannot be read as a column header on mobile anyway. */
.cn-cart .wc-block-cart-items__header {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Each row becomes a card, laid out as a grid: thumbnail, details, total. */
.cn-cart .wc-block-cart-items__row {
  display: grid;
  grid-template-columns: var(--cn-cart-thumb) minmax(0, 1fr) auto;
  gap: var(--cn-space-sm);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--cn-surface);
  border: var(--cn-border-hair);
  border-radius: var(--cn-radius-lg);
  box-shadow: var(--cn-shadow-card);
  padding: var(--cn-card-pad);
  margin-bottom: var(--cn-space-md);
}
/* WooCommerce draws a 1px row separator on every cell. Inside a card that
   reads as a stray line above the dish name and the price, and the plain
   .cn-cart reset lost to WooCommerce and its .is-mobile / .is-medium
   variants, so those are matched here too. */
.cn-cart .wc-block-cart-items__row > td,
.cn-cart .wc-block-cart-items__row > th,
.cn-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row td,
.cn-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row td,
.cn-cart table.wc-block-cart-items .wc-block-cart-items__row td {
  border-top: 0;
  border-bottom: 0;
}

.cn-cart .wc-block-cart-items__row > td,
.cn-cart .wc-block-cart-items__row > th {
  display: block;
  /* minmax(0,1fr) above plus min-width:0 here is what lets a long dish
     name wrap instead of forcing the grid wider. */
  min-width: 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
}

/* WooCommerce adds .is-mobile / .is-medium to the cart at narrow widths and
   ships its own layout for them at a specificity our .cn-cart rules lose to
   - it re-adds padding: 16px to the image cell and keeps three columns.
   Matching those classes is what makes the mobile layout ours. */
@media (max-width: 767px) {

  /* Two columns here, not three. Measured at 390px the row has 288px to
     spend, and the desktop arrangement needs 312 - a 72px thumbnail, a
     138px quantity stepper, a ~70px price and two 16px gaps. Forcing three
     columns is what squeezed the name column to 111px and pushed the dish
     name out over the price. Two columns give the details a full 200px,
     enough for the stepper, and the price takes its own row beneath. */
  .cn-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
  .cn-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row,
  .cn-cart .wc-block-cart-items__row {
    grid-template-columns: var(--cn-cart-thumb-mobile) minmax(0, 1fr);
  }

  /* WooCommerce sets grid-area: 1 / 2 on the line total at these widths,
     which lands it in the same cell as the name and prints the price over
     it. Setting grid-column alone did not undo it - the row half of the
     shorthand still won - so the whole area is restated. */
  .cn-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
  .cn-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
  .cn-cart .wc-block-cart-items__row > .wc-block-cart-item__total {
    grid-area: 2 / 2 / 3 / 3;
    text-align: right;
    margin-top: var(--cn-space-2xs);
    padding-top: var(--cn-space-2xs);
    border-top: 1px solid var(--cn-hairline);
  }
}

/* --- Thumbnail ---------------------------------------------------------- */
/* The CELL carries the size and the image fills it. Setting width on the
   image itself lost to the max-width:100% caps Astra and WooCommerce both
   apply, leaving non-square dish photos at their natural ratio - fine
   individually, ragged in a list. width:100% of a sized cell satisfies
   those caps instead of fighting them. */
/* WooCommerce keeps padding: 20px 16px 20px 0 on this cell. With
   box-sizing: border-box that ate 16px of the declared width, so a 96px
   cell gave an 80px image. The td selector raises specificity above
   WooCommerce so the reset actually lands. */
.cn-cart .wc-block-cart-items__row > td.wc-block-cart-item__image,
.cn-cart .wc-block-cart-item__image {
  width: var(--cn-cart-thumb);
  padding: 0;
}
/* Astra and WooCommerce both cap images at max-width:100%, which held the
   thumbnail below its declared size; the cap is lifted here so the token
   is what decides. Higher specificity than the plain img rules. */
.cn-cart .wc-block-cart-items__row > .wc-block-cart-item__image img,
.cn-cart .wc-block-cart-item__image img {
  width: 100%;
  height: var(--cn-cart-thumb);
  object-fit: cover;
  border-radius: var(--cn-radius-md);
  border: var(--cn-border-hair);
  display: block;
}

/* --- Name, price, meta -------------------------------------------------- */
.cn-cart .wc-block-components-product-name {
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-md);
  font-weight: var(--cn-weight-semibold);
  line-height: var(--cn-leading-snug);
  color: var(--cn-text);
  text-decoration: none;
  /* A long dish name must wrap, never overflow the card. */
  overflow-wrap: anywhere;
  display: inline-block;
}
.cn-cart .wc-block-components-product-name:hover,
.cn-cart .wc-block-components-product-name:focus-visible {
  color: var(--cn-text);
  text-decoration: underline;
  text-decoration-color: var(--cn-accent);
  text-underline-offset: 0.2em;
}

.cn-cart .wc-block-components-product-price,
.cn-cart .wc-block-cart-item__prices {
  font-size: var(--cn-text-sm);
  color: var(--cn-text-muted);
  font-variant-numeric: tabular-nums;
}

/* At quantity 1 this unit price and the line total are the same figure, so
   the row printed ₱200.00 twice. cn-cart.js marks those rows; at quantity 2
   and above the class comes off and the unit price returns, because that is
   where it starts explaining the line total. Kept out of the markup so the
   price is only ever hidden when the class is genuinely there - if the JS
   fails, both figures show, which is WooCommerce's own behaviour. */
.cn-cart .wc-block-cart-items__row.cn-qty-single .wc-block-cart-item__prices {
  display: none;
}

/* The row repeats the dish's short description, which is browsing copy, not
   review copy. Hidden so the row stays scannable. */
.cn-cart .wc-block-components-product-metadata__description,
.cn-cart .wc-block-components-product-metadata p {
  display: none;
}

/* --- Quantity stepper --------------------------------------------------- */
.cn-cart .wc-block-components-quantity-selector {
  display: flex;
  align-items: stretch;
  width: auto;
  max-width: none;
  margin: var(--cn-space-sm) 0 0;
  background-color: var(--cn-surface-raised);
  border: 1px solid var(--cn-hairline);
  border-radius: var(--cn-radius-pill);
  overflow: hidden;
}
.cn-cart .wc-block-components-quantity-selector::after {
  display: none;   /* WooCommerce's divider */
}

.cn-cart .wc-block-components-quantity-selector__button {
  width: var(--cn-qty-btn);
  min-width: var(--cn-qty-btn);
  height: var(--cn-qty-btn);
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--cn-text);
  font-size: var(--cn-text-lg);
  font-weight: var(--cn-weight-bold);
  line-height: 1;
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--cn-dur-fast) var(--cn-ease),
              color var(--cn-dur-fast) var(--cn-ease);
}
.cn-cart .wc-block-components-quantity-selector__button:hover:not([disabled]),
.cn-cart .wc-block-components-quantity-selector__button:focus-visible:not([disabled]) {
  background-color: var(--cn-accent-soft);
  color: var(--cn-accent);
}
.cn-cart .wc-block-components-quantity-selector__button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.cn-cart .wc-block-components-quantity-selector__input {
  width: var(--cn-qty-field);
  min-width: var(--cn-qty-field);
  height: var(--cn-qty-btn);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--cn-text);
  /* 16px minimum, or iOS zooms the page when the field is tapped. */
  font-size: var(--cn-text-base);
  font-weight: var(--cn-weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cn-cart .wc-block-components-quantity-selector__input:focus-visible {
  outline: var(--cn-focus-ring);
  outline-offset: -2px;
}

/* --- Remove ------------------------------------------------------------- */
/* WooCommerce renders this as an icon-only <button> just 24px wide. The
   icon and its aria-label ("Remove <dish> from cart") are kept as they are
   - injecting visible text into a React-managed button would be read out
   twice - but the hit area is widened to a full 44px square. */
.cn-cart .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cn-qty-btn);
  min-height: var(--cn-qty-btn);
  margin-top: var(--cn-space-2xs);
  padding: 0 var(--cn-space-2xs);
  background: none;
  border: 0;
  color: var(--cn-text-muted);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-xs);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-tracking-wide);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: color var(--cn-dur-fast) var(--cn-ease),
              text-decoration-color var(--cn-dur-fast) var(--cn-ease);
}
.cn-cart .wc-block-cart-item__remove-link:hover,
.cn-cart .wc-block-cart-item__remove-link:focus-visible {
  color: var(--cn-error);
  text-decoration-color: var(--cn-error);
}

/* --- Line total --------------------------------------------------------- */
.cn-cart .wc-block-cart-item__total {
  text-align: right;
  vertical-align: top;
}
.cn-cart .wc-block-cart-item__total .wc-block-components-product-price__value,
.cn-cart .wc-block-cart-item__total .wc-block-formatted-money-amount {
  font-size: var(--cn-text-md);
  font-weight: var(--cn-weight-bold);
  color: var(--cn-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .cn-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
  .cn-cart .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
  .cn-cart .wc-block-cart-items__row > td.wc-block-cart-item__image,
  .cn-cart .wc-block-cart-item__image {
    width: var(--cn-cart-thumb-mobile);
    padding: 0;
  }
  .cn-cart .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img,
  .cn-cart .wc-block-cart-items__row > .wc-block-cart-item__image img,
  .cn-cart .wc-block-cart-item__image img {
    width: 100%;
    height: var(--cn-cart-thumb-mobile);
  }
}


/* ==========================================================================
   4. TOTALS CARD
   ========================================================================== */

.cn-cart .wc-block-cart__totals-title {
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-2xs);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-tracking-wider);
  text-transform: uppercase;
  color: var(--cn-text-muted);
  margin: 0 0 var(--cn-space-sm);
  padding: 0;
}

.cn-cart .wp-block-woocommerce-cart-order-summary-block,
.cn-cart .wc-block-cart__sidebar > .wc-block-components-sidebar {
  background-color: var(--cn-surface);
  border: var(--cn-border-hair);
  border-radius: var(--cn-radius-lg);
  box-shadow: var(--cn-shadow-card);
  padding: var(--cn-card-pad);
  box-sizing: border-box;
}

.cn-cart .wc-block-components-totals-wrapper {
  border-top: var(--cn-border-hair);
  padding-block: var(--cn-space-sm);
}
.cn-cart .wc-block-components-totals-wrapper:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.cn-cart .wc-block-components-totals-item {
  padding: var(--cn-space-3xs) 0;
  color: var(--cn-text-muted);
  font-size: var(--cn-text-sm);
}
.cn-cart .wc-block-components-totals-item__value {
  color: var(--cn-text);
  font-weight: var(--cn-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The one number that gets the serif. */
.cn-cart .wc-block-components-totals-footer-item {
  padding-top: var(--cn-space-sm);
  border-top: 1px solid var(--cn-hairline-strong);
}
.cn-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: var(--cn-text-2xs);
  font-weight: var(--cn-weight-semibold);
  letter-spacing: var(--cn-tracking-wider);
  text-transform: uppercase;
  color: var(--cn-text-muted);
}
.cn-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--cn-font-display);
  font-weight: var(--cn-weight-semibold);
  font-size: var(--cn-text-total);
  line-height: var(--cn-leading-tight);
  letter-spacing: var(--cn-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--cn-text);
}
.cn-cart .wc-block-components-totals-footer-item__description {
  color: var(--cn-text-faint);
  font-size: var(--cn-text-xs);
}


/* ==========================================================================
   5. COUPON
   ========================================================================== */

.cn-cart .wc-block-components-totals-coupon .wc-block-components-panel__button {
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-text);
  padding-block: var(--cn-space-2xs);
}
.cn-cart .wc-block-components-panel__button svg {
  fill: var(--cn-text);
}

.cn-cart .wc-block-components-totals-coupon__form {
  gap: var(--cn-space-2xs);
  margin-top: var(--cn-space-2xs);
}

/* The coupon field has a visible button beside it, so its label is hidden
   for sighted users but kept for screen readers. */
.cn-cart .wc-block-components-totals-coupon__input label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.cn-cart .wc-block-components-totals-coupon__input input {
  min-height: 48px;
  padding: var(--cn-space-2xs) var(--cn-space-sm);
  background-color: var(--cn-field-bg);
  border: 1px solid var(--cn-field-border);
  border-radius: var(--cn-radius-md);
  color: var(--cn-field-text);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-base);
}
.cn-cart .wc-block-components-totals-coupon__input input:focus {
  border-color: var(--cn-accent);
  outline: var(--cn-focus-ring);
  outline-offset: var(--cn-focus-ring-offset);
}

.cn-cart .wc-block-components-totals-coupon__button {
  min-height: 48px;
  background: transparent;
  border: 1px solid var(--cn-accent);
  border-radius: var(--cn-radius-md);
  color: var(--cn-text);
  font-weight: var(--cn-weight-semibold);
}
.cn-cart .wc-block-components-totals-coupon__button:hover:not([disabled]) {
  background-color: var(--cn-accent-soft);
}

.cn-cart .wc-block-components-chip {
  background-color: var(--cn-accent-soft);
  border: 1px solid var(--cn-accent);
  color: var(--cn-text);
}
.cn-cart .wc-block-components-chip__remove-icon {
  fill: var(--cn-text);
}

/* --- Notices -----------------------------------------------------------
   --cn-error is readable on the deep green panels (5.37:1) but NOT on the
   brick page background (2.90:1), so every notice gets its own panel
   wherever WooCommerce decides to put it. Same rule as checkout. */
.cn-cart .wc-block-components-notice-banner {
  margin: 0 0 var(--cn-space-sm);
  padding: var(--cn-space-sm) var(--cn-space-md);
  background-color: var(--cn-surface);
  border: 1px solid var(--cn-hairline);
  border-left: 3px solid var(--cn-hairline-strong);
  border-radius: var(--cn-radius-md);
  box-shadow: var(--cn-shadow-raised);
  color: var(--cn-text);
  font-size: var(--cn-text-sm);
  line-height: var(--cn-leading-body);
}
.cn-cart .wc-block-components-notice-banner__content,
.cn-cart .wc-block-components-notice-banner__summary {
  color: var(--cn-text);
}
.cn-cart .wc-block-components-notice-banner svg {
  fill: currentColor;
}
.cn-cart .wc-block-components-notice-banner.is-error {
  border-left-color: var(--cn-error);
}
.cn-cart .wc-block-components-notice-banner.is-error > svg,
.cn-cart .wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__summary {
  color: var(--cn-error);
  fill: var(--cn-error);
}
.cn-cart .wc-block-components-notice-banner.is-success,
.cn-cart .wc-block-components-notice-banner.is-info {
  border-left-color: var(--cn-accent);
}
.cn-cart .wc-block-components-notice-banner.is-success > svg,
.cn-cart .wc-block-components-notice-banner.is-info > svg {
  fill: var(--cn-accent);
}
/* WooCommerce renders this with a transparent background, so its
   readability would depend on whatever happens to sit behind it. Giving it
   its own sunken panel guarantees --cn-error stays legible wherever the
   block chooses to put it - the same rule the checkout notices follow. */
.cn-cart .wc-block-components-validation-error {
  display: block;
  margin-top: var(--cn-space-2xs);
  padding: var(--cn-space-2xs) var(--cn-space-xs);
  background-color: var(--cn-surface-sunken);
  border-left: 3px solid var(--cn-error);
  border-radius: var(--cn-radius-sm);
  color: var(--cn-error);
  font-size: var(--cn-text-xs);
  font-weight: var(--cn-weight-semibold);
  line-height: var(--cn-leading-snug);
}
.cn-cart .wc-block-components-validation-error p {
  margin: 0;
  color: inherit;
}


/* ==========================================================================
   6. PROCEED TO CHECKOUT + TRUST LINE
   --------------------------------------------------------------------------
   WooCommerce ships this blue. It becomes the loudest element on the page,
   in brand green with a deep green label (5.28:1). White on bright green is
   2.70:1 and is never used.
   ========================================================================== */

.cn-cart .wc-block-cart__submit-container {
  padding: 0;
}

/* Below 768px WooCommerce pins this container itself
   (.wc-block-cart__submit-container--sticky, position: fixed, z-index 9999)
   and draws its own panel behind the button. With our bar on that is a
   second sticky bar over the first, so its pinning and panel are undone and
   the button returns to the page. Our bar off, it stays as WooCommerce
   ships it - that is the point of the flag. */
.cn-cart.cn-cart-bar-on .wc-block-cart__submit-container--sticky {
  position: static;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.cn-cart .wc-block-cart__submit-button,
.cn-cart a.wc-block-cart__submit-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: var(--cn-space-sm) var(--cn-space-lg);
  background: var(--cn-gradient-accent);
  border: 1px solid var(--cn-accent-dark);
  border-radius: var(--cn-radius-pill);
  box-shadow: var(--cn-shadow-button);
  color: var(--cn-header-footer-bg);
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-md);
  font-weight: var(--cn-weight-bold);
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--cn-dur-fast) var(--cn-ease),
              box-shadow var(--cn-dur) var(--cn-ease),
              background var(--cn-dur) var(--cn-ease);
}
.cn-cart .wc-block-cart__submit-button:hover:not([disabled]),
.cn-cart .wc-block-cart__submit-button:focus-visible:not([disabled]) {
  background: var(--cn-accent);
  color: var(--cn-header-footer-bg);
  transform: translateY(-1px);
  box-shadow: var(--cn-shadow-button-hover);
}
.cn-cart .wc-block-cart__submit-button:active:not([disabled]) {
  transform: translateY(0);
}

/* Shimmer sweep, matching Place Order on checkout. */
.cn-cart .wc-block-cart__submit-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 0%,
    var(--cn-shimmer) 46%,
    var(--cn-shimmer) 54%,
    transparent 100%
  );
  transform: translateX(-130%);
  transition: transform var(--cn-dur-slow) var(--cn-ease);
  pointer-events: none;
}
.cn-cart .wc-block-cart__submit-button:hover:not([disabled])::after,
.cn-cart .wc-block-cart__submit-button:focus-visible:not([disabled])::after {
  transform: translateX(130%);
}

/* --- Trust line (injected) ---------------------------------------------- */
.cn-cart .cn-trust {
  margin: var(--cn-space-md) 0 0;
  padding: var(--cn-space-sm) 0 0;
  border-top: var(--cn-border-hair);
}
.cn-cart .cn-trust__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-2xs) var(--cn-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cn-cart .cn-trust__item {
  display: flex;
  align-items: center;
  gap: var(--cn-space-3xs);
  margin: 0;
  font-size: var(--cn-text-xs);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-text-muted);
}
.cn-cart .cn-trust__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: var(--cn-accent);
}


/* ==========================================================================
   7. SAME-DAY NOTICE (injected, top of the totals card)
   ========================================================================== */

.cn-cart .cn-sameday {
  display: flex;
  align-items: flex-start;
  gap: var(--cn-space-2xs);
  margin: 0 0 var(--cn-space-md);
  padding: var(--cn-space-xs) var(--cn-space-sm);
  background-color: var(--cn-accent-soft);
  border: 1px solid var(--cn-accent);
  border-radius: var(--cn-radius-md);
  color: var(--cn-text);
  font-size: var(--cn-text-sm);
  line-height: var(--cn-leading-snug);
}
.cn-cart .cn-sameday__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: var(--cn-accent);
}
.cn-cart .cn-sameday__text strong {
  font-weight: var(--cn-weight-bold);
}


/* ==========================================================================
   8. CONTINUE SHOPPING (injected)
   ========================================================================== */

.cn-cart .cn-cart-continue {
  display: flex;
  justify-content: flex-start;
  margin: var(--cn-space-sm) 0 0;
}
.cn-cart .cn-cart-continue a {
  display: inline-flex;
  align-items: center;
  gap: var(--cn-space-3xs);
  min-height: var(--cn-nav-tap-min);
  color: var(--cn-text-muted);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  transition: color var(--cn-dur) var(--cn-ease),
              text-decoration-color var(--cn-dur) var(--cn-ease);
}
.cn-cart .cn-cart-continue a:hover,
.cn-cart .cn-cart-continue a:focus-visible {
  color: var(--cn-text);
  text-decoration-color: var(--cn-accent);
}


/* ==========================================================================
   9. EMPTY CART
   --------------------------------------------------------------------------
   Where a first-time visitor lands if they click Checkout with nothing in
   the cart, so it has to invite rather than apologise.
   ========================================================================== */

.cn-cart .wp-block-woocommerce-empty-cart-block {
  max-width: var(--cn-checkout-max);
  margin-inline: auto;
  text-align: center;
}

/* WooCommerce's default is a dark sad face. Replaced by the warm badge that
   cn-cart.js injects, so the original is hidden. */
.cn-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.cn-cart .with-empty-cart-icon::before {
  display: none;
}

.cn-cart .wc-block-cart__empty-cart__title {
  font-family: var(--cn-font-display);
  font-weight: var(--cn-weight-semibold);
  font-size: var(--cn-text-2xl);
  line-height: var(--cn-leading-tight);
  letter-spacing: var(--cn-tracking-tight);
  color: var(--cn-text);
  margin: 0 0 var(--cn-space-2xs);
}

/* The dotted separator between the message and the product grid. */
.cn-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--cn-hairline);
  max-width: 120px;
  margin: var(--cn-space-xl) auto;
}
.cn-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
  color: var(--cn-hairline-strong);
}

.cn-cart .cn-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--cn-space-md);
  border-radius: var(--cn-radius-pill);
  background: var(--cn-gradient-accent);
  border: 1px solid var(--cn-accent-dark);
  box-shadow: var(--cn-shadow-button);
}
.cn-cart .cn-empty-badge svg {
  width: 38px;
  height: 38px;
  fill: var(--cn-header-footer-bg);   /* 5.28:1 on bright green */
}

.cn-cart .cn-empty-text {
  margin: 0 auto var(--cn-space-lg);
  max-width: 46ch;
  font-size: var(--cn-text-md);
  color: var(--cn-text-muted);
}

.cn-cart .cn-empty-actions {
  display: flex;
  justify-content: center;
  margin-bottom: var(--cn-space-lg);
}

/* Astra underlines links inside .entry-content at (0,2,1), which outranked
   the (0,2,0) button rule in base.css and left "Browse the menu" reading as
   a link rather than a button. Three classes settle it. */
.cn-cart .cn-empty-actions .cn-btn-primary,
.cn-cart .cn-empty-actions .cn-btn-primary:hover,
.cn-cart .cn-empty-actions .cn-btn-primary:focus-visible {
  text-decoration: none;
}

/* --- "Today's menu" grid ------------------------------------------------ */
.cn-cart .wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--cn-font-display);
  font-weight: var(--cn-weight-semibold);
  font-size: var(--cn-text-xl);
  letter-spacing: var(--cn-tracking-tight);
  color: var(--cn-text);
  margin: 0 0 var(--cn-space-md);
}

/* The card's own look — background, border, radius, shadow, padding — now
   lives in product-card.css as the cn-product-card component, so Phase 2's
   version of it has been removed from here. It was still setting a 16px
   padding at the same weight as the component's 24px and winning on load
   order. Only the block types the component does not build are styled
   below. */
.cn-cart .wp-block-woocommerce-empty-cart-block .wc-block-product:not(.cn-product-card) {
  background-color: var(--cn-surface);
  border: var(--cn-border-hair);
  border-radius: var(--cn-radius-lg);
  box-shadow: var(--cn-shadow-card);
  padding: var(--cn-space-sm);
  box-sizing: border-box;
}
.cn-cart .wp-block-woocommerce-empty-cart-block img {
  border-radius: var(--cn-radius-md);
}
.cn-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title,
.cn-cart .wp-block-woocommerce-empty-cart-block .wp-block-post-title,
.cn-cart .wp-block-woocommerce-empty-cart-block .wp-block-post-title a {
  font-family: var(--cn-font-body);
  font-size: var(--cn-text-sm);
  font-weight: var(--cn-weight-semibold);
  color: var(--cn-text);
  text-decoration: none;
}
.cn-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
.cn-cart .wp-block-woocommerce-empty-cart-block .wc-block-components-product-price {
  color: var(--cn-text-muted);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   10. STICKY MOBILE CHECKOUT BAR
   --------------------------------------------------------------------------
   Injected by cn-cart.js only when the theme adds .cn-cart-bar, which is
   behind its own constant so it can be switched off independently.

   Viewport media query, not a container query: this is pinned to the
   viewport, not sized by the cart container.

   The chat widget is a 155x50 pill inset 20px from the bottom-right. At
   390px a full-bleed bar cannot fit a total and a button in the 187px left
   beside it, so the bar floats ABOVE the widget on --cn-cart-bar-lift
   instead of reserving a corner of itself, and is inset from both edges so
   the gap beneath it reads as deliberate. It sits at --cn-header-z, far
   below the widget and the project's 9999 ceiling. Body padding covering
   the bar and the lift stops it ever hiding the last cart row.
   ========================================================================== */

.cn-cart .cn-cart-bar {
  display: none;
}

@media (max-width: 767px) {

  .cn-cart.cn-cart-bar-on .cn-cart-bar {
    display: flex;
    position: fixed;
    left: var(--cn-cart-bar-side);
    right: var(--cn-cart-bar-side);
    bottom: var(--cn-cart-bar-lift);
    z-index: var(--cn-header-z);
    align-items: center;
    justify-content: space-between;
    gap: var(--cn-space-sm);
    box-sizing: border-box;
    min-height: var(--cn-cart-bar-h);
    padding: var(--cn-space-2xs) var(--cn-space-sm);
    background-color: var(--cn-surface);
    border: 1px solid var(--cn-header-border);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-bar);
  }

  /* So the bar never covers the last cart row. */
  .cn-cart.cn-cart-bar-on #content {
    padding-bottom: calc(var(--cn-cart-bar-h) + var(--cn-cart-bar-lift) + var(--cn-space-3xl));
  }

  .cn-cart .cn-cart-bar__total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .cn-cart .cn-cart-bar__label {
    font-size: var(--cn-text-2xs);
    font-weight: var(--cn-weight-semibold);
    letter-spacing: var(--cn-tracking-wide);
    text-transform: uppercase;
    color: var(--cn-text-muted);
  }
  .cn-cart .cn-cart-bar__value {
    font-family: var(--cn-font-display);
    font-size: var(--cn-text-lg);
    font-weight: var(--cn-weight-semibold);
    color: var(--cn-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .cn-cart .cn-cart-bar__button {
    flex: 0 1 auto;
    max-width: 60%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cn-nav-tap-min);
    padding: var(--cn-space-2xs) var(--cn-space-md);
    background: var(--cn-gradient-accent);
    border: 1px solid var(--cn-accent-dark);
    border-radius: var(--cn-radius-pill);
    color: var(--cn-header-footer-bg);   /* never white on green */
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-bold);
    text-decoration: none;
    white-space: nowrap;
  }
  .cn-cart .cn-cart-bar__button:hover,
  .cn-cart .cn-cart-bar__button:focus-visible {
    background: var(--cn-accent);
    color: var(--cn-header-footer-bg);
  }
}


/* ==========================================================================
   11. ENTRY MOTION — cards fade up, 300ms. No scroll effects.
   ========================================================================== */

@keyframes cn-cart-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cn-cart.cn-cart-ready .wc-block-cart__main,
.cn-cart.cn-cart-ready .wc-block-cart__sidebar,
.cn-cart.cn-cart-ready .wp-block-woocommerce-empty-cart-block {
  animation: cn-cart-fade-up var(--cn-reveal-dur) var(--cn-ease) both;
}
.cn-cart.cn-cart-ready .wc-block-cart__main {
  animation-delay: var(--cn-reveal-stagger);
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cn-cart.cn-cart-ready .wc-block-cart__main,
  .cn-cart.cn-cart-ready .wc-block-cart__sidebar,
  .cn-cart.cn-cart-ready .wp-block-woocommerce-empty-cart-block {
    animation: none;
  }
  .cn-cart .wc-block-cart__submit-button::after {
    display: none;
  }
  .cn-cart .wc-block-cart__submit-button:hover {
    transform: none;
  }
}