/* ═══════════════════════════════════════════════════════════════════════════
 * WF · the checkout frame, for the builder-free checkout
 *
 * The page around the checkout: the header bar, the two columns, and the order
 * summary in the left one. All of it measured off the Elementor checkout at
 * 1440 so the result is the same page —
 *
 *   header  full-bleed #AB92BF, 116px, inner 1100 centred
 *   row     1000 centred · cart 400 left · form 600 right
 *   cart    #fafafa
 *
 * The summary itself is FunnelKit's native component. Its structure is not
 * touched here; only its skin, and only in the checkout's own language: 18/600
 * #333 titles, #e1e1e1 rules, #ab92bf accents, 9-10px radii, #f3f0ff for a
 * chosen state. Those are read from wf-checkout-ui.css, which is what the eight
 * sections beside it are drawn with.
 *
 * Loaded only where the checkout document uses the embed design.
 * ═══════════════════════════════════════════════════════════════════════════ */

.wfacp-embed-frame {
  --wf-co-band: 1000px;      /* the two-column row  */
  --wf-co-head-band: 1100px; /* the header is wider than the row, as it was */
  --wf-co-cart: 400px;
  --wf-co-form: 600px;
  --wf-co-purple: #ab92bf;
  --wf-co-ink: #333;
  --wf-co-muted: #707070;
  --wf-co-rule: #e1e1e1;
  --wf-co-line: #d9d9d9;
  /* white, not #fafafa — prod's page background (#f9f9f9) swallowed the card */
  --wf-co-cart-bg: #fff;
}

/* Astra prints its own page padding around a checkout it does not own. */
.wfacp-embed-frame .site-content,
.wfacp-embed-frame .ast-container { padding: 0 !important; max-width: none !important; }


/* FunnelKit's page wrapper holds nothing visible on this page: the form inside
   it is fixed at left:-9999px and out of flow, and the summary has been moved
   into our shell. What it did contribute was 200px of empty space between the
   header and the columns — 60px of its own margin and 70px of padding above and
   below the primary. Collapsed outright rather than unpicked property by
   property; a fixed child is unaffected by its parent's height. */
/* Both classes and the body, because the 60px top margin is set at a weight a
   single class does not beat. */
body.wfacp-embed-frame .wfacp-template-wrap.wfacp-template-container,
body.wfacp-embed-frame .wfacp-template-wrap,
body.wfacp-embed-frame .wfacp-template-container {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ───────────────────────────────────────────────────────────── header ── */

.wf-co-head {
  background: var(--wf-co-purple);
}

.wf-co-head__in {
  box-sizing: border-box;
  display: flex;
  /* The page is RTL, so `space-between` alone puts the first child on the
     right. The Elementor header had the logo on the LEFT and the link on the
     right, and row-reverse is what reproduces that without turning the row LTR
     and dragging the Hebrew label with it. */
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 116px;
  max-width: var(--wf-co-head-band);
  margin-inline: auto;
  padding-inline: 24px;
}

.wf-co-head__logo img,
.wf-co-head__logo .custom-logo {
  display: block;
  width: auto;
  max-width: 240px;
  max-height: 96px;
}

.wf-co-head__wordmark {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.wf-co-head__help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.wf-co-head__help:hover,
.wf-co-head__help:focus-visible { color: #fff; opacity: .85; }
.wf-co-head__help svg { flex: none; }

/* ────────────────────────────────────────────────────────── the shell ── */

.wf-co-shell {
  box-sizing: border-box;
  max-width: var(--wf-co-band);
  margin-inline: auto;
  padding-inline: 16px;
}

/* One column on a phone, and the summary first — the order the old page used,
   because what a customer wants confirmed before filling anything in is what
   they are buying. */
.wf-co-shell__cart { order: 1; }
.wf-co-shell__form { order: 2; }

@media (min-width: 1024px) {
  .wf-co-shell {
    display: grid;
    /* RTL: the FIRST track is the visual right. The form is on the right and
       the cart on the left, so the wide track is declared first. Declaring the
       cart first put the 400 on the right and handed the form 580. */
    grid-template-columns: minmax(0, var(--wf-co-form)) var(--wf-co-cart);
    /* No gap: the Elementor row had none. Each column carries its own 10px of
       padding, which is where the air between them came from. */
    gap: 0;
    align-items: start;
    padding-inline: 0;
  }
  /* The row is stated as well as the column. `order` is still set for the
     phone layout, and with order in play the auto-placement cursor had already
     passed column 1 by the time the form asked for it — so the form landed in
     row 2, 570px below the cart it was supposed to sit beside. */
  .wf-co-shell__form { grid-column: 1; grid-row: 1; order: 0; }
  /* top clears the sticky purple header (116px) — with top:20px the card
     slid underneath it while scrolling. */
  .wf-co-shell__cart { grid-column: 2; grid-row: 1; order: 0; position: sticky; top: 136px; }
}

.wf-co-shell__form { min-width: 0; padding: 24px 10px; }
.wf-co-shell__cart-pad { padding-inline: 10px; }

/* The overlay is our own checkout UI, moved in here by the shell. It sized
   itself against the page before; inside a column it fills the column. */
.wf-co-shell__form #wf-checkout-overlay {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────── cart ── */

.wf-co-cart {
  box-sizing: border-box;
  background: var(--wf-co-cart-bg);
  border: 1px solid var(--wf-co-rule);
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .wf-co-cart { margin-block: 24px; }
}

/* The collapsed bar. A phone thing: on the desktop the panel is simply open and
   the bar is not drawn at all. */
.wf-co-cart__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--wf-co-ink);
  text-align: start;
  cursor: pointer;
}
.wf-co-cart__toggle-t   { flex: 1 1 auto; }
.wf-co-cart__toggle-sum { font-weight: 700; }
.wf-co-cart__chev {
  flex: none;
  color: var(--wf-co-purple);
  transition: transform .18s ease;
}
.is-cart-open .wf-co-cart__chev { transform: rotate(180deg); }

.wf-co-cart__body { padding: 0 18px 18px; }

@media (max-width: 1023px) {
  .wf-co-cart { margin-block: 16px 0; }
  .wf-co-cart__body { display: none; }
  .is-cart-open .wf-co-cart__body { display: block; }
}

@media (min-width: 1024px) {
  .wf-co-cart__toggle { display: none; }
  .wf-co-cart__body   { display: block; padding: 18px; }
}

/* ───────────────────────────────── the summary, in the page's own language ── */

/* FunnelKit's markup, skinned. Nothing here changes what it prints — the
   quantity stepper, the remove control, the coupon form and every total are its
   own, and so is the arithmetic behind them. */

.wf-co-cart .wfacp_mb_mini_cart_wrap,
.wf-co-cart .wfacp_collapsible_order_summary_wrap { background: none; border: 0; padding: 0; }

.wf-co-cart table { width: 100%; border-collapse: collapse; }

.wf-co-cart th,
.wf-co-cart td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--wf-co-rule);
  font-size: 14px;
  color: var(--wf-co-ink);
  vertical-align: middle;
  background: none;
}

.wf-co-cart tr:last-child th,
.wf-co-cart tr:last-child td { border-bottom: 0; }

/* Product line */
.wf-co-cart .wfacp-qty-ball { position: relative; }
.wf-co-cart .wfacp-qty-ball img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--wf-co-line);
}
.wf-co-cart .wfacp-qty-count {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: -6px;
  inset-inline-end: auto;      /* one inset only — the opposite must not be set */
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background: var(--wf-co-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.wf-co-cart .product-name,
.wf-co-cart .wfacp_mini_cart_item_title { font-size: 14px; font-weight: 600; line-height: 1.4; }

.wf-co-cart del      { color: var(--wf-co-muted); font-weight: 400; margin-inline-end: 6px; }
.wf-co-cart ins      { text-decoration: none; font-weight: 700; }
.wf-co-cart .amount  { white-space: nowrap; }

/* The stepper and the remove control — FunnelKit's, wearing the checkout's
   controls: the same 1px #d9d9d9 and 9px radius as the radio cards beside it. */
.wf-co-cart .wfacp_quantity_selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wf-co-line);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}
.wf-co-cart .wfacp_quantity_selector input {
  box-sizing: border-box;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--wf-co-ink);
  -moz-appearance: textfield;
}
.wf-co-cart .wfacp_quantity_selector input::-webkit-outer-spin-button,
.wf-co-cart .wfacp_quantity_selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wf-co-cart .wfacp_quantity_selector a,
.wf-co-cart .wfacp_quantity_selector span,
.wf-co-cart .wfacp_quantity_selector button {
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  color: var(--wf-co-ink);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.wf-co-cart .wfacp_quantity_selector a:hover,
.wf-co-cart .wfacp_quantity_selector button:hover { background: #f3f0ff; }

.wf-co-cart .wfacp_mini_cart_remove_item_from_cart,
.wf-co-cart a.remove {
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  color: var(--wf-co-muted);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
.wf-co-cart .wfacp_mini_cart_remove_item_from_cart:hover,
.wf-co-cart a.remove:hover { background: #f1e9f5; color: #8a5fac; }

/* Coupon */
.wf-co-cart .wfacp_coupon_field,
.wf-co-cart input[name*="coupon"] {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--wf-co-line);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
}
.wf-co-cart input[name*="coupon"]:focus {
  border-color: var(--wf-co-purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(171, 146, 191, .25);
}
.wf-co-cart button[name*="coupon"],
.wf-co-cart .wfacp_apply_coupon {
  box-sizing: border-box;
  height: 42px;
  padding-inline: 18px;
  border: 0;
  border-radius: 9px;
  background: #303030;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.wf-co-cart button[name*="coupon"]:hover { background: #1e1e1e; }

/* Totals */
.wf-co-cart .cart-subtotal td,
.wf-co-cart .cart-subtotal th,
.wf-co-cart .woocommerce-shipping-totals td,
.wf-co-cart .woocommerce-shipping-totals th { color: var(--wf-co-muted); }

.wf-co-cart .order-total th,
.wf-co-cart .order-total td {
  padding-top: 14px;
  border-top: 1px solid var(--wf-co-rule);
  border-bottom: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--wf-co-ink);
}
.wf-co-cart .order-total small,
.wf-co-cart .includes_tax { font-size: 12px; font-weight: 400; color: var(--wf-co-muted); }

.wf-co-cart .cart-discount td,
.wf-co-cart .cart-discount th { color: #1a8a4a; }

@media (prefers-reduced-motion: reduce) {
  .wf-co-cart__chev { transition: none; }
}

/* The coupon prompt arrives as a .woocommerce-info — WooCommerce's blue notice,
   #f6f9fb behind #057daf text under a 3px blue rule. Correct for an error on a
   shop page, wrong for "have a coupon?" inside a summary panel. */
.wf-co-cart .woocommerce-info,
.wf-co-cart .wfacp-coupon-page .woocommerce-info {
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--wf-co-rule);
  background: none;
  color: var(--wf-co-muted);
  font-size: 13px;
  line-height: 1.5;
}
.wf-co-cart .woocommerce-info::before { display: none; }
.wf-co-cart .woocommerce-info a {
  color: var(--wf-co-purple);
  font-weight: 600;
  text-decoration: none;
}
.wf-co-cart .woocommerce-info a:hover { text-decoration: underline; }

/* The stepper reads better with its own divider than with three bordered
   boxes — one control, not three. */
.wf-co-cart .wfacp_quantity_selector > * + * { border-inline-start: 1px solid var(--wf-co-line); }

/* FunnelKit sets the blue at `.wfacp_mini_cart_start_h .wfacp-coupon-page
   .woocommerce-info a` — also (0,3,1), and its stylesheet loads after ours, so
   an equal-weight rule loses on source order. The element's own class takes
   this to (0,4,1) and settles it without !important. */
body.wfacp-embed-frame .wf-co-cart .woocommerce-info a.showcoupon,
body.wfacp-embed-frame .wf-co-cart .wfacp-coupon-page a.showcoupon,
body.wfacp-embed-frame .wf-co-cart a.wfacp_showcoupon {
  color: var(--wf-co-purple);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.wfacp-embed-frame .wf-co-cart .woocommerce-info a.showcoupon:hover { color: #8a5fac; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Round two, to Aviram's notes.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · The header stays put while the page scrolls. Sticky rather than fixed:
   fixed takes the bar out of flow and the columns would start underneath it,
   which then needs a padding equal to a height stated in two places. */
.wf-co-head {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* 2 · Air between the columns. The Elementor row had none and leaned on 10px of
   column padding; at 400 + 600 there is room for a real gutter. */
@media (min-width: 1024px) {
  .wf-co-shell { gap: 40px; }
  .wf-co-shell__form { padding: 24px 0; }
}

/* 3 · The quantity control, in the product page's clothes: 1px #d9d9d9, a 10px
   radius, white, and 38px square buttons that tint on hover. Same recipe as
   .wf-pdp__qty, at the height a cart row wants rather than the 52px a buy row
   does. */
.wf-co-cart .wfacp_quantity_selector {
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
}
.wf-co-cart .wfacp_quantity_selector > * + * { border-inline-start: 0; }
.wf-co-cart .wfacp_quantity_selector a,
.wf-co-cart .wfacp_quantity_selector span,
.wf-co-cart .wfacp_quantity_selector button {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 100%;
  min-height: 0;
  color: #303030;
  font-size: 18px;
  font-weight: 400;
}
.wf-co-cart .wfacp_quantity_selector a:hover,
.wf-co-cart .wfacp_quantity_selector button:hover { background: #faf8fc; }
.wf-co-cart .wfacp_quantity_selector input {
  width: 40px;
  height: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #303030;
}

/* 4 · The count sits on the top-right corner of the thumbnail. Physical `right`
   rather than the logical inset: the badge is inside markup that does not
   inherit the page's direction, and the logical property put it on the left.
   One inset only, the opposite forced to auto — 3rd-party CSS sets both and a
   circle with left+right+width:auto stretches. */
.wf-co-cart .wfacp-qty-ball { position: relative; display: inline-block; }
.wf-co-cart .wfacp-qty-count {
  inset-block-start: -7px;
  inset-inline-start: auto;
  inset-inline-end: auto;
  right: -7px;
  left: auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}

/* 5 · The price sits at the top of its row rather than centred against a 56px
   thumbnail. */
.wf-co-cart .wfacp_order_summary_container td,
.wf-co-cart .wfacp_order_summary_container th { vertical-align: top; }
.wf-co-cart .product-total,
.wf-co-cart td.product-total { padding-top: 12px; }

/* 6 · Every row reads edge to edge: the label against one side, the figure
   against the other, nothing floating in the middle of a 400px panel. */
.wf-co-cart table { width: 100%; table-layout: auto; }
.wf-co-cart tr > th:first-child,
.wf-co-cart tr > td:first-child { text-align: start; }
.wf-co-cart tr > th:last-child,
.wf-co-cart tr > td:last-child   { text-align: end; }
.wf-co-cart tr > th:only-child,
.wf-co-cart tr > td:only-child   { text-align: start; }

/* The coupon takes the full width too — a field and a button on one line, the
   field taking whatever the button leaves. */
.wf-co-cart .wfacp-coupon-section,
.wf-co-cart .wfacp-coupon-page,
.wf-co-cart .wfacp_coupon_form,
.wf-co-cart form.checkout_coupon { width: 100%; }
.wf-co-cart .wfacp_coupon_form,
.wf-co-cart form.checkout_coupon {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wf-co-cart .wfacp_coupon_form p,
.wf-co-cart form.checkout_coupon p { margin: 0; flex: 1 1 auto; min-width: 0; }
.wf-co-cart .wfacp_coupon_form p:last-child,
.wf-co-cart form.checkout_coupon p:last-child { flex: none; }

/* 7 · The grand total's figure goes to the left, and what is in brackets under
   it rather than beside it — "(כולל ₪53 מע\"מ)" is a footnote to the number,
   not a second column. */
.wf-co-cart .order-total th { text-align: start; }
.wf-co-cart .order-total td { text-align: end; }
.wf-co-cart .order-total .amount { display: block; }
.wf-co-cart .order-total small,
.wf-co-cart .order-total .includes_tax,
.wf-co-cart .includes_tax {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--wf-co-muted);
}

/* ── the two that needed the real markup, not a guess at it ─────────────── */

/* The stepper's height is set by FunnelKit at `.wfacp_mini_cart_start_h
   .wfacp_quantity_selector` — (0,2,0), the same weight as ours, from a
   stylesheet that loads later. The body class settles it. Its buttons are
   `.value-button` divs, not links or buttons, which is why the 38px never
   reached them. */
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector {
  height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector .value-button {
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #303030;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector .value-button:hover { background: #faf8fc; }
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input {
  box-sizing: border-box;
  width: 40px;
  height: 100%;
  border: 0;
  background: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #303030;
}

/* The count is a sibling of the image inside .wfacp-pro-thumb, not a wrapper
   around it — which is why making the ball relative moved nothing. The thumb
   becomes the positioning context and the ball is pinned to its top-right. */
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb {
  position: relative;
  display: inline-block;
  line-height: 0;
}
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-ball {
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -7px;
  left: auto;          /* one inset only */
  bottom: auto;
  display: block;
  width: auto;
  height: auto;
}
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-count {
  position: static;
  box-sizing: border-box;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  background: var(--wf-co-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb img {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #d9d9d9;
}

/* ── smaller, and the price at the top ──────────────────────────────────── */

/* The stepper, minimal: no frame, no box around the number, just − 1 + at a
   size that belongs in a 400px panel rather than on a product page. */
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector {
  height: auto;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector .value-button {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 6px;
  color: #707070;
  font-size: 15px;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector .value-button:hover {
  background: #f3f0ff;
  color: #303030;
}

/* The number is text between two buttons, not a field in a box. The theme
   styles every input[type=number] with a border, a background and a shadow at
   a weight this loses to on its own — the one place in this file where
   !important is the honest tool rather than a longer selector. */
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input {
  width: 30px;
  min-width: 30px;
  height: 24px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  color: #303030;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input:focus {
  outline: none;
  box-shadow: none !important;
}

/* The price sits at the top of the row. This table is .wfacp_mini_cart_items
   inside .wfacp_template_9_cart_item_details — the earlier rule named the
   order-summary container, which is a different table. */
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_items td,
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_items th,
body.wfacp-embed-frame .wf-co-cart td.product-total,
body.wfacp-embed-frame .wf-co-cart td.product-name-area {
  vertical-align: top;
}
body.wfacp-embed-frame .wf-co-cart td.product-total {
  padding-top: 0;
  text-align: end;
}
/* The remove control shares the price cell; it drops under the figure rather
   than pushing it off its line. */
body.wfacp-embed-frame .wf-co-cart .wfacp_cart_product_name_h { display: block; margin-top: 6px; }
body.wfacp-embed-frame .wf-co-cart .wfacp_delete_item_wrap { display: flex; justify-content: flex-end; }
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_remove_item_from_cart svg { width: 18px; height: 18px; }

/* The total row: the label level with the figure, and the bracket on one line
   pushed to the same edge as the price. It was wrapping into three lines
   because the cell is narrow and nothing said otherwise. */
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_reviews tfoot .order-total th,
body.wfacp-embed-frame .wf-co-cart .order-total th { vertical-align: top; padding-top: 14px; }
body.wfacp-embed-frame .wf-co-cart .order-total td { vertical-align: top; }
body.wfacp-embed-frame .wf-co-cart .includes_tax {
  display: block;
  margin-top: 4px;
  text-align: end;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  color: var(--wf-co-muted);
}
body.wfacp-embed-frame .wf-co-cart .includes_tax .amount { white-space: nowrap; }

/* Every row in the totals table reads the same way: the label at the top of
   its row against the right edge, the figure at the top against the left. It
   was centring each label against a value that can run to three lines —
   "יש להזין את הכתובת כדי להציג את אפשרויות המשלוח" is one of them. */
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_reviews tr > *:first-child,
body.wfacp-embed-frame .wf-co-cart .wfacp_order_summary_container tr > *:first-child {
  vertical-align: top;
  text-align: start;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_reviews tr > *:last-child,
body.wfacp-embed-frame .wf-co-cart .wfacp_order_summary_container tr > *:last-child {
  vertical-align: top;
  text-align: end;
}

/* A label takes the width its words need and no less — "סכום ביניים" was
   breaking across two lines against a column sized for the longest VALUE in
   the table, which is a sentence about shipping. The label column shrinks to
   its content; the value column keeps the rest and is free to wrap. */
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_reviews tr > *:first-child,
body.wfacp-embed-frame .wf-co-cart .wfacp_order_summary_container tr > *:first-child {
  width: 1%;
  white-space: nowrap;
  padding-inline-end: 12px;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_reviews tr > *:last-child,
body.wfacp-embed-frame .wf-co-cart .wfacp_order_summary_container tr > *:last-child {
  width: auto;
}
/* The one exception: the shipping row's message is prose and must wrap. */
body.wfacp-embed-frame .wf-co-cart .shipping_total_fee td:last-child,
body.wfacp-embed-frame .wf-co-cart .woocommerce-shipping-totals td { white-space: normal; }

/* The coupon line reads from the right, like everything else in the panel. */
body.wfacp-embed-frame .wf-co-cart .woocommerce-info,
body.wfacp-embed-frame .wf-co-cart .wfacp-coupon-page,
body.wfacp-embed-frame .wf-co-cart .wfacp-coupon-section { text-align: start; }

/* The badge rides higher and further out on the corner, and the number sits in
   the middle of the circle — the span inside carried the text's own line-height
   and pushed the digit off centre. */
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-ball { top: -10px; right: -10px; }
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-count {
  display: block;
  line-height: 1;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-count {
  padding: 0;
  line-height: 1;
}

/* An earlier rule here made every .amount in the total row a block so the
   bracket would drop below the figure. It also caught the ₪53 INSIDE the
   bracket, which is what broke "(כולל ₪53 מע"מ)" across three lines. The
   block belongs to the total's own figure and to nothing nested in the note. */
body.wfacp-embed-frame .wf-co-cart .order-total .includes_tax .amount {
  display: inline;
  width: auto;
}
body.wfacp-embed-frame .wf-co-cart .order-total > td > .amount,
body.wfacp-embed-frame .wf-co-cart .order-total > td > strong > .amount { display: block; }

/* The price cell lines up with the one beside it. An earlier rule here zeroed
   its padding-top while the name cell keeps FunnelKit's 14px, so the figure sat
   exactly 14px above the product it belongs to. Measured, not guessed. */
body.wfacp-embed-frame .wf-co-cart td.product-total { padding-top: 14px; }

/* Further onto the corner, and the digit optically centred.
   It measured dead centre already — 0px off on both axes — so the tilt was the
   glyph sitting high inside a 12px line box on an 11px font. The box now
   matches the circle and the digit rides its centre. */
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-ball { top: -13px; right: -13px; }
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-count {
  line-height: 22px;
  font-size: 12px;
  text-align: center;
}
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-count {
  display: inline-block;
  line-height: 22px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* One frame around the whole control, and a narrower number between the
   buttons. The frame belongs to the stepper, not to the field inside it —
   the field keeps no border of its own. */
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector {
  display: inline-flex;
  align-items: center;
  height: 28px;
  gap: 0;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector .value-button {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  font-size: 14px;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input {
  width: 24px;
  min-width: 24px;
  height: 100%;
  font-size: 13px;
}

/* FunnelKit puts 25px of margin either side of the number, which is what made
   a 26+25+26 control measure 129px inside its new frame. */
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input { margin: 0; }

/* FunnelKit sets that margin at `body .cart_item .product-quantity
   .wfacp_quantity_selector input[type=...]` — (0,4,2), one class above the rule
   above. Matching its chain takes this to (0,5,2). */
body.wfacp-embed-frame .wf-co-cart .cart_item .product-quantity .wfacp_quantity_selector input {
  margin: 0;
  width: 24px;
  min-width: 24px;
}

/* ── the subscription's details ─────────────────────────────────────────────
 *
 * A rotating plan lists its track — eight bouquets, each "name | size" — and
 * WooCommerce renders that as a <dl> of label/value pairs. Left as it comes it
 * is a centred wall of text inside a 400px panel.
 *
 * Given its own block: right-aligned like everything else, the labels quiet and
 * small, the values readable, and the whole thing set off from the product line
 * above it so it reads as detail rather than as more of the name.
 * ------------------------------------------------------------------------- */
body.wfacp-embed-frame .wf-co-cart dl.variation {
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid #ece7f2;
  border-radius: 8px;
  background: #fff;
  text-align: start;
  font-size: 11.5px;
  line-height: 1.55;
  overflow: hidden;
}

body.wfacp-embed-frame .wf-co-cart dl.variation dt {
  clear: both;
  float: none;
  width: auto;
  margin: 8px 0 2px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--wf-co-muted);
  text-align: start;
}
body.wfacp-embed-frame .wf-co-cart dl.variation dt:first-child { margin-top: 0; }

body.wfacp-embed-frame .wf-co-cart dl.variation dd {
  clear: both;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: #545454;
  text-align: start;
}
body.wfacp-embed-frame .wf-co-cart dl.variation dd p { margin: 0; }

/* The subscription's own summary line — "6 משלוחים · פעם בשבועיים" — reads as
   a caption under the name rather than as part of it. */
body.wfacp-embed-frame .wf-co-cart .wf-cart-sub-info {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--wf-co-muted);
  text-align: start;
}

/* The product name block keeps everything reading from the right. */
body.wfacp-embed-frame .wf-co-cart .wfacp_order_summary_item_name,
body.wfacp-embed-frame .wf-co-cart .wfacp_cart_title_sec,
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_item_title { text-align: start; }

/* The digit is white on every badge. The colour was set on the circle, but the
   span inside carries its own from the cart's text colour. */
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-count,
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-count span,
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-count { color: #fff; }

/* The quantity is already on the badge and in the stepper. A third copy in the
   product's description is noise. */
body.wfacp-embed-frame .wf-co-cart .wfacp_cart_title_sec strong.product-quantity,
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_item_title > strong.product-quantity { display: none; }

/* ── two rules that needed the other side's weight ──────────────────────── */

/* The grey came from `.wfacp_form_cart table.shop_table tr:not(:last-child) td
   span`, which paints every span in every cell and so caught the digit too.
   Matching that depth settles it. */
body.wfacp-embed-frame .wf-co-cart table.shop_table tr td .wfacp-qty-count,
body.wfacp-embed-frame .wf-co-cart table.shop_table tr td .wfacp-qty-count span,
body.wfacp-embed-frame .wf-co-cart table.shop_table tr td span.wfacp-pro-count { color: #fff; }

/* The <dl> floats its terms from `body #wfacp-sec-wrapper table.shop_table
   dl.variation:not(...) dt` — an ID, which no number of classes outranks. The
   same ID is used here rather than reaching for !important, and the id-less
   selector is kept alongside it for the states where the panel sits outside
   that wrapper. */
body #wfacp-sec-wrapper .wf-co-cart dl.variation dt,
body #wfacp-sec-wrapper .wf-co-cart dl.variation dd,
body.wfacp-embed-frame .wf-co-cart dl.variation dt,
body.wfacp-embed-frame .wf-co-cart dl.variation dd {
  float: none;
  clear: both;
  width: auto;
  max-width: none;
  padding: 0;
  text-align: start;
}
body #wfacp-sec-wrapper .wf-co-cart dl.variation dt,
body.wfacp-embed-frame .wf-co-cart dl.variation dt {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--wf-co-muted);
}
body #wfacp-sec-wrapper .wf-co-cart dl.variation dt:first-child,
body.wfacp-embed-frame .wf-co-cart dl.variation dt:first-child { margin-top: 0; }
body #wfacp-sec-wrapper .wf-co-cart dl.variation dd,
body.wfacp-embed-frame .wf-co-cart dl.variation dd { margin: 0; color: #545454; }

/* Still floating: theirs is (1,3,4) — an id, .shop_table, .variation, a :not()
   and four elements — and the last attempt here was (1,2,3). This adds the
   table and the title wrapper to reach (1,4,4). */
body #wfacp-sec-wrapper .wf-co-cart table.shop_table .wfacp_mini_cart_item_title dl.variation dt,
body #wfacp-sec-wrapper .wf-co-cart table.shop_table .wfacp_mini_cart_item_title dl.variation dd,
body #wfacp-sec-wrapper .wf-co-cart table.shop_table dl.variation dt,
body #wfacp-sec-wrapper .wf-co-cart table.shop_table dl.variation dd {
  float: none;
  clear: both;
  width: auto;
  max-width: none;
  text-align: start;
}

/* The winning rule was never the id one — the panel sits outside
   #wfacp-sec-wrapper, so what matched was the second half of FunnelKit's
   grouped selector, `body table.shop_table dl.variation:not(...) dt` at
   (0,3,4). This file kept offering (0,3,3): the same classes, one element
   short. Naming the table makes it (0,4,4). */
body.wfacp-embed-frame .wf-co-cart table.shop_table dl.variation dt,
body.wfacp-embed-frame .wf-co-cart table.shop_table dl.variation dd {
  float: none;
  clear: both;
  width: auto;
  max-width: none;
  padding: 0;
  text-align: start;
}
body.wfacp-embed-frame .wf-co-cart table.shop_table dl.variation dt {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--wf-co-muted);
}
body.wfacp-embed-frame .wf-co-cart table.shop_table dl.variation dt:first-child { margin-top: 0; }
body.wfacp-embed-frame .wf-co-cart table.shop_table dl.variation dd { margin: 0; color: #545454; }

/* Air under the details block, so the plan's track and the stepper below it are
   not touching. */
body.wfacp-embed-frame .wf-co-cart dl.variation,
body.wfacp-embed-frame .wf-co-cart table.shop_table dl.variation { margin-bottom: 12px; }

/* ─────────────────────────── cart items — same look as the site drawer ── */
/* Aviram 2026-08-09: one design for the same cart everywhere. Small rounded
   image with the remove-x on its corner (the JS moves the link into the
   thumb), compact stepper, savings line under a struck price. */
body.wfacp-embed-frame .wf-co-cart .wfacp_product_row td { vertical-align: top; }
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb { position: relative; width: 64px; }
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb img {
  width: 64px; height: 64px; border-radius: 8px; object-fit: cover; display: block;
}
/* quantity lives in the stepper — the ball and the "× n" duplicate it */
body.wfacp-embed-frame .wf-co-cart .wfacp-qty-ball { display: none; }
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_item_title strong.product-quantity { display: none; }
body.wfacp-embed-frame .wf-co-cart .wfacp_mini_cart_item_title { font-size: 14px; font-weight: 600; color: #303030; }
body.wfacp-embed-frame .wf-co-cart .wfacp_product_row dl.variation,
body.wfacp-embed-frame .wf-co-cart .wfacp_product_row .wc-item-meta { font-size: 12px; color: #777; }
/* compact stepper, drawer-sized */
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid #e1e1e1; border-radius: 6px; background: #fff;
  height: 28px; margin-top: 8px; overflow: hidden;
}
/* ROUND-CONTROL GUARD: fixed square, flex none, border-box */
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector .value-button {
  flex: none; box-sizing: border-box;
  width: 26px; height: 26px; min-width: 26px; max-width: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; color: #545454; cursor: pointer; user-select: none;
  background: transparent; border: 0;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector .value-button:hover { background: #f5f5f5; }
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input.wfacp_mini_cart_update_qty {
  width: 30px; height: 26px; border: 0; padding: 0; text-align: center;
  font-size: 13px; font-weight: 600; color: #303030; background: transparent;
  -moz-appearance: textfield; appearance: textfield;
}
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input::-webkit-outer-spin-button,
body.wfacp-embed-frame .wf-co-cart .wfacp_quantity_selector input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* the remove-x, relocated onto the image corner — small round white badge.
   ROUND-CONTROL GUARD: one horizontal inset only, opposite stays auto. */
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb .wfacp_delete_item_wrap {
  position: absolute; top: -7px; left: -7px; right: auto; margin: 0;
}
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb .wfacp_mini_cart_remove_item_from_cart {
  flex: none; box-sizing: border-box;
  width: 22px; height: 22px; min-width: 22px; max-width: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e1e1e1; border-radius: 50%;
  color: #777; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb .wfacp_mini_cart_remove_item_from_cart:hover { color: #c0392b; }
body.wfacp-embed-frame .wf-co-cart .wfacp-pro-thumb .wfacp_mini_cart_remove_item_from_cart svg { width: 14px; height: 14px; }
/* price block: struck original small, current bold, savings in brand purple */
body.wfacp-embed-frame .wf-co-cart td.product-total { font-weight: 700; color: #303030; }
body.wfacp-embed-frame .wf-co-cart td.product-total del { font-weight: 400; font-size: 12px; color: #999; }
body.wfacp-embed-frame .wf-co-cart .wf-mc-save { font-size: 12px; font-weight: 600; color: #8d6cab; margin-top: 2px; }