/* ============================================================================
   ZARAK CART + CHECKOUT
   Loaded on the checkout page only. Everything else on the site is unaffected,
   which is why this is a fourth sheet rather than four kilobytes in the bundle.

   White canvas, cocoa type, one gold accent. Reuses the tokens, .zk-input and
   .zk-btn from the main bundle - nothing is restyled from scratch here.
   ========================================================================= */

/* ---------- shell ---------- */
.zk-cohead { border-block-end: 1px solid var(--zk-hairline); background-color: var(--zk-white); }
.zk-cohead__inner { display: flex; align-items: center; min-block-size: 64px; }
.zk-cohead__logo { display: inline-flex; }
.zk-cohead__logo img { inline-size: auto; block-size: 26px; }

.zk-cofoot { margin-block-start: var(--zk-space-7); border-block-start: 1px solid var(--zk-hairline); background-color: var(--zk-white); }
.zk-cofoot__inner { display: flex; flex-direction: column; align-items: center; gap: var(--zk-space-3); padding-block: var(--zk-space-5); text-align: center; }
.zk-cofoot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--zk-space-2) var(--zk-space-4); margin: 0; padding: 0; list-style: none; }
.zk-cofoot__links a { font-size: var(--zk-fs-body-sm); color: var(--zk-muted); text-decoration: none; }
.zk-cofoot__links a:hover { color: var(--zk-cocoa); text-decoration: underline; }
.zk-cofoot__copy { margin: 0; font-size: var(--zk-fs-caption); color: var(--zk-muted); }
@media (min-width: 900px) {
  .zk-cofoot__inner { flex-direction: row; align-items: center; gap: var(--zk-space-3) var(--zk-space-5); text-align: start; }
  .zk-cofoot__links { justify-content: flex-start; }
  .zk-cofoot__copy { margin-inline-start: auto; }
}

/* The checkout is its own canvas: white, and no page furniture around it. */
body.woocommerce-checkout .zk-main { background-color: var(--zk-white); }
/* The checkout page uses the document shell, which caps prose at 960px. A
   checkout is not prose - it is two columns - so it takes a wider measure. */
body.woocommerce-checkout .zk-shell { max-inline-size: 1240px; }
body.woocommerce-checkout .zk-section { padding-block: var(--zk-space-5) 0; }
/* The document template prints the page title. A checkout does not need to be
   told it is a checkout - the logo and the form say so - and it cost height. */
body.woocommerce-checkout .zk-doc__title,
body.woocommerce-checkout .zk-doc__head { display: none; }

/* ---------- the two columns ----------
   #order_review is dissolved so its two children - the totals table and the
   payment box - can sit in different columns while keeping the DOM contract
   checkout.js refreshes against. */
.zk-co { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zk-space-6); }
.zk-co #order_review { display: contents; }
/* Scoped to .zk-doc__body deliberately: the checkout renders inside the
   document wrapper, and `.zk-doc__body h2` (0,1,1) outranks a bare class, so
   every heading here was coming out at the 23px article size. The same trap is
   already recorded for h3 in components.css. */
.zk-doc__body .zk-co__h2 { margin: 0 0 var(--zk-space-3); font-family: var(--zk-font-display); font-size: 16px; font-weight: var(--zk-fw-semibold); line-height: 1.3; color: var(--zk-ink); }
.zk-doc__body .zk-co__h2--sm { font-size: var(--zk-fs-body-sm); font-family: var(--zk-font-ui); font-weight: var(--zk-fw-semibold); color: var(--zk-muted); }

/* Mobile order: the summary leads, so the customer sees what they are paying
   for before being asked for anything. */
.zk-co__sumwrap { order: 1; }
.zk-co__main { order: 3; }
#payment { order: 4; }

/* ---------- collapsible order summary (phone) ----------
   The reference's top bar: label, chevron, total. Full-bleed to the gutter so
   it reads as a band under the logo rather than a card floating in the page. */
.zk-co__sumwrap { margin-inline: calc(var(--zk-gutter) * -1); border-block-end: 1px solid var(--zk-hairline); background-color: var(--zk-surface-page); }
.zk-co__sumbar { display: flex; align-items: center; justify-content: space-between; gap: var(--zk-space-4); padding: var(--zk-space-4) var(--zk-gutter); list-style: none; cursor: pointer; }
.zk-co__sumbar::-webkit-details-marker { display: none; }
.zk-co__sumbar-label { display: inline-flex; align-items: center; gap: var(--zk-space-2); font-size: var(--zk-fs-body); font-weight: var(--zk-fw-medium); color: var(--zk-cocoa); }
.zk-co__chev { inline-size: 16px; block-size: 16px; transition: transform var(--zk-dur-fast) var(--zk-ease); }
.zk-co__sumwrap[open] .zk-co__chev { transform: rotate(180deg); }
.zk-co__sumbar-total { font-size: var(--zk-fs-price-lg); font-weight: var(--zk-fw-bold); color: var(--zk-ink); font-variant-numeric: tabular-nums; }
.zk-co__sumbar-total .woocommerce-Price-amount { font-weight: inherit; }
/* The open panel keeps the band's ground, with the gutter given back. */
/* The gutter lives on the tbody and tfoot, not on #order_review and not on the
   table. #order_review is display:contents, so it generates no box to pad; and
   a display:block tbody inside a display:table parent lays out from the
   table's BORDER box, so padding on the table was ignored too. These two are
   the real block boxes, and every row in the open summary is inset by them. */
.zk-co__sumwrap .zk-co__items,
.zk-co__sumwrap .zk-co__totals { padding-inline: var(--zk-gutter); }
.zk-co__sumwrap .zk-co__totals { padding-block-end: var(--zk-space-5); }
/* The heading is the bar on a phone; it returns as a heading on desktop. */
.zk-co__sumwrap > .zk-co__h2--summary { display: none; }
@media (prefers-reduced-motion: reduce) { .zk-co__chev { transition: none; } }

/* ---------- fields ---------- */
.zk-co .woocommerce-billing-fields__field-wrapper,
.zk-co .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zk-space-3); }
.zk-co .form-row { margin: 0; padding: 0; grid-column: 1 / -1; }
.zk-co .form-row-first { grid-column: 1; }
.zk-co .form-row-last { grid-column: 2; }
.zk-co .form-row label .required { color: var(--zk-sale); text-decoration: none; }
.zk-co .form-row .optional { color: var(--zk-muted); font-weight: var(--zk-fw-regular); }
.zk-co .form-row .description { margin-block-start: var(--zk-space-1); font-size: 11px; line-height: 1.45; color: var(--zk-muted); }
.zk-co__group + .zk-co__group { margin-block-start: var(--zk-space-5); }
/* WooCommerce prints its own billing heading; this template supplies two. */
.zk-co .woocommerce-billing-fields > h3 { display: none; }
/* WooCommerce marks the invalid row; say so in colour as well as in the notice. */
/* Fields reuse .zk-input from the bundle - see woocommerce_form_field_args.
   Only the checkout-specific states are described here. */
.zk-co__label { display: block; margin-block-end: var(--zk-space-1); font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-medium); color: var(--zk-muted); }
.zk-co .woocommerce-invalid .zk-input,
.zk-co .woocommerce-invalid .zk-select { border-color: var(--zk-sale); }
.zk-doc__body .zk-co h3 { margin: 0 0 var(--zk-space-3); font-family: var(--zk-font-display); font-size: 16px; font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }
.zk-co #ship-to-different-address { font-size: var(--zk-fs-body); }

/* ---------- delivery method + payment: one selection-card language ---------- */
.zk-co__ship:empty { display: none; }
.zk-co__ship { margin-block-start: var(--zk-space-5); }
.zk-co__ship-none { margin: 0; padding: var(--zk-space-4); border: 1px dashed var(--zk-hairline); border-radius: var(--zk-radius-md); font-size: var(--zk-fs-body-sm); color: var(--zk-muted); }
.zk-co #shipping_method,
.zk-co .wc_payment_methods { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--zk-space-2); }
.zk-co #shipping_method li,
.zk-co .wc_payment_methods > li { margin: 0; padding: var(--zk-space-3) var(--zk-space-4); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); background-color: var(--zk-white); transition: border-color var(--zk-dur-fast) var(--zk-ease), background-color var(--zk-dur-fast) var(--zk-ease); }
.zk-co #shipping_method li:hover,
.zk-co .wc_payment_methods > li:hover { border-color: var(--zk-cocoa-soft); }
/* Selected: warm ivory and a cocoa edge, never a gold slab. */
.zk-co #shipping_method li:has(input:checked),
.zk-co .wc_payment_methods > li:has(input:checked) { border-color: var(--zk-cocoa); background-color: var(--zk-ivory); }
.zk-co #shipping_method label,
.zk-co .wc_payment_methods label { display: flex; align-items: center; gap: var(--zk-space-3); margin: 0; font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); color: var(--zk-ink); cursor: pointer; }
.zk-co #shipping_method .amount { margin-inline-start: auto; font-weight: var(--zk-fw-semibold); font-variant-numeric: tabular-nums; }
.zk-co #shipping_method input,
.zk-co .wc_payment_methods input[type="radio"] { flex: none; inline-size: 18px; block-size: 18px; accent-color: var(--zk-cocoa); }
.zk-co .payment_box { margin: var(--zk-space-2) 0 0; padding: 0; background: none; }
.zk-co .payment_box::before { display: none; }
.zk-co .payment_box p { margin: 0; font-size: var(--zk-fs-caption); line-height: 1.5; color: var(--zk-muted); }
.zk-co .wc_payment_methods label img { display: none; }
/* ONE rate: WooCommerce renders no radio, so the card had nothing in it to say
   it was chosen. It IS the choice - mark it as made. */
.zk-co #shipping_method li:only-child { border-color: var(--zk-cocoa); background-color: var(--zk-ivory); }

/* Select2 ships its own geometry; align it to the other fields. */
.zk-co .select2-container--default .select2-selection--single {
  display: flex; align-items: center;
  /* .zk-input computes to control-h + a step once its padding and line-height
     are in; select2 sized itself to control-h alone and sat 4px shorter than
     every field around it. */
  min-block-size: calc(var(--zk-control-h) + var(--zk-space-1));
  padding: 0 var(--zk-space-4);
  border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-sm); background-color: var(--zk-surface-card);
}
.zk-co .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; font-size: 16px; color: var(--zk-cocoa); }
.zk-co .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--zk-muted); }
.zk-co .select2-container--default .select2-selection--single .select2-selection__arrow { block-size: 100%; inset-inline-end: var(--zk-space-3); }
.zk-co .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--zk-cocoa); }
/* The dropdown was pure select2 default - a white box with a blue highlight. */
.select2-container--default .select2-dropdown { border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-sm); box-shadow: var(--zk-shadow-2); overflow: hidden; }
.select2-container--default .select2-search--dropdown { padding: var(--zk-space-2); }
.select2-container--default .select2-search--dropdown .select2-search__field { min-block-size: var(--zk-control-h); padding-inline: var(--zk-space-3); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-sm); font-family: var(--zk-font-ui); font-size: 16px; color: var(--zk-cocoa); }
.select2-container--default .select2-results__option { padding: var(--zk-space-3) var(--zk-space-4); font-family: var(--zk-font-ui); font-size: var(--zk-fs-body); color: var(--zk-ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background-color: var(--zk-ivory); color: var(--zk-cocoa); }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] { background-color: var(--zk-cocoa); color: var(--zk-ivory); }

/* Consent rows, not orphaned text. */
.zk-co #ship-to-different-address { margin-block: var(--zk-space-4) 0; }
.zk-co #ship-to-different-address label { display: flex; align-items: center; gap: var(--zk-space-2); margin: 0; font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-regular); color: var(--zk-muted); cursor: pointer; }
.zk-co #ship-to-different-address input { inline-size: 16px; block-size: 16px; accent-color: var(--zk-cocoa); }
.zk-co .woocommerce-additional-fields { margin-block-start: var(--zk-space-4); }
.zk-co .woocommerce-additional-fields textarea { min-block-size: 64px; }
.zk-co .woocommerce-privacy-policy-text p { margin: 0 0 var(--zk-space-3); font-size: 11px; line-height: 1.5; color: var(--zk-muted); }
.zk-co .woocommerce-terms-and-conditions-wrapper .form-row { margin-block-end: var(--zk-space-4); }
.zk-co .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: var(--zk-space-3); }
.zk-co .woocommerce-form__input-checkbox { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; accent-color: var(--zk-cocoa); }

/* The heading is a sibling of #payment, so it carries the section's space and
   #payment sits straight under it. */
.zk-co__pay-h { order: 4; margin-block-start: var(--zk-space-5); }
#payment { margin-block-start: 0; }
#payment > .zk-co__h2 { margin-block-end: var(--zk-space-4); }

/* ---------- what happens next ---------- */
/* Was a 397px ivory card and the loudest thing on the page. Same five facts,
   no panel: a hairline above, caption type, two columns where there is room. */
.zk-co__info { display: none; margin-block-start: var(--zk-space-5); padding-block-start: var(--zk-space-4); border-block-start: 1px solid var(--zk-hairline); }
.zk-co__info .zk-co__h2 { margin-block-end: var(--zk-space-2); }
.zk-co__info-list { display: grid; gap: var(--zk-space-1) var(--zk-space-5); margin: 0; padding: 0; list-style: none; }
.zk-co__info-list li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: var(--zk-space-2); font-size: var(--zk-fs-caption); line-height: 1.55; color: var(--zk-muted); }
.zk-co__tick { inline-size: 15px; block-size: 15px; margin-block-start: 2px; color: var(--zk-gold-deep); }

/* ---------- order summary ---------- */
/* No outer card. The reference summary is a quiet column, not a second panel
   competing with the form: hairlines separate the zones instead. */
.zk-co__summary { inline-size: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; }
.zk-co__summary th,
.zk-co__summary td { padding: 0; border: 0; text-align: start; font-weight: inherit; }
.zk-co__items { display: block; padding-block-end: var(--zk-space-4); }
.zk-co__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--zk-space-4); align-items: center; }
.zk-co__item + .zk-co__item { margin-block-start: var(--zk-space-4); }
/* overflow stays VISIBLE here - the quantity badge sits outside the box and an
   overflow:hidden on this element clipped it away entirely. The image is
   rounded by its own radius instead. */
.zk-co__thumb { position: relative; display: block; inline-size: 56px; block-size: 56px; }
.zk-co__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); background-color: var(--zk-ivory); }
.zk-co__qty { position: absolute; inset-block-start: -7px; inset-inline-end: -7px; display: grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 5px; border-radius: var(--zk-radius-pill); background-color: var(--zk-cocoa); color: var(--zk-white); font-size: 11px; font-weight: var(--zk-fw-semibold); font-variant-numeric: tabular-nums; }
.zk-co__name { display: block; font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); line-height: 1.45; color: var(--zk-ink); }
.zk-co__variation { display: block; margin-block-start: 2px; font-size: var(--zk-fs-caption); color: var(--zk-muted); }
.zk-co__variation p { margin: 0; }
.zk-co__item-price { font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-semibold); color: var(--zk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zk-co__totals { display: block; padding-block-start: var(--zk-space-4); border-block-start: 1px solid var(--zk-hairline); }
.zk-co__coupon-row { display: block; margin-block-end: var(--zk-space-4); }
.zk-co__coupon-row td { display: block; }
.zk-co__coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--zk-space-2); }
.zk-co__coupon-input { min-block-size: var(--zk-control-h); }
.zk-co__coupon-btn { background-color: var(--zk-ivory); border-color: var(--zk-hairline); color: var(--zk-ink); }
.zk-co__coupon-msg { margin: var(--zk-space-2) 0 0; font-size: var(--zk-fs-caption); line-height: 1.5; color: var(--zk-sale); }
.zk-co__coupon-msg[hidden] { display: none; }
.zk-co__coupon-btn:hover:not(:disabled) { background-color: var(--zk-surface-page); }
.zk-co__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--zk-space-4); }
.zk-co__line + .zk-co__line { margin-block-start: var(--zk-space-3); }
.zk-co__line th { font-size: var(--zk-fs-body-sm); color: var(--zk-muted); }
.zk-co__line td { font-size: var(--zk-fs-body-sm); color: var(--zk-ink); text-align: end; font-variant-numeric: tabular-nums; }
.zk-co__line--discount td { color: var(--zk-success); }
/* The total is the one number that must never be hunted for. */
.zk-co__total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--zk-space-4); align-items: baseline; margin-block-start: var(--zk-space-3); padding-block-start: var(--zk-space-3); border-block-start: 1px solid var(--zk-hairline); }
.zk-co__total th { font-family: var(--zk-font-display); font-size: 17px; font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }
.zk-co__total td { text-align: end; font-size: 22px; font-weight: var(--zk-fw-bold); color: var(--zk-cocoa); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.zk-co__cur { margin-inline-end: var(--zk-space-2); font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-medium); color: var(--zk-muted); letter-spacing: 0.04em; }
.zk-co__total .includes_tax { display: block; font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-regular); color: var(--zk-muted); }

/* ---------- place order ---------- */
.zk-co .place-order { margin-block-start: var(--zk-space-4); padding: 0; }
.zk-co #place_order { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--zk-control-h-lg); padding-inline: var(--zk-space-5); border: 1px solid transparent; border-radius: var(--zk-radius-md); background-color: var(--zk-cocoa-soft); color: var(--zk-ivory); font-family: var(--zk-font-ui); font-size: var(--zk-fs-button); font-weight: var(--zk-fw-semibold); cursor: pointer; transition: background-color var(--zk-dur-base) var(--zk-ease), transform var(--zk-dur-fast) var(--zk-ease); }
.zk-co #place_order:hover:not(:disabled) { background-color: var(--zk-cocoa-hover); }
.zk-co #place_order:active:not(:disabled) { transform: scale(0.99); }
.zk-co #place_order:focus-visible { outline: 2px solid var(--zk-cocoa); outline-offset: 2px; }
/* WooCommerce blocks the form while it posts; say so rather than looking dead. */
.zk-co.processing #place_order { opacity: 0.7; cursor: progress; }
.zk-co .woocommerce-terms-and-conditions-wrapper { margin-block-end: var(--zk-space-3); font-size: var(--zk-fs-caption); color: var(--zk-muted); }

/* ---------- notices ---------- */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info { margin: 0 0 var(--zk-space-5); padding: var(--zk-space-4) var(--zk-space-5); list-style: none; border: 1px solid var(--zk-hairline); border-inline-start-width: 3px; border-radius: var(--zk-radius-md); background-color: var(--zk-white); font-size: var(--zk-fs-body-sm); line-height: 1.6; color: var(--zk-ink); }
.woocommerce-checkout .woocommerce-error,
.woocommerce-cart .woocommerce-error { border-inline-start-color: var(--zk-sale); }
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-message { border-inline-start-color: var(--zk-success); }
.woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-info { border-inline-start-color: var(--zk-gold-deep); }
.woocommerce-checkout .woocommerce-error li + li { margin-block-start: var(--zk-space-2); }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .zk-co { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); column-gap: var(--zk-space-10); align-items: start; }
  /* Explicit placement, because the mobile `order` above must not decide the
     columns: form down the left, summary down the right. */
  /* The wrapper dissolves so the table and the payment box remain direct grid
     items and the two-column placement is unchanged. It is always open here. */
  .zk-co__sumwrap { display: contents; }
  .zk-co__sumbar { display: none; }
  .zk-co__sumwrap > .zk-co__h2--summary { display: block; }
  .zk-co__sumwrap .zk-co__items,
  .zk-co__sumwrap .zk-co__totals { padding-inline: 0; }
  .zk-co__sumwrap .zk-co__totals { padding-block-end: 0; }
  .zk-co__h2--summary { grid-column: 2; grid-row: 1; order: 0; }
  .zk-co__summary { grid-column: 2; grid-row: 2; order: 0; }
  .zk-co__main { grid-column: 1; grid-row: 1 / span 3; order: 0; }
  .zk-co__pay-h,
  #payment { grid-column: 1; order: 0; }
  .zk-co__pay-h { margin-block-start: var(--zk-space-6); }
  /* Delivery information is desktop-only: the reference phone checkout carries
     no such block, and on a phone it was pure vertical cost. Every fact in it
     is still on the product page and in the policies the footer links. */
  .zk-co__info { display: block; }
  .zk-cohead__inner { min-block-size: 76px; }
  .zk-cohead__logo img { block-size: 30px; }
  body.woocommerce-checkout .zk-section { padding-block-start: var(--zk-space-8); }
  /* The summary follows the form down a long address section. Capped so it can
     never be taller than the viewport, which is what turns sticky into a trap. */
  .zk-co__summary { position: sticky; inset-block-start: var(--zk-space-6); max-block-size: calc(100vh - var(--zk-space-10)); overflow-y: auto; }
}
  .zk-co__info-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .zk-co { column-gap: var(--zk-space-11); }
}
@media (prefers-reduced-motion: reduce) {
  .zk-co #place_order { transition: none; }
  .zk-co #place_order:active:not(:disabled) { transform: none; }
}


/* ============================================================================
   CART
   The default is a four-column table; on a 360px screen that wrapped a product
   name to one word per line under headings nobody can act on. Each line is a
   card here, in the same language as the drawer and the checkout summary.
   ========================================================================= */
.zk-cart { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--zk-space-6); align-items: start; }
body.woocommerce-cart .zk-shell { max-inline-size: 1100px; }
/* The doc head is centred with the gold rule beneath it; a left title under a
   centred rule is the worst of both, so the head moves as one. */
body.woocommerce-cart .zk-doc__head { padding-block: var(--zk-space-6) var(--zk-space-5); text-align: start; }
body.woocommerce-cart .zk-doc__rule { margin-inline: 0; }
.zk-doc__body .zk-cart__back { display: inline-flex; align-items: center; gap: var(--zk-space-2); margin-block-start: var(--zk-space-5); font-size: var(--zk-fs-body-sm); font-weight: var(--zk-fw-medium); color: var(--zk-muted); text-decoration: none; }
.zk-doc__body .zk-cart__back:hover { color: var(--zk-cocoa); }
.zk-cart__back svg { inline-size: 16px; block-size: 16px; }

.zk-cart__ship { margin-block-end: var(--zk-space-4); border-radius: var(--zk-radius-md); }
.zk-cart__list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--zk-hairline); }
.zk-cart__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) 32px; gap: var(--zk-space-4); align-items: start; padding-block: var(--zk-space-4); border-block-end: 1px solid var(--zk-hairline); }
.zk-cart__thumb { display: block; inline-size: 72px; }
.zk-cart__thumb img { inline-size: 100%; block-size: 72px; object-fit: contain; border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-md); background-color: var(--zk-ivory); }
/* Scoped past .zk-doc__body a, which underlines every link in a document. */
.zk-doc__body .zk-cart__name { display: block; font-size: var(--zk-fs-body); font-weight: var(--zk-fw-medium); line-height: 1.4; color: var(--zk-ink); text-decoration: none; }
.zk-doc__body .zk-cart__name:hover { color: var(--zk-cocoa); text-decoration: underline; text-underline-offset: 3px; }
.zk-cart__variation { display: block; margin-block-start: 2px; font-size: var(--zk-fs-caption); color: var(--zk-muted); }
.zk-cart__variation p { margin: 0; }
.zk-cart__row { display: flex; align-items: center; justify-content: space-between; gap: var(--zk-space-3); margin-block-start: var(--zk-space-3); }
/* A cart row is compact: the stepper is smaller here than on the PDP, where it
   sits beside a full-width Add to cart. */
.zk-cart__item .zk-qty { flex: 0 0 auto; }
.zk-cart__item .zk-qty__btn { inline-size: 34px; min-block-size: 34px; }
.zk-cart__item .zk-qty__input { inline-size: 40px; min-block-size: 34px; font-size: var(--zk-fs-body-sm); }
.zk-cart__item .zk-qty__btn svg { inline-size: 14px; block-size: 14px; }
/* .zk-doc__body sets overflow-wrap: anywhere on li, which broke "Rs. 180"
   across two lines. A price is one token. */
.zk-cart__price { font-size: var(--zk-fs-body); font-weight: var(--zk-fw-semibold); color: var(--zk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zk-doc__body .zk-cart__remove { inline-size: 32px; block-size: 32px; font-size: 22px; line-height: 1; color: var(--zk-muted); text-decoration: none; }
.zk-doc__body .zk-cart__remove:hover { color: var(--zk-sale); background-color: var(--zk-ivory); }

.zk-cart__actions { display: grid; gap: var(--zk-space-3); margin-block-start: var(--zk-space-5); }
.zk-cart__coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--zk-space-2); }
.zk-cart__apply,
.zk-cart__update { background-color: var(--zk-ivory); border-color: var(--zk-hairline); color: var(--zk-ink); }
.zk-cart__apply:hover,
.zk-cart__update:hover { background-color: var(--zk-surface-page); }
/* The stepper submits the form, so with scripts on this button is a dead grey
   slab across the page. It stays in the DOM - and visible - without them. */
.zk-cart__form.is-live .zk-cart__update { display: none; }
/* Free-delivery line: wc_price() returns its own element, which picked up the
   paragraph word-spacing and read as "Add  Rs. 1,325  more". */
.zk-cart__ship .zk-cartd__ship-msg .woocommerce-Price-amount { margin-inline: 2px; }

/* Money panel: the checkout summary's language, so the two pages read as one. */
.zk-cart__totals { padding: var(--zk-space-5); border: 1px solid var(--zk-hairline); border-radius: var(--zk-radius-lg); }
.zk-doc__body .zk-cart__h2 { margin: 0 0 var(--zk-space-4); font-family: var(--zk-font-display); font-size: 16px; font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }
.zk-cart__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--zk-space-4); font-size: var(--zk-fs-body-sm); color: var(--zk-muted); }
.zk-cart__line + .zk-cart__line { margin-block-start: var(--zk-space-3); }
.zk-cart__line span:last-child { color: var(--zk-ink); font-variant-numeric: tabular-nums; }
.zk-cart__line--total { margin-block-start: var(--zk-space-4); padding-block-start: var(--zk-space-4); border-block-start: 1px solid var(--zk-hairline); }
.zk-cart__line--total span:first-child { font-family: var(--zk-font-display); font-size: 16px; font-weight: var(--zk-fw-semibold); color: var(--zk-ink); }
.zk-cart__line--total span:last-child { font-size: 22px; font-weight: var(--zk-fw-bold); color: var(--zk-cocoa); letter-spacing: -0.01em; }
.zk-cart__cur { margin-inline-end: var(--zk-space-2); font-size: var(--zk-fs-caption); font-weight: var(--zk-fw-medium); color: var(--zk-muted); letter-spacing: 0.04em; }
.zk-cart__note { margin: var(--zk-space-3) 0 var(--zk-space-4); font-size: var(--zk-fs-caption); color: var(--zk-muted); }
/* WooCommerce prints Proceed to checkout as a plain link. */
.zk-cart__totals .checkout-button { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--zk-control-h-lg); padding-inline: var(--zk-space-5); border-radius: var(--zk-radius-md); background-color: var(--zk-cocoa-soft); color: var(--zk-ivory); font-family: var(--zk-font-ui); font-size: var(--zk-fs-button); font-weight: var(--zk-fw-semibold); text-decoration: none; transition: background-color var(--zk-dur-base) var(--zk-ease); }
.zk-cart__totals .checkout-button:hover { background-color: var(--zk-cocoa-hover); color: var(--zk-ivory); }
/* The cart page's own shipping block is a second address form one step before
   the real one; cart-totals.php does not print it. */
.zk-cart__totals .shipping-calculator-button,
.zk-cart__totals .woocommerce-shipping-destination { display: none; }
.woocommerce-cart .cart-empty { margin-block: var(--zk-space-8) var(--zk-space-4); font-size: var(--zk-fs-body); color: var(--zk-muted); }
.woocommerce-cart .return-to-shop { margin-block-end: var(--zk-space-9); }

@media (min-width: 900px) {
  .zk-cart { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--zk-space-9); }
  .zk-cart__form { grid-column: 1; }
  .zk-cart__collaterals { grid-column: 2; position: sticky; inset-block-start: var(--zk-space-6); }
  .zk-cart__item { grid-template-columns: 88px minmax(0, 1fr) 32px; }
  .zk-cart__thumb { inline-size: 88px; }
  .zk-cart__thumb img { block-size: 88px; }
  .zk-cart__actions { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .zk-cart__update { justify-self: end; }
}