/* ZERVO cart / checkout / account.
   Loaded AFTER WooCommerce's own stylesheet, so it only has to correct the parts
   that clash with the brand: the ground, the type and the buttons. Everything
   structural stays WooCommerce's, because that is what keeps the cart working. */

*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }
html { overflow-x: clip; }

body.zs {
  margin: 0;
  background: var(--z-ground);
  color: var(--z-ink);
  font-family: var(--z-font-text);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.zs-wrap {
  width: 100%;
  max-width: 1040px;
  padding-inline: var(--z-gap);
  margin-inline: auto;
}

.zs-main { padding: clamp(30px, 5vw, 56px) 0 clamp(50px, 8vw, 90px); min-height: 52vh; }

.zs-h1 {
  font-family: var(--z-font-display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 clamp(22px, 3vw, 34px);
}

/* ---- WooCommerce corrections ---- */
.zs-body h2, .zs-body h3 {
  font-family: var(--z-font-display);
  font-weight: 800;
  letter-spacing: -.01em;
}

.zs-body .button,
.zs-body button[type="submit"],
.zs-body .checkout-button,
.zs-body input[type="submit"] {
  background: var(--z-accent) !important;
  color: var(--z-accent-ink) !important;
  font-family: var(--z-font-display) !important;
  font-weight: 800 !important;
  border: 0 !important;
  border-radius: 3px !important;
  min-height: 50px;
  padding-inline: 22px !important;
  text-shadow: none !important;
}
.zs-body .button:hover,
.zs-body button[type="submit"]:hover,
.zs-body .checkout-button:hover { filter: brightness(1.06); }

.zs-body table.shop_table,
.zs-body .cart-collaterals .cart_totals,
.zs-body .woocommerce-checkout-review-order,
.zs-body form.checkout_coupon,
.zs-body .woocommerce-form-login {
  background: var(--z-surface);
  border: 1px solid var(--z-line);
  border-radius: 4px;
}
.zs-body table.shop_table th,
.zs-body table.shop_table td { border-color: var(--z-line) !important; }
.zs-body table.shop_table th { font-family: var(--z-font-display); font-weight: 700; }

.zs-body input[type="text"],
.zs-body input[type="email"],
.zs-body input[type="tel"],
.zs-body input[type="password"],
.zs-body input[type="number"],
.zs-body textarea,
.zs-body select {
  background: var(--z-surface);
  border: 1px solid var(--z-line-firm);
  border-radius: 3px;
  padding: 11px 12px;
  font-family: var(--z-font-text);
  font-size: 16px; /* anything smaller makes iOS zoom the page on focus */
  color: var(--z-ink);
}
.zs-body input:focus, .zs-body textarea:focus, .zs-body select:focus {
  outline: 2px solid var(--z-accent);
  outline-offset: 1px;
}

.zs-body .woocommerce-message,
.zs-body .woocommerce-info,
.zs-body .woocommerce-error {
  background: var(--z-surface);
  border-top: 3px solid var(--z-accent);
  border-radius: 4px;
  color: var(--z-ink);
}
.zs-body .woocommerce-error { border-top-color: #C8503C; }

.zs-body a { color: var(--z-ink); }
.zs-body .woocommerce-Price-amount { font-family: var(--z-font-display); font-weight: 700; }

/* The empty state ships as a large sad glyph. A sentence and a way back is enough. */
.zs-body .wc-empty-cart-message,
.zs-body .cart-empty { font-size: 18px; color: var(--z-ink-soft); }
.zs-body .cart-empty::before,
.zs-body .woocommerce-info::before,
.zs-body .woocommerce-message::before { display: none !important; }
.zs-body .return-to-shop { margin-top: 18px; }

@media (max-width: 600px) {
  .zs-body table.shop_table { display: block; overflow-x: auto; }
}

/* ---------------- checkout ----------------
   Two columns on desktop, form first, the order summary pinned beside it so the
   total and the button are never off screen. RTL puts column 1 on the right,
   which is where a Hebrew reader starts. */
@media (min-width: 901px) {
  .zs-body form.checkout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 44px;
    align-items: start;
  }
  .zs-body #customer_details    { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .zs-body #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .zs-body #order_review         { grid-column: 2; grid-row: 2; position: sticky; top: 84px; min-width: 0; }
}

/* One address, one column. The two-column billing grid squeezes Hebrew labels. */
.zs-body .col2-set .col-1,
.zs-body .col2-set .col-2 { width: 100%; float: none; }
.zs-body .form-row { width: 100% !important; float: none !important; padding: 0 0 16px; }
.zs-body .form-row label { display: block; margin-bottom: 6px; font-weight: 600; }
/* No asterisk either. With the optional marker gone too, the form carries no
   symbols at all - validation still enforces what is required, it just does not
   decorate the labels to say so. */
.zs-body .required,
.zs-body abbr.required { display: none !important; }
.zs-body input.input-text, .zs-body .select2-container { width: 100%; }

/* A hint under the field answers "why do you need this" before it is asked. */
.zs-body .form-row .description {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--z-ink-faint);
}

/* Shipping to another address is a decision, and a decision is a pause. */
.zs-body #ship-to-different-address { display: none; }

.zs-body #order_review { padding: 20px; }
.zs-body #order_review table.shop_table { border: 0; margin: 0; }
.zs-body #order_review .order-total .woocommerce-Price-amount { font-size: 22px; }

/* Consent, unticked, in plain words. */
.zs-body .zervo-optin {
  margin: 18px 0 0;
  padding: 14px;
  background: var(--z-ground);
  border: 1px solid var(--z-line);
  border-radius: 4px;
}
.zs-body .zervo-optin label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; color: var(--z-ink-soft); }
.zs-body .zervo-optin input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--z-accent); flex: 0 0 auto; }

/* Reassurance sits against the button, where the hesitation is. */
.zs-body .zervo-assure {
  list-style: none;
  margin: 16px 0 14px;
  padding: 0;
  font-size: 13.5px;
  color: var(--z-ink-soft);
}
.zs-body .zervo-assure li { padding: 7px 0; border-top: 1px solid var(--z-line); }
.zs-body .zervo-assure li:first-child { border-top: 0; }
.zs-body .zervo-assure li::before { content: "·"; margin-inline-end: 8px; color: var(--z-ink-faint); }

.zs-body #place_order { width: 100%; font-size: 18px; min-height: 56px; }
.zs-body .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--z-ink-faint); margin-top: 12px; }
.zs-body .woocommerce-privacy-policy-text p { margin: 0; }

/* WooCommerce hard-codes the brackets around the word in PHP, so a gettext filter
   would leave an empty "()" behind. Hiding the span is the clean removal.
   Required fields still carry their asterisk, so the distinction survives. */
.zs-body .optional { display: none !important; }