/* ==========================================================================
   iMagnet - brand styling for the live WooCommerce parts (single product,
   shop archive, cart, checkout). Our global CSS styles OUR classes; these
   rules reach WooCommerce's own default classes so the functional widgets
   match the brand. APPEND this to the end of the global block in
   Site Settings > Custom CSS (below everything else).
   ========================================================================== */

/* --- CRITICAL FIX: the .product class collision --------------------------
   WooCommerce wraps every product in <div class="product type-product ...">.
   Our generic  .product { display:grid; 1fr 1fr }  rule was landing on THAT
   wrapper too, dropping the whole page into one right-hand column with an empty
   left half. Reset the WooCommerce wrapper only - it always also carries
   .type-product, which our own inner .product grid never does, so the design's
   two-column product layout is untouched. */
.product.type-product,
.single-product .product.type-product {
  display: block !important;
  grid-template-columns: none !important;
}

/* --- CRITICAL FIX: the .cart class collision --------------------------------
   Our add-to-cart form carries WooCommerce's conventional `cart` class
   (<form class="product__buy cart">). But the design also has a `.cart` rule for
   the CART PAGE — a two-column grid with a ~64px gap — and being later in the
   stylesheet it was overriding `.product__buy { display:flex }`, so the quantity
   stepper and the gold button split onto separate rows with a big gap. Reassert
   the buy row as a flex row for the form specifically (`.product__buy.cart`,
   which our cart-page container never is). Measured: the two controls returned
   to one row. */
.product__buy.cart {
  display: flex;
  grid-template-columns: none;
  gap: var(--s-3);
  padding-block: 0;
  align-items: stretch;
}
/* THE THIRD INSTANCE OF THE SAME COLLISION, and the one that reached the live
   store. WooCommerce's real cart table is
     <table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents">
   so it carries `cart` as well, and site.css's `.cart { display:grid;
   grid-template-columns:1.5fr 0.7fr }` (the static mockup's PAGE layout) landed
   on the TABLE. thead became the first grid column and tbody the second, so the
   header sat beside the rows instead of above them, the 84px bottle plate
   collapsed to 32px, and the columns stopped aligning. The block cart hid this:
   it renders no <table> at all, so the bug only surfaced once the page was moved
   to [woocommerce_cart].

   The rule below at line ~291 sets border/size/margin on this table but never
   `display`, which is why nothing already opposed the grid.

   Measured in scripts/harness/cartcss.html against the live sheets:
   before `display:grid`, thumbnail 32px; after `display:table`, thumbnail 84px. */
.woocommerce-cart table.shop_table.cart {
  display: table !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding-block: 0 !important;
  align-items: initial !important;
}
/* The mobile card layout below (max-width:720px) turns each ROW into a grid on
   purpose. Keep that working: only the TABLE is forced back to a table here. */

/* The sticky buy bar's form is the SAME collision: it is a second real
   add-to-cart form, so it carries `cart` too. site.css already wins this by
   scoping its rule to .buybar, and this is the belt to that pair of braces —
   the cart-page grid must never reach either add-to-cart form. */
.buybar__form.cart {
  display: flex;
  grid-template-columns: none;
  gap: var(--s-3);
  padding-block: 0;
  align-items: center;
}

/* THE FOURTH INSTANCE OF THE SAME COLLISION, and the second one to reach the
   live store. WooCommerce's checkout form is
     <form name="checkout" class="checkout woocommerce-checkout">
   so it carries `checkout`, and site.css's `.checkout { display:grid; ... }` —
   the static mockup's PAGE layout — lands on the FORM. On desktop that is
   harmless, because the two-column rule further down this file is scoped to
   `.woocommerce-checkout form.checkout` and outweighs it. On a phone it was not:
   the mockup's own mobile rule collapses the page to `1fr`, whose implicit
   minimum is `auto`, so the single column could not shrink below the billing
   block's 368px minimum and the checkout scrolled sideways on every phone.
   Measured live at 390px: document 398px against a 375px viewport, 48 elements
   out of bounds, .col2-set starting at x=-23. At 360px, 85 elements.
   site.css now says minmax(0, 1fr) at source, which fixes the mockup and the
   store together. This is the belt to that pair of braces: whatever the page
   class does next, WooCommerce's own form keeps a track that can shrink.
   Deliberately NOT display:block — the mobile stack still wants the mockup's
   gap between the details and the summary, and taking the grid away would
   collapse the two sections onto each other. */
.woocommerce-checkout form.checkout {
  grid-template-columns: minmax(0, 1fr);
}

/* Force the product title to the brand serif, in case a theme/WooCommerce rule
   outweighs our .latin class on the single-product h1. */
.single-product .product__name-latin { font-family: var(--f-la) !important; }

/* --- Single product: title, price, gallery ------------------------------- */
.single-product .product_title,
.single-product .product-title {
  font-family: var(--f-la);
  font-weight: var(--fw-light);
  color: var(--c-primary);
  letter-spacing: 0.01em;
}
.single-product .price,
.single-product .price .woocommerce-Price-amount,
.single-product .woocommerce-Price-amount {
  color: var(--c-primary);
  font-weight: var(--fw-book);
}
.woocommerce-product-gallery {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(var(--rgb-primary), 0.03);
}

/* --- Add to cart button -> gold pill -------------------------------------- */
.woocommerce button.button.alt,
.single-product button.single_add_to_cart_button,
.single-product .single_add_to_cart_button.button {
  background: var(--c-accent) !important;
  color: var(--c-primary) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--f-he) !important;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0.04em;
  padding: 0.95rem 2.1rem !important;
  transition: background-color 0.3s var(--ease);
}
.woocommerce button.button.alt:hover,
.single-product button.single_add_to_cart_button:hover {
  background: var(--c-accent-soft) !important;
}

/* --- Quantity stepper ----------------------------------------------------- */
.single-product .quantity input.qty {
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  min-block-size: 3rem;
}

/* --- Shop archive: product grid cards ------------------------------------- */
.woocommerce ul.products li.product .price {
  color: var(--c-primary);
  font-weight: var(--fw-book);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-la);
  color: var(--c-primary);
  letter-spacing: var(--tr-latin);
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
  background: var(--c-primary) !important;
  color: var(--c-on-dark) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--fw-medium) !important;
}
.woocommerce ul.products li.product a.button:hover {
  background: var(--c-primary-soft) !important;
}

/* --- Cart + checkout buttons --------------------------------------------- */
.woocommerce a.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
  background: var(--c-accent) !important;
  color: var(--c-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--fw-medium) !important;
}

/* The cart's two <button> submits. `a.button` above never reached them — they
   are buttons, not links — so they shipped in Woo's default lavender-grey,
   measured rgb(233,230,237) on the live page. They are also not both the same
   weight of action: applying a coupon is a real step (green fill, `.btn--ink`),
   updating quantities is a fallback for a reader who did not press Enter
   (green outline, `.btn--outline`). Gold stays reserved for the one CTA that
   moves the order forward, which on this page is "מעבר לתשלום". */
.woocommerce-cart td.actions button.button[name="apply_coupon"],
.woocommerce-cart td.actions button.button[name="update_cart"] {
  min-block-size: 3rem;
  padding: 0.75rem 1.6rem;
  font-family: var(--f-he);
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.woocommerce-cart td.actions button.button[name="apply_coupon"] {
  background: var(--c-primary);
  color: var(--c-on-dark);
}
.woocommerce-cart td.actions button.button[name="apply_coupon"]:hover {
  background: var(--c-primary-soft);
}
.woocommerce-cart td.actions button.button[name="update_cart"] {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.woocommerce-cart td.actions button.button[name="update_cart"]:hover {
  background: var(--c-primary);
  color: var(--c-on-dark);
}
/* Woo disables update-cart until something changes. Say so rather than showing
   a live-looking control that does nothing. */
.woocommerce-cart td.actions button.button[name="update_cart"][disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Breadcrumb ----------------------------------------------------------- */
.single-product .woocommerce-breadcrumb {
  font-size: var(--t-meta);
  color: var(--c-muted-text);
}
.single-product .woocommerce-breadcrumb a { color: var(--c-muted-text); }
.single-product .woocommerce-breadcrumb a:hover { color: var(--c-primary); }

/* ==========================================================================
   Hello Elementor / WordPress overrides. This sheet loads LAST, so it is where
   we defeat theme/plugin defaults that outweigh our design. Each rule below was
   confirmed against the live site (measured before/after) rather than guessed.
   ========================================================================== */

/* The footer "webside" wordmark. A global img rule (Elementor/lazy-load) forces
   its height to auto, so it rendered ~300px tall (natural size). Pin it back to
   the design's 15px. Measured: 300px -> 15px. */
.site-footer .site-footer__webside {
  block-size: 15px !important;
  inline-size: auto !important;
  height: 15px !important;
  width: auto !important;
}

/* The footer must be full-bleed. Elementor's content-width (1140px) was landing
   on our body-level footer and centring it. Release the cap. Measured: the
   footer went from 1140px centred to the full viewport width. */
.site-footer.band-dark {
  max-inline-size: none !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Same Elementor 1140px cap was landing on the fixed header, so it rendered
   centred at 1140px instead of full-width. That shrank the inner container to
   its content (~916px) and pulled the language/cart pills inward instead of
   flush to the edge. Release the cap AND let the inner container fill to its own
   1240px max. Measured at 1440px: the language/cart group moved from 318px to
   156px from the left, the logo out to the right edge, nav re-centred. */
.site-header {
  max-inline-size: none !important;
  max-width: none !important;
}
.site-header .site-header__inner {
  inline-size: 100% !important;
}

/* Focus outline. Something in the stack (Hello/Elementor) paints the default
   focus ring magenta (rgb(204,51,102)) — it flashed pink when a gallery
   thumbnail or arrow was clicked. Give our own interactive controls a brand
   ring on keyboard focus and no ring on mouse click. */
.product__thumb:focus:not(:focus-visible),
.gallery__arrow:focus:not(:focus-visible),
.qty__btn:focus:not(:focus-visible),
.product__buy .btn:focus:not(:focus-visible) { outline: none; }
.product__thumb:focus-visible,
.gallery__arrow:focus-visible,
.qty__btn:focus-visible,
.product__buy .btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.product__thumb,
.gallery__arrow,
.qty__btn { -webkit-tap-highlight-color: transparent; }

/* Font safety net. When the product renders through an Elementor Single Product
   template, the Elementor widget wrapping our content forces "IBM Plex Sans"
   (no Hebrew glyphs) onto it, so Hebrew falls back to a system font. Setting our
   Hebrew stack directly on .product wins for the element and everything it
   contains (Latin names keep their own .latin/.brand rule). The real fix is to
   delete that Elementor template so our clean theme template renders — this just
   keeps the type correct either way. */
.product { font-family: var(--f-he); }

/* ==========================================================================
   CART, CHECKOUT, ORDER RECEIVED, AND WOOCOMMERCE'S NOTICES
   Added in P5a, 2026-07-28, after the owner saw the stock screens live.

   WHY THIS IS CSS AND NOT A SET OF TEMPLATE OVERRIDES.
   The cart page could be rewritten as a template and it would read better. The
   checkout could not, and the checkout is the one that decides. Checkout is
   where the payment gateway plugs in: the gateway prints itself into #payment,
   into the review table and into the fields around them, and it does that
   against WooCommerce's own template structure. Tranzila arrives on Sunday. A
   checkout template rewritten four days before a gateway lands on it is the
   likeliest single cause of a broken first order, and it would break in the one
   place where failure costs money rather than looks. So the STRUCTURE stays
   WooCommerce's and the SURFACE becomes ours.

   The design vocabulary is not invented here. Every surface, radius, rule and
   type size is the one the approved cart.html and checkout.html previews use:
   the order box is .summary, a form row is .field, a line is .cart-line. A
   value in this section that does not exist in site.css is a mistake.
   ========================================================================== */

/* --- The page shell ------------------------------------------------------- */
/* Woo's shortcode output lands in the page content with no head of its own.
   Give the cart and checkout the page rhythm every other page here has, so they
   stop reading as a different website.

   `.page-content` AND `.entry-content`, because Hello Elementor's page.php wraps
   the content in `.page-content` and only a block theme emits `.entry-content`.
   This shipped with the block-theme name alone, so the rule matched nothing on
   the live cart: the container cap, the gutter and the whole vertical rhythm
   below were inert, and the page took Elementor's 1140px content width instead.
   Measured on the live markup 2026-07-30:
     main.site-main > .page-content > .woocommerce > {notices, form, collaterals}
   Both names are listed rather than one swapped in, so the rule survives the
   day this becomes a block theme. */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content,
.woocommerce-order-received .page-content,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-order-received .entry-content {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-5) var(--s-7);
}
/* AND THE ANCESTOR HAS TO BE FREED, OR THE RULE ABOVE IS DECORATION.
   Corrected 2026-08-19.

   The rule above was measured as applying — `max-inline-size` computed to the
   full 1240px — and the box was still 600px wide on a 768 tablet. Both were
   true at once, because the cap is not on this box at all. Hello Elementor's
   theme.css caps the PARENT:

     body:not([class*="elementor-page-"]) .site-main {
       max-width: 500px / 600px / 800px / 1140px   (576 / 768 / 992 / 1200)
       padding-inline: 10px                        (max-width 575)
     }

   That is a blog-post reading measure, and its `:not()` excludes Elementor
   pages. The cart and the checkout are plain WordPress pages, so it does NOT
   exclude them, and they are the only two pages on this store that WooCommerce
   renders through Hello Elementor's page wrapper. A child's max-width can never
   widen it past a capped parent, so the container above did nothing but add a
   SECOND gutter inside the parent's own padding.

   Measured live before this, against the same viewport's `.container` on the
   shop page: 768 → 523px against 691px, a quarter of the page's width gone;
   1024 → 698 against 922; 1440 → 1012 against 1112; 390 → 330 against 350.

   Why every geometry check passed anyway, and this is the lesson worth keeping:
   the checks read the PROPERTY and the property was correct. Nothing asked the
   box how wide it actually was, or asked whether the answer matched the six
   pages that were already right.

   SPECIFICITY IS LOAD BEARING HERE. theme.css's selector is 0-2-1 (`body`,
   `:not([attr])`, `.site-main`). A plain `.woocommerce-cart .site-main` is
   0-2-0 and would silently lose, which is the same failure one level up. `body`
   plus `main` takes this to 0-2-2 and the child theme also loads later. */
body.woocommerce-cart main.site-main,
body.woocommerce-checkout main.site-main,
body.woocommerce-order-received main.site-main {
  max-inline-size: none;
  padding-inline: 0;
}
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-order-received .entry-title {
  font-family: var(--f-he);
  font-size: var(--t-title);
  font-weight: var(--fw-light);
  margin-block-end: var(--s-5);
}
/* On the cart AND the checkout, Hello Elementor's `.page-header` is replaced
   rather than styled: it prints the WordPress page's own title, which gave the
   cart a bare "עגלה" where the approved design has the eyebrow "העגלה" over the
   display title "העגלה שלך". imagnet_cart_page_head() and, since 2026-08-19,
   imagnet_checkout_page_head() print that pair inside the WooCommerce output
   where it can use the design's own `.page-head`, so the two must not both show.

   THE CHECKOUT WAS ADDED 2026-08-19. Until then this was cart-only and the
   checkout took its heading from WordPress, which meant the two adjacent steps
   of one purchase wore two different heading treatments. Measured live at 1440:
   the cart's head 207px with its eyebrow, the checkout's 54px without one, on
   the screen that takes the money.

   THE THANK-YOU PAGE IS EXCLUDED, AND THAT EXCLUSION IS NOT COSMETIC. In
   WooCommerce the order-received screen is an ENDPOINT OF THE CHECKOUT PAGE, so
   its body carries `woocommerce-checkout` as well as `woocommerce-order-received`.
   A bare `.woocommerce-checkout .page-header { display:none }` therefore also
   hides the heading on the thank-you page, where nothing replaces it:
   imagnet_checkout_page_head() hangs off `woocommerce_before_checkout_form`,
   which does not fire there. The result would be a confirmation screen with no
   heading at all, on the one page a buyer reaches after paying. */
.woocommerce-cart .page-header,
.woocommerce-checkout:not(.woocommerce-order-received) .page-header { display: none; }
/* `order: -1` because the notices wrapper is printed BEFORE the cart shortcode's
   output and is a sibling in the same grid, so without it the page's heading
   would sit under the "added to cart" message. */
.woocommerce-cart .page-content > .woocommerce > .page-head,
.woocommerce-cart .entry-content > .woocommerce > .page-head {
  grid-column: 1 / -1;
  order: -1;
  margin-block-end: var(--s-4);
}

/* --- Notices -------------------------------------------------------------- */
/* These stay even though the mini cart usually answers first: they are the
   no-JS path, and they are how checkout reports a refused card or a missing
   field. A blue-grey WordPress box at the top of a premium store reads as an
   error even when the message is good news.

   The accent sits on the inline START, so in RTL it is on the right, where the
   line begins. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-inline-start: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  /* Meta, not body, and tight padding. On the cart this box says "X was added",
     which the mini cart drawer has already said; it stays because it is the
     no-JS path and because it is how a refused card is reported, but at full
     body size with roomy padding it was the loudest thing on a page whose job is
     to show an order. Quiet, one line, out of the way. */
  font-size: var(--t-meta);
  line-height: 1.6;
  padding: var(--s-2) var(--s-3);
  margin-block-end: var(--s-4);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
/* Woo puts a "view cart" button in the added-to-cart notice. On the cart page
   that is a link to the page you are already on. */
.woocommerce-cart .woocommerce-message .button.wc-forward { display: none; }
.woocommerce-error { border-inline-start-color: var(--c-danger); }
/* Woo ships ::before glyphs on these. Different icon language, and they collide
   with the flex layout above. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-message .button,
.woocommerce-info .button { margin-inline-start: auto; }

/* --- Cart: the page is two columns --------------------------------------- */
/* The approved cart.html is `.cart`: a 1.5fr / 0.7fr grid, the lines on the
   inline start and a sticky summary card beside them. Woo's shortcode emits
   three siblings inside one `.woocommerce` wrapper (notices, the form, the
   collaterals) and then FLOATS the totals to 48% of the row BELOW the form.
   Live at 1440px that is a full-width table with an empty half page beside it
   and the summary stranded underneath at half width, which is most of what the
   owner was reacting to on 2026-07-30. Grid the wrapper and release the float. */
.woocommerce-cart .page-content > .woocommerce,
.woocommerce-cart .entry-content > .woocommerce {
  display: grid;
  gap: var(--s-5) clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* Woo's own float + 48% width, from woocommerce-layout.css. Both have to go or
   the grid item is half a grid item. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  inline-size: 100%;
  width: 100%;
  margin: 0;
}
@media (min-width: 900px) {
  .woocommerce-cart .page-content > .woocommerce,
  .woocommerce-cart .entry-content > .woocommerce {
    grid-template-columns: 1.5fr 0.7fr;
  }
  /* The notices belong to the page, not to a column. */
  .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .cart-collaterals {
    grid-column: 2;
    position: sticky;
    /* Clear the fixed header + announcement strip, measured into --chrome-h. */
    inset-block-start: calc(var(--chrome-h, 5rem) + var(--s-4));
  }
}

/* --- Cart: the lines are cards, not a table ------------------------------- */
/* This is the answer to "there is an unclear table frame and it is almost
   unreadable" (owner, 2026-07-30). It was not a border to tune: the approved
   cart.html has NO table on it. It has `.cart-line` — an 84px bottle plate, the
   name, the stepper, the price, and a rule underneath. So the fix is to render
   Woo's rows as that card, which is exactly what the phone layout at the bottom
   of this file was already doing; the card is simply no longer conditional on
   the viewport, and it gains a desktop column for the money.

   MARKUP IS UNTOUCHED ON PURPOSE. The cart is the money path: every name, nonce
   and hook in that form is WooCommerce's, and quantity/remove/coupon all post
   through it. A template override would read better in source and would put the
   one page that has to keep working at risk four days from the first live order.
   The table stays a table (see the display:table fix at the top of this file);
   only the ROWS become grids, which is a thing table layout permits and which
   the phone rules have shipped since P5a.

   The measured defect this replaces: `th` was given a bottom border but its
   other three sides were never zeroed the way `td`'s were, so every header cell
   kept a 1px box from the stack (measured live: th border-inline 1px/1px,
   border-block-start 1px, while td measured 0). That is the grey grid in the
   owner's screenshot. Nothing here relies on winning that fight: the header row
   is not painted at all. */
.woocommerce-cart table.shop_table {
  border: 0;
  border-collapse: collapse;
  inline-size: 100%;
  margin: 0;
}
/* The column labels live on each cell as data-title and are printed per card
   below, so the header row has nothing left to say. */
.woocommerce-cart table.shop_table.cart thead { display: none; }
.woocommerce-cart table.shop_table.cart tbody { display: block; }
/* `:not(.cart_item)` and not a bare `tr`: the bare version is three classes and
   three types, which out-specifies the `.woocommerce-cart tr.cart_item` card
   rule below AND the phone override at the foot of this file, so the card
   measured display:block instead of grid. Excluding the item rows here keeps
   both of those rules at one specificity and lets source order decide between
   them, which is what the phone override needs. The row this DOES still catch
   is the actions row holding the coupon. */
.woocommerce-cart table.shop_table.cart tbody > tr:not(.cart_item) { display: block; }
.woocommerce-cart table.shop_table.cart td {
  /* All four sides, not just the one we want to keep. */
  border: 0;
  padding: 0;
  background: none;
  vertical-align: middle;
}

/* The card, matched to the approved `.cart-line`: plate, then the name with its
   meta line and the stepper under it, then the money and the remove link stacked
   at the row's far end. Three columns, not four — the unit-price cell is hidden
   below, because the approved line shows ONE figure per line and Woo's unit price
   and line subtotal are the same number until the quantity changes. */
.woocommerce-cart tr.cart_item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  grid-template-areas:
    "media name  sub"
    "media qty   remove";
  column-gap: var(--s-4);
  row-gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--c-hairline);
}
/* `display:none`, so it is gone for everyone including a screen reader. That is
   a deliberate call and not an oversight: the quantity and the line total are
   both still on the card, so the unit price is the one figure a reader can
   recover from the other two, and it is on the product page either way. */
.woocommerce-cart tr.cart_item td.product-price { display: none; }
/* The first card carries the top rule, so the list reads as the approved
   `.cart__lines` block rather than as rows that start in mid air. */
.woocommerce-cart table.shop_table.cart tbody > tr.cart_item:first-child {
  border-block-start: 1px solid var(--c-hairline);
}
.woocommerce-cart tr.cart_item td.product-thumbnail { grid-area: media; }
.woocommerce-cart tr.cart_item td.product-name     { grid-area: name; }
.woocommerce-cart tr.cart_item td.product-quantity { grid-area: qty; }
.woocommerce-cart tr.cart_item td.product-price    { grid-area: price; }
.woocommerce-cart tr.cart_item td.product-subtotal { grid-area: sub; }
.woocommerce-cart tr.cart_item td.product-remove   { grid-area: remove; }

/* The bottle plate from the approved preview: a tinted, hairlined square the
   packshot sits inside, not a bare cropped photo. */
.woocommerce-cart td.product-thumbnail a,
.woocommerce-cart td.product-thumbnail img { display: block; }
.woocommerce-cart td.product-thumbnail img {
  inline-size: 84px;
  block-size: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: rgba(var(--rgb-primary), 0.035);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
}
/* The name block. `woocommerce_cart_item_name` now returns the approved two
   lines — the scent's Latin name in the store's tracked cut, over the meta line
   — so this styles them rather than styling Woo's raw product title. Green
   because the owner asked where the brand went on this page, and because the
   name is the one thing on the card that IS the product: 14.1:1 on ivory. */
.woocommerce-cart td.product-name { line-height: 1.4; }
.woocommerce-cart td.product-name .cart-line__title { margin: 0; }
.woocommerce-cart td.product-name .cart-line__title a,
.woocommerce-cart td.product-name .latin {
  font-family: var(--f-la);
  font-size: var(--t-subtitle);
  font-weight: var(--fw-book);
  letter-spacing: var(--tr-latin);
  text-transform: uppercase;
  color: var(--c-primary);
  text-decoration: none;
}
.woocommerce-cart td.product-name .cart-line__title a:hover .latin { color: var(--c-primary-soft); }
.woocommerce-cart td.product-name .cart-line__meta {
  margin: var(--s-1) 0 0;
  font-size: var(--t-meta);
  color: var(--c-muted-text);
}

/* The one figure per line: the line total, at the row's far end, no label. The
   approved card shows a single price and the header row that named it is gone,
   so a "סכום ביניים" caption beside it would be labelling the obvious. */
.woocommerce-cart tr.cart_item td.product-subtotal {
  justify-self: end;
  align-self: end;
  white-space: nowrap;
  text-align: end;
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.woocommerce-cart tr.cart_item td.product-subtotal::before { content: none; }

/* "הסרה", under the price, as a quiet underlined text link — `.cart-line__remove`
   in the approved design. The `×` and its red are both WooCommerce's. */
.woocommerce-cart td.product-remove {
  justify-self: end;
  align-self: start;
}
.woocommerce-cart td.product-remove a.remove {
  display: inline-block;
  inline-size: auto;
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--c-muted-text) !important;   /* Woo paints this red at high specificity */
  background: none !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-cart td.product-remove a.remove:hover { color: var(--c-primary) !important; }
/* Woo's own quantity box. The theme's `.qty` stepper is NOT rendered on this
   page (the form is Woo's), so this is the control the reader actually uses and
   it has to read as ours — including the green border `.qty` carries, which is
   also the 3:1 boundary 1.4.11 asks of a control. */
/* The stepper. `.qty` and `.qty__btn` come from site.css — the SAME control the
   product page uses — so only the seam onto WooCommerce's wrapper lives here:
   `.quantity` has to stop being a block that pushes the shell onto its own line,
   and Woo's own `input.qty` has to take `.qty__input`'s geometry. The label Woo
   prints is `.screen-reader-text`, so it is already out of the layout. */
/* AND THE STEPPER HAS TO BE ALLOWED ITS OWN WIDTH. Corrected 2026-08-19.
   Every declaration below was landing — the buttons computed `inline-size:
   2.5rem` — and they rendered ELEVEN PIXELS WIDE on the live cart, at 390, 768
   and 1440 alike, while the identical class on the product page was 43px.

   The squeeze comes from WooCommerce's own woocommerce-rtl.css:

     .woocommerce td.product-quantity { min-width: 80px }

   80px is a floor that was written for Woo's bare number box and is narrower
   than this three-part stepper, which wants 40 + 48 + 40. The cell is a grid
   item with `justify-self: start`, so it is sized shrink-to-fit; Woo's floor
   pins that at 80px, and the parts then give way inside it. `min-width` is the
   one property a wider `inline-size` on the CHILDREN can never win against,
   which is why every rule here looked correct and the control was still
   unusable with a thumb.

   So the floor is answered with a floor, in the same property, at a higher
   specificity: `min-inline-size: max-content` says the box may never be
   narrower than what is inside it, whatever that grows to. `flex: none` then
   stops the three parts absorbing a shortfall that can no longer happen.
   Measured live with this applied: 11x40 became 40x40 at all seven widths. */
.woocommerce-cart tr.cart_item td.product-quantity {
  justify-self: start;
  min-inline-size: max-content;
}
.woocommerce-cart tr.cart_item td.product-quantity::before { content: none; }
.woocommerce-cart td.product-quantity .quantity {
  display: inline-flex;
  margin: 0;
  min-inline-size: max-content;
}
.woocommerce-cart td.product-quantity .qty {
  display: inline-flex;
  align-items: stretch;
  min-inline-size: max-content;
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
}
.woocommerce-cart td.product-quantity .qty__btn,
.woocommerce-cart .quantity input.qty { flex: none; }
.woocommerce-cart td.product-quantity .qty__btn {
  inline-size: 2.5rem;
  min-block-size: 2.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-primary);
  font-size: 1.15rem;
  line-height: 1;
  transition: background-color 0.25s var(--ease);
}
.woocommerce-cart td.product-quantity .qty__btn:hover { background: rgba(var(--rgb-primary), 0.07); }
/* Woo's input, wearing `.qty__input`'s shape. The border sides are the internal
   dividers of the shell, so the outer border above is the only visible frame. */
.woocommerce-cart .quantity input.qty {
  inline-size: 3rem;
  min-inline-size: 0;
  min-block-size: 2.5rem;
  padding: 0;
  text-align: center;
  font: inherit;
  font-size: var(--t-small);
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-inline: 1px solid var(--c-hairline);
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Cart: the coupon block ---------------------------------------------- */
/* "The coupon code needs to stand out more" (owner, 2026-07-30). It could not
   have stood out less: Woo pins that input to `width:80px` at a specificity our
   12rem never reached, and paints its border #cfc8d8 from
   `.woocommerce-cart table.cart td.actions .coupon .input-text` — five classes
   and two types, against our four and one. Both were measured on the live page
   (border rgb(207,200,216), and the two buttons rgb(233,230,237), Woo's default
   lavender-grey). So this block is scoped to match or beat Woo's own selector
   rather than hoping to sit later in the file.

   Shape-wise it stops being a stray field at the foot of a table and becomes a
   panel: the same surface, hairline and radius as `.summary`, with its heading
   printed by imagnet_cart_coupon_heading() and pulled to the front with `order`.
   Copy lives in PHP next to the mini cart's strings, not in a CSS `content`. */
.woocommerce-cart td.actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: end;
  justify-content: space-between;
  padding-block: var(--s-5) 0 !important;
  text-align: start !important;
}
.woocommerce-cart td.actions .coupon {
  float: none !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  flex: 1 1 22rem;
  max-inline-size: 34rem;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-inline-start: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding: var(--s-4);
}
.woocommerce-cart td.actions .coupon .coupon__title {
  grid-column: 1 / -1;
  order: -1;
  margin: 0;
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
}
.woocommerce-cart td.actions .coupon .coupon__hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-meta);
  color: var(--c-muted-text);
}
/* The width and the border are both Woo's, and beating them needs an ID.
   ------------------------------------------------------------------------
   WooCommerce ships most of its cart rules TWICE: once as
   `.woocommerce table.cart td.actions .input-text` and once as
   `.woocommerce #content table.cart td.actions .input-text`. Hello Elementor
   renders `<main id="content">`, so the second one matches on this site and no
   number of classes can outweigh it.

   `:is(#content, .page-content)` is how one selector answers both: `:is()` takes
   the HIGHEST specificity of its arguments, so this compound counts as an ID
   whether the page turns out to have `#content` or not, and it keeps matching if
   a future theme drops that id. Anywhere below where a rule of ours has to beat
   one of Woo's, this is the shape to use.

   Measured: without it the coupon field rendered at Woo's 80px on the live page
   while our own border colour from the SAME declaration block applied, which is
   what a specificity loss on one property looks like. */
.woocommerce-cart :is(#content, .page-content) table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-cart td.actions .coupon input.input-text {
  float: none;
  margin: 0;
  inline-size: 100%;
  width: 100%;
  min-block-size: 3rem;
  padding: 0.75rem var(--s-3);
  font: inherit;
  font-size: var(--t-body);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-muted);
  border-radius: var(--radius-sm);
}
.woocommerce-cart :is(#content, .page-content) table.cart td.actions .coupon .input-text:focus,
.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.woocommerce-cart td.actions .coupon input.input-text:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(var(--rgb-primary), 0.12);
}
.woocommerce-cart td.actions .coupon input.input-text::placeholder {
  color: var(--c-muted-text);
  opacity: 1;
}

/* --- Cart + checkout: the order summary ---------------------------------- */
/* .summary from the approved preview, applied to Woo's totals markup. Same
   surface, same hairline, same gold rule above the total. */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  padding: var(--s-5);
}
/* The summary card's own padding is 2.5rem, which is right on a wide screen and
   expensive on a narrow one: on a 360px phone it takes 80 of the 285px the card
   has, leaving 203px for the payment area and a 143px card-number field. This is
   the screen that takes the money, so the padding gives way first. Measured at
   360px: payment area 203px to 235px, card number 143px to 175px, with the page
   still not scrolling sideways. Held to 560px and below, so the approved desktop
   and tablet card is untouched. */
@media (max-width: 560px) {
  .woocommerce-cart .cart-collaterals .cart_totals,
  .woocommerce-checkout #order_review {
    padding: var(--s-4);
  }
}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-family: var(--f-he);
  font-size: var(--t-subtitle);
  font-weight: var(--fw-light);
  color: var(--c-primary);
  margin-block: 0 var(--s-4);
}
.woocommerce-cart .cart_totals table,
.woocommerce-checkout #order_review table.shop_table {
  border: 0;
  inline-size: 100%;
  margin: 0;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-checkout #order_review table th,
.woocommerce-checkout #order_review table td {
  border: 0;
  border-block-end: 1px solid var(--c-hairline);
  padding: var(--s-3) 0;
  font-size: var(--t-small);
  font-weight: var(--fw-book);
  text-align: start;
  background: none;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-checkout #order_review table th {
  color: var(--c-muted-text);
  /* The summary column is 0.7fr of the page, and auto table layout was handing
     most of that to the figure and breaking "סכום ביניים" across two lines. The
     label is two words; it gets to stay on one. */
  white-space: nowrap;
}
.woocommerce-cart .cart_totals table td,
.woocommerce-checkout #order_review table td { text-align: end; }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td,
.woocommerce-checkout #order_review tr.order-total th,
.woocommerce-checkout #order_review tr.order-total td {
  border-block-end: 0;
  border-block-start: 1px solid var(--c-accent);
  padding-block-start: var(--s-3);
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
}

/* --- Checkout: two columns ----------------------------------------------- */
/* THE PAYMENT FORM BELONGS IN THE WIDE COLUMN. Corrected 2026-08-19.
   The approved preview (site-preview/checkout.html) puts the card fields in the
   LEFT column at full width, 655px measured, and keeps only the totals card on
   the right. WooCommerce does not: it renders #payment INSIDE #order_review, so
   the card form inherited the narrow summary column. Measured live before this
   fix, at a 1440 viewport: the payment box was 187px and the card-number field
   160px, with every label wrapping to two lines and "MM/YY" clipped to "MM" on
   the screen that takes the money.

   THE NODES ARE NOT MOVED, AND THAT IS THE WHOLE DESIGN OF THIS FIX. The card
   fields are Tranzila iframes; re-parenting one reloads it and leaves a field
   that cannot be typed into. Instead #order_review's BOX is taken out of the
   layout with display:contents, which promotes its two children to items of the
   form's own grid, and each is then placed in the column the preview puts it in.
   Verified live: the four iframes kept their identical src values and Tranzila's
   network request count did not move, 8 before and 8 after.

   display:contents also removes the panel #order_review was wearing, so the
   surface, hairline, radius, padding and sticky offset move onto the totals
   table itself. Below 900px none of this applies: #order_review keeps its box
   and the phone layout is untouched.

   The ratio matches the preview exactly (1.25fr 0.75fr) rather than the 1.5/0.7
   that had drifted in here.

   AND THE SPLIT STARTS AT 1024, NOT AT 900. The preview collapses at 900 and so
   did this, but nobody had ever measured the band just above it. Two columns at
   a 960px window gave the payment box 226px and a CVV field of 167px: the same
   defect this rule set out to fix, hiding one breakpoint lower. Between 900 and
   1000 the tracks do not even grow with the window, they sit at 260 and 219
   whatever it does, so the band is uniformly bad rather than gradually tight.
   Stacked instead, the same 960px window gives the payment box 389px and card
   fields of 362 and 330. Above 1024 nothing changes. This is a deliberate step
   away from the preview's breakpoint, on the screen that takes the money, and
   the measurements are here so it can be argued with. */
/* AND THE SUMMARY HAS TO STAY IN ONE PIECE. Corrected 2026-08-19.

   The placement below put the summary's HEADING in row 1 and the summary's own
   TABLE in row 2 of the same column. Row 1's height is not set by the heading,
   it is set by #customer_details next to it, which is 1,358px tall. So the
   heading sat alone at the top of the narrow column and its table appeared
   1,393px underneath it, with an empty column between them. Measured live at
   1440 before this: heading at y402, table at y1823.

   This is the fix above having broken something the fix above did not check.
   display:contents solved the payment form's column and, in the same stroke,
   made the heading and the table two independent grid items that the row
   structure was free to separate. Symptom fixed, symptom created, upload spent.

   The repair keeps every existing placement and adds the missing one: the wide
   column's #customer_details SPANS rows 1 and 2, so row 1 is sized by the
   heading alone and row 2 takes the remainder. `grid-template-rows: auto 1fr`
   is what sends the spanning item's height into the flexible track rather than
   into the auto one. The table then starts immediately under its heading with
   `align-self: start`, and #payment moves to row 3 under the customer details.

   Measured live with this applied: the gap between the heading and its table
   went from 1,393px to 87px at 1440, and from 1,386px to 76px at 1024. The four
   Tranzila iframes kept identical src values through every width, before and
   after, which is the only thing that may not move on this page. */
@media (min-width: 1024px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    grid-template-rows: auto 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .woocommerce-checkout form.checkout #order_review { display: contents; }
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; }
  .woocommerce-checkout form.checkout #order_review > #payment { grid-column: 1; grid-row: 3; }
  .woocommerce-checkout form.checkout #order_review > table.shop_table {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    /* The panel that #order_review used to be. */
    background: var(--c-surface);
    border: 1px solid var(--c-hairline);
    border-radius: var(--radius-sm);
    padding: var(--s-5);
    position: sticky;
    /* Clear the fixed header + announcement strip, whose combined height
       site.js measures into --chrome-h. */
    inset-block-start: calc(var(--chrome-h, 5rem) + var(--s-4));
  }
  /* Woo puts the two address blocks side by side in .col-1/.col-2. Inside a
     page that is already two columns that makes four, and every field becomes a
     slot. One column inside the form column. */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { inline-size: 100%; float: none; }
}
.woocommerce-checkout h3 {
  font-family: var(--f-he);
  font-size: var(--t-subtitle);
  font-weight: var(--fw-light);
  margin-block: var(--s-5) var(--s-4);
}

/* --- Checkout: the form fields ------------------------------------------- */
/* Matched to .field in site.css, so the checkout's inputs and the contact
   form's inputs are one control. The border is --c-muted (3.82:1) and NOT
   --c-hairline: a field boundary is a component boundary and 1.4.11 asks for
   3:1. That was measured and fixed in P4 and must not regress here. */
.woocommerce form .form-row { display: grid; gap: var(--s-2); padding: 0; margin-block-end: var(--s-4); }
.woocommerce form .form-row label {
  font-size: var(--t-small);
  color: var(--c-muted-text);
  line-height: 1.4;
}
.woocommerce form .form-row .required {
  color: var(--c-danger);
  text-decoration: none;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-muted);
  border-radius: var(--radius-sm);
  padding: 0.75rem var(--s-3);
  inline-size: 100%;
  block-size: auto;
  min-block-size: 3rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
  border-color: var(--c-primary);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--c-danger); }
@media (min-width: 560px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last { inline-size: calc(50% - (var(--s-4) / 2)); float: none; display: inline-grid; }
  .woocommerce form .form-row-first { margin-inline-end: var(--s-4); }
}
/* THE HALF-WIDTH PAIR IS FOR THE BILLING FORM, NOT FOR THE CARD FIELDS.
   Added 2026-08-18. The rule above is keyed to the VIEWPORT, but the payment box
   does not live in the viewport-wide column: it sits in the order summary,
   which is 0.7fr of the page and then loses its own padding. So on a 1024px
   screen, "50%" of that box is 77px, and the gateway's expiry and CVV frames
   came out 37px and 18px wide. An 18px CVV field on the screen that takes the
   money. It was there before the sidebar was taught to shrink; until then the
   whole payment box simply hung out of the column instead, which hid it.
   The two frames therefore take a full row each inside the payment box. At the
   widest this design ever makes that column the pair would still only get about
   110px each, so this is not a narrow-screen exception, it is the right layout
   for this box at every width.
   Scoped to #payment .payment_box, which WooCommerce renders whether or not our
   checkout plugin is switched on. NOT to .pay__field: that class is added at run
   time by the plugin, and an exception that only exists while an optional thing
   is enabled is the exact shape that already failed once here.
   These are iframes. This changes the WIDTH OF THEIR CONTAINER only, and moves
   no node: re-parenting one would reload it and leave a field that cannot be
   typed into. */
.woocommerce-checkout #payment .payment_box .form-row-first,
.woocommerce-checkout #payment .payment_box .form-row-last {
  inline-size: 100%;
  margin-inline-end: 0;
}

/* --- Checkout: the gift wrap block --------------------------------------- */
/* The block itself is `.giftwrap` in site.css, so the preview and the live
   checkout are one component. This is only the seam: WooCommerce's
   additional-fields wrapper used to hold the order-notes box and now holds this,
   and `.field`'s label needs to beat Woo's `.form-row label` rule for anything
   that happens to sit inside a form row. */
.woocommerce-checkout .woocommerce-additional-fields { margin-block-start: var(--s-5); }
.woocommerce-checkout .giftwrap .field > label {
  font-size: var(--t-small);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}
.woocommerce-checkout .giftwrap .field__hint {
  font-size: var(--t-meta);
  color: var(--c-muted-text);
  line-height: 1.6;
  margin: 0;
}
/* Woo's own "Additional information" heading has nothing left to introduce once
   the notes field is gone, and it would sit above our own h3. */
.woocommerce-checkout .woocommerce-additional-fields > h3 { display: none; }
.woocommerce-checkout .giftwrap > h3 { display: block; margin-block: 0 var(--s-3); }

/* The same rows on the thank-you page and in "my account", where they are a
   receipt rather than a control: the reader is checking that the card says what
   they typed. */
.giftwrap--receipt {
  margin-block-start: var(--s-5);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-inline-start: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
}
.giftwrap--receipt .giftwrap__row { display: grid; gap: var(--s-1); margin-block-end: var(--s-3); }
.giftwrap--receipt .giftwrap__row:last-child { margin-block-end: 0; }
.giftwrap--receipt .giftwrap__row-label { font-size: var(--t-meta); color: var(--c-muted-text); }
.giftwrap--receipt .giftwrap__row-value { font-size: var(--t-body); color: var(--c-text); }

/* --- Checkout: the payment box ------------------------------------------- */
/* Deliberately light. This is the box Tranzila renders itself into on Sunday:
   surface, spacing and type only, nothing that assumes what a gateway puts
   inside it. */
.woocommerce-checkout #payment {
  background: none;
  border-radius: 0;
  margin-block-start: var(--s-4);
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-4);
  list-style: none;
  display: grid;
  /* THE TRACK IS DECLARED, and that is not decoration. Fixed 2026-08-18.
     `display: grid` with no grid-template-columns gives one IMPLICIT track, and
     an implicit track is `auto`, whose minimum is the item's min-content. So the
     method row could not shrink: measured live at 360px it stayed 286.7px inside
     a 203px container and hung 13px off the edge of the page, the last thing
     still overflowing after the .checkout page-class fix. Same defect as that
     one, one level further in, and the same remedy: a track allowed to reach
     zero, so the card fields and the wallet buttons wrap instead of pushing. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  padding: var(--s-3);
  background: var(--c-bg);
}
.woocommerce-checkout #payment ul.payment_methods li label { font-size: var(--t-small); }
.woocommerce-checkout #payment div.payment_box {
  background: none;
  color: var(--c-muted-text);
  font-size: var(--t-meta);
  line-height: 1.7;
  padding: var(--s-2) 0 0;
  margin: var(--s-2) 0 0;
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }
.woocommerce-checkout #payment .place-order { padding: 0; }
.woocommerce #place_order { inline-size: 100%; justify-content: center; }

/* The gateway's own frame. Tranzila serves its card form in an <iframe> carrying
   a FIXED pixel width/height as HTML attributes — a number chosen by the gateway
   with no idea how wide our checkout column is. Left alone it sits narrower than
   every field above it on a desktop and overflows the column on a phone, which
   on the one screen that takes money reads as a broken page.
   So the attribute is overridden rather than negotiated: full width of whatever
   column it lands in, and the height attribute left to the gateway (it grows the
   frame itself as 3DS steps in, and a fixed block-size here would clip the
   bank's own screen). !important because the width is an ATTRIBUTE, and because
   this must hold whatever the gateway plugin enqueues after us.
   min-block-size is a floor, not a height: it keeps the layout from collapsing
   in the moment between the field appearing and the frame loading. */
.woocommerce-checkout #payment iframe,
.woocommerce-checkout .payment_box iframe,
.woocommerce-checkout .payment_method_tranzila iframe {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  display: block;
  border: 0;
  background: var(--c-surface);
}

/* THE HEIGHT FLOOR BELONGS TO THE PAY PAGE, AND ONLY TO IT. Fixed 2026-08-18.
   ⚠️ THIS WAS A REAL BUG, AND THE WAY IT WAS WRITTEN IS THE INTERESTING PART.
   The floor lived in the rule above, which matches EVERY iframe in the payment
   area. That was correct while the gateway put exactly one iframe there — its
   whole card form, on /checkout/order-pay/, which wants to be tall. Under Hosted
   Fields the gateway puts an iframe inside EVERY card field instead, so a
   card-number box 60px tall would have rendered at 352px: nearly six times its
   height, on the one screen that takes money.
   The first fix was an EXCEPTION, `.pay__field iframe { min-block-size: 0 }`,
   and it was the wrong shape. `.pay__field` is a class OUR PLUGIN adds at run
   time, so the fix only worked while the plugin was switched on — and the state
   it had to survive is precisely the other one: the gateway in hosted-fields
   mode with the plugin off, which is what the live store is in today.
   A narrowing exception that depends on something optional is not a fix. So the
   floor moved to where it is actually needed: the pay page carries the body
   class woocommerce-order-pay, and nothing on /checkout/ does.
   min-block-size is a floor and not a height: the gateway grows its own frame
   when 3DS steps in, and a fixed block-size here would clip the bank's screen. */
.woocommerce-order-pay #payment iframe {
  min-block-size: 22rem;
}

/* --- Checkout: the card panel's frame ------------------------------------- */
/* THE PANEL HAD NO FRAME AT ALL WHEN IT OPENED. Fixed 2026-08-19, from the
   owner's own report: "כשהוא נפתח במובייל חלק מהמסגרת שלו נעלמת".
   It was not being clipped. It was never drawn.

   The component in site.css hands the frame off deliberately. On open,
   `.pay-open .pay__trigger` turns its BOTTOM border transparent and squares its
   bottom corners, so the panel underneath can continue the same box and the two
   read as one object. That half worked. The other half, `.pay-open .pay__card`
   giving the panel `border: 1px solid` and `padding: var(--s-4)`, never landed,
   so the reader watched the bottom edge of the button vanish into nothing.

   WHY IT NEVER LANDED, AND WHY !important IS THE HONEST ANSWER HERE.
   WooCommerce ships these, measured on the live page:

     #add_payment_method #payment div.payment_box .wc-credit-card-form
       { border: 0; padding: 0 }                                  4-8-3
     #add_payment_method #payment div.form-row
       { padding: 1em }                                           4-5-3

   against `.pay-open .pay__card` at 0-2-0 and our own
   `.woocommerce form .form-row { padding: 0 }` at 0-2-1. Beating a four-id stack
   by specificity means writing a selector nobody can read or safely change, for
   no gain over saying plainly that this one wins. `!important` against Woo's id
   stacks is already this file's answer elsewhere.

   The second rule is the same defect wearing different clothes: Woo's 1em on
   each .form-row is 13px, so every field frame sat 13px inside the button's
   frame with no symmetry against it, and the hole between the expiry and the
   CVV was 24px of grid gap plus 13 plus 13 = 50px.

   Measured live with this applied, against the approved preview at 360, 390,
   414 and 1440: panel border 0/1/1/1, panel padding 24px, fields inset 25px,
   expiry-to-CVV gap 24px. Identical to the preview at every width, and the four
   Tranzila iframe src values unchanged. */
.pay-open .pay__card {
  padding: var(--s-4) !important;
  border: 1px solid var(--c-primary) !important;
  border-block-start: 0 !important;
}
.pay-open .pay__card > .form-row { padding: 0 !important; }

/* AND THE SAME 1em IS WHY THE BUTTON THAT COMPLETES THE PURCHASE WAS THE
   NARROWEST CONTROL ON THE SCREEN. Found while measuring the fix above.
   Woo's `#add_payment_method #payment div.form-row` also matches the row that
   holds #place_order, so at 360px the label, the wallet buttons, the "or" rule
   and the credit-card trigger all sat at x45 across 270px, and the place-order
   button alone sat at x62 across 236. The one control that takes the money was
   17px narrower than the button that merely opens the card form, which reads
   backwards: the more important action looked like the lesser one.

   This file already said `padding: 0` here, at 1-2-0. It has been losing to
   Woo's 4-5-3 the whole time, which is why the intent was right and the page
   was not.

   `padding-inline` and not `padding`: the horizontal padding is what breaks the
   alignment, and the vertical padding is real spacing above the primary button
   that nothing else supplies. The panel's rows above take the shorter route
   because their grid gap owns their spacing already. */
.woocommerce-checkout #payment .place-order { padding-inline: 0 !important; }

/* --- Checkout: one payment method needs no frame around it ---------------- */
/* `ul.payment_methods li` above wears a hairline box because it is a CHOICE in a
   list: with two gateways, each frame says "this option, or that one". With one
   gateway it says nothing, and it costs the card fields real width. Measured at
   360px with everything else fixed, the payment area was three padded boxes
   deep — the summary card's 24, this frame's 16, the panel's 24 — which is 128
   of the phone's 360 pixels, and left the card-number field at 186px where the
   approved design gives it 270. On the screen that takes the money.

   `:only-child` AND NOT A FLAT REMOVAL, because the frame is not wrong, it is
   only unearned right now. The day a second gateway is switched on, the list
   becomes a real choice and both frames come back on their own, with nothing to
   remember and nothing to edit here. That is the whole reason this is a
   selector and not a deletion.

   The method's own title then becomes the block's heading, so it takes the
   spacing the frame used to provide. */
.woocommerce-checkout #payment ul.payment_methods li:only-child {
  border: 0;
  padding: 0;
  background: none;
}
.woocommerce-checkout #payment ul.payment_methods li:only-child > label {
  display: block;
  margin-block-end: var(--s-3);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

/* --- Empty cart ----------------------------------------------------------- */
/* Woo's empty cart is a notice plus a link. The preview's .cart-empty is a
   centred block between two rules; this gives it that shape without a template. */
.woocommerce-cart .cart-empty,
.woocommerce-cart .wc-empty-cart-message {
  text-align: center;
  padding-block: var(--s-7) var(--s-3);
  border-block-start: 1px solid var(--c-hairline);
  border-inline: 0;
  border-block-end: 0;
  font-size: var(--t-subtitle);
  font-weight: var(--fw-light);
  color: var(--c-text);
  background: none;
  margin: 0;
  display: block;
}
.woocommerce-cart .cart-empty::before,
.woocommerce-cart .wc-empty-cart-message::before { content: none; }
.woocommerce-cart .return-to-shop {
  text-align: center;
  padding-block-end: var(--s-7);
  border-block-end: 1px solid var(--c-hairline);
  margin: 0;
}

/* --- Order received ------------------------------------------------------- */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--f-he);
  font-size: var(--t-title);
  font-weight: var(--fw-light);
  color: var(--c-text);
  margin-block-end: var(--s-5);
}
.woocommerce-order ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-3);
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  border: 0;
}
.woocommerce-order ul.woocommerce-order-overview li {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  padding: var(--s-3);
  font-size: var(--t-meta);
  color: var(--c-muted-text);
  text-transform: none;
  float: none;
  margin: 0;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  margin-block-start: var(--s-1);
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

/* --- Phone ---------------------------------------------------------------- */
/* 768px, not the 720 this used to be, because 768 is WooCommerce's OWN
   breakpoint: woocommerce-smallscreen.css is enqueued with
   `media="only screen and (max-width: 768px)"`. With the two boundaries 48px
   apart there was a window between 721 and 768 where Woo's responsive-table
   sheet applied and none of the answers to it did.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* FIRST, take back the cart table from Woo's smallscreen sheet. It rewrites
     `table.shop_table_responsive` into its own stacked-list design, which is a
     perfectly good design and is not this one, and it outweighs the card rules
     above. Measured at 520px before this block existed:
       - the 84px bottle plate was GONE. `table.cart .product-thumbnail
         {display:none}` at three classes to the card rule's two. This one is not
         new today: it has been hiding the plate on every phone since the cart
         moved to the shortcode, under the previous phone rules as well;
       - every cell printed a SECOND label, `attr(data-title) ": "`, bold and
         floated, on top of the three this card prints itself, so the card read
         "מוצר: / מחיר: / כמות: / סכום ביניים:" down the side;
       - `text-align:left !important` on every cell, which in an RTL page puts
         every value on the far side from the line it belongs to;
       - a zebra stripe on even rows;
       - the coupon input and its button pinned to `width:48%` each, which is
         what cut "החלת קופון" in half.
     Each reset below matches the specificity of the rule it answers and wins on
     source order, since woo-brand.css is enqueued last. */
  /* `text-align` only. Woo's `display:block` on the same selector is welcome for
     the cells this card does not lay out itself, and deliberately NOT answered
     here: a blanket `display:block` at this specificity would land after the
     card's own `display:flex` on the price, subtotal and quantity cells and
     flatten all three. Same reasoning for the ::before reset below, which names
     the three unlabelled cells instead of all of them. */
  .woocommerce-cart table.shop_table_responsive tr td { text-align: start !important; }
  /* The plate. Woo hides it as `.woocommerce #content table.cart
     .product-thumbnail`, an ID our three classes could never beat, so this is
     the `:is()` shape explained above the coupon field. Without the ID this rule
     lost and the bottle was still missing on a phone, which is precisely the
     defect it was written to fix. */
  .woocommerce-cart :is(#content, .page-content) table.cart .product-thumbnail,
  .woocommerce-cart table.cart .product-thumbnail { display: block; }
  /* Woo also flattens the ROW: `.woocommerce table.shop_table_responsive tr
     {display:block}` is two classes and two types against the card rule's two
     and one, so below 768px the card measured display:block while still holding
     the phone column template — a grid template on a block box, which places
     nothing. This is the rule that puts the card back. */
  .woocommerce-cart table.shop_table_responsive tr.cart_item { display: grid; }
  .woocommerce-cart table.shop_table_responsive tr td.product-thumbnail::before,
  .woocommerce-cart table.shop_table_responsive tr td.product-name::before,
  .woocommerce-cart table.shop_table_responsive tr td.product-remove::before,
  .woocommerce-cart table.shop_table_responsive tr td.actions::before {
    content: none;
  }
  .woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent;
  }
  /* One column, and both controls filling it. Woo's 48%-each was the source of
     the clipped "החלת קופון"; side by side is a desktop shape, and on a phone a
     full-width field above a full-width button is both easier to hit and the
     shape every other form on this store already uses. */
  .woocommerce-cart td.actions .coupon { grid-template-columns: minmax(0, 1fr); }
  /* Woo's smallscreen sheet pins both to 48% under an ID selector, which is what
     cut "החלת קופון" in half. Same `:is()` shape as above. */
  .woocommerce-cart :is(#content, .page-content) table.cart td.actions .coupon .button,
  .woocommerce-cart :is(#content, .page-content) table.cart td.actions .coupon .input-text,
  .woocommerce-cart :is(#content, .page-content) table.cart td.actions .coupon input,
  .woocommerce-cart table.cart td.actions .coupon .button,
  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .woocommerce-cart table.cart td.actions .coupon input {
    inline-size: 100%;
    width: 100%;
    float: none;
  }

  /* THEN narrow the card. Four columns do not fit 390px: the money moves under
     the name, each figure keeps its own label on the line beside it, and the
     remove control takes the corner the plate does not reach. */
  .woocommerce-cart tr.cart_item {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    /* No `price` row: the unit-price cell is display:none, and naming an area for
       a hidden item leaves an empty track that still collects a row-gap. */
    grid-template-areas:
      "media name  remove"
      "media qty   sub";
    column-gap: var(--s-3);
    row-gap: var(--s-2);
    align-items: start;
  }
  .woocommerce-cart td.product-thumbnail img { inline-size: 68px; }
  .woocommerce-cart td.product-name a { font-size: var(--t-body); }
  .woocommerce-cart tr.cart_item td.product-price,
  .woocommerce-cart tr.cart_item td.product-subtotal {
    justify-content: space-between;
    font-size: var(--t-small);
  }
  .woocommerce-cart tr.cart_item td.product-quantity { padding-block: var(--s-1); }
  /* The coupon panel and the update button stop competing for one row. */
  .woocommerce-cart td.actions { flex-direction: column; align-items: stretch; }
  .woocommerce-cart td.actions .coupon { max-inline-size: none; }
  .woocommerce-cart td.actions button.button[name="update_cart"] { inline-size: 100%; }
  .woocommerce-cart .cart-collaterals { margin-block-start: var(--s-5); }
}

/* --- Wallet marks: out-specify WooCommerce's blanket image rule ------------ */
/* woocommerce-layout.css ships `.woocommerce img, .woocommerce-page img
   { width: 100%; height: auto }`, which is (0,1,1) and therefore outranks every
   single-class sizing rule in site.css. Measured live on the checkout of
   2026-08-19: the bit wordmark rendered 186x110 inside a 52px-tall button,
   because width:100% won over inline-size:auto and height:auto then won over
   block-size, so the raster took its own aspect ratio.
   This was invisible in site-preview, and that is the point worth keeping: the
   preview page carries no .woocommerce-page class, so the blanket rule does not
   exist there and the marks measured correctly right up to the moment they were
   rendered by WooCommerce.
   Scoped with :is() so both of Woo's class names are answered by one rule at
   (0,2,1). The block-size values are NOT restated from memory — each mirrors its
   site.css source, and verify-theme fails if a variant here drifts from there or
   if a new variant is added to site.css without one. */
:is(.woocommerce, .woocommerce-page) .pay__mark { block-size: 22px; inline-size: auto; }
:is(.woocommerce, .woocommerce-page) .pay__mark--apple { block-size: 36px; }
:is(.woocommerce, .woocommerce-page) .pay__mark--bit { block-size: 26px; }