/* WDK cart + checkout — loads ONLY on is_cart() / is_checkout()
 * (inc/wdk-cart.php, wp_enqueue_scripts @10012, dep 'wdk-shop').
 *
 * WHAT THIS SHEET IS
 * ------------------
 * Pure CSS over WooCommerce's own markup. No template override ships with it,
 * so every hook the money layer depends on keeps firing untouched:
 * `woocommerce_review_order_before_order_total` (snippet 20's insurance <tr>),
 * `woocommerce_review_order_before_shipping` / `woocommerce_cart_totals_before_shipping`
 * (snippet 41), `woocommerce_checkout_process` (snippets 43 / 56 minimums),
 * `woocommerce_checkout_cart_item_quantity` (snippet 42), wp_footer on cart
 * (snippet 36's steppers) and the order-tip-woo plugin's selector. The classic
 * (shortcode) checkout markup is required and assumed — nothing here targets
 * the block checkout.
 *
 * NO @font-face. Archivo Black is declared once, in assets/wdk-shop.css, which
 * is this sheet's enqueue dependency and therefore always present before it.
 *
 * SCOPING RULE, NON-NEGOTIABLE
 * ---------------------------
 * The header (jade bar, search field, cart pill) and the footer render on the
 * cart and checkout pages too. Every selector below is therefore prefixed with
 * `body.woocommerce-cart` / `body.woocommerce-checkout` AND lands inside a
 * WooCommerce container. There is not one bare `input`, `table`, `button`,
 * `label` or `h2` rule in this file, so the header search field and the
 * footer's email signup cannot be reached from here.
 *
 * DEFENSIVE LAYOUT
 * ----------------
 * WDK's cart/checkout markup is Porto's, which is not in this repo. The three
 * rules that would actually BREAK a page if the expected cells were missing —
 * the table-to-list conversions — are gated behind `:has()` on a cell that
 * only exists in the layout being assumed. Where `:has()` is unsupported or
 * the markup differs, those rules simply never match and the page falls back
 * to a plain, still-restyled WooCommerce table. Everything else (colour,
 * type, spacing, borders) is additive and harmless in either case.
 *
 * PALETTE
 * -------
 * Tokens are namespaced --wdkc-* so they cannot collide with wdk-shop.css's
 * --cw-* block or wdk-chrome.css's --wdk-* block, both of which load first.
 * Values are DESIGN-TOKENS.md's: jade, deep jade, jade text, mint, orange,
 * ink, paper, hairline. Orange is used for savings and urgency ONLY.
 */

:root{
  --wdkc-jade:#3EB785;          /* brand jade — borders, tints, accents      */
  --wdkc-deep:#1F8A5F;          /* deep jade — hovers, focus rings, icons    */
  --wdkc-jadetext:#177A52;      /* jade text — 5.3:1 on white, 5.0:1 on mint */
  /* Filled primary CTAs use the jade-TEXT value, not brand jade: white on
     #3EB785 is 2.5:1 and white on #1F8A5F is 4.3:1, both under 4.5:1 for the
     button label size used here. #177A52 is 5.3:1 and is a palette colour.
     One token — change this line to move every primary CTA at once. */
  --wdkc-cta:#177A52;
  --wdkc-cta-hover:#0F6342;
  --wdkc-mint:#F1F9F5;          /* emphasis panels                           */
  --wdkc-orange:#FF9800;        /* savings + urgency only                    */
  --wdkc-orange-ink:#1A1204;    /* 8.6:1 on orange                           */
  --wdkc-ink:#151917;
  --wdkc-mut:#6C7570;           /* 4.75:1 on white — the floor for meta text */
  --wdkc-paper:#F7F8F7;
  --wdkc-card:#FFFFFF;
  --wdkc-line:#E9EDEA;          /* hairline                                  */
  --wdkc-line-2:#D9E0DB;        /* hairline, one step firmer (field borders) */
  --wdkc-warn:#A52016;
  --wdkc-warn-bg:#FCEDEC;
  --wdkc-display:'Archivo Black','Arial Black',Impact,sans-serif;
  --wdkc-ui:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wdkc-r:10px;                /* card radius     */
  --wdkc-r-sm:6px;              /* control radius  */
  --wdkc-gap:14px;
}

/* ============================================================
   1. PAGE SHELL
   Ground + page title. Porto centres and greys the entry title
   (see checkout-check.png); it becomes a left-aligned Archivo
   Black plate like the rest of the rebuild.
   ============================================================ */
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce{
  font-family:var(--wdkc-ui);color:var(--wdkc-ink);
}
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-checkout .page-title{
  font-family:var(--wdkc-display)!important;font-weight:400!important;
  text-transform:uppercase;letter-spacing:-0.01em;
  font-size:clamp(24px,3.4vw,34px)!important;line-height:1.08!important;
  color:var(--wdkc-ink)!important;text-align:left!important;margin:0 0 18px!important;
}

/* Woo's AJAX overlay sits on the totals card and the review table; give it the
   same radius so an in-flight update does not square off the card corners. */
body.woocommerce-cart .blockUI.blockOverlay,
body.woocommerce-checkout .blockUI.blockOverlay{
  border-radius:var(--wdkc-r);background:rgba(247,248,247,.72)!important;opacity:1!important;
}

/* ============================================================
   2. WOOCOMMERCE NOTICES (idea ported from cw.css ~2620)
   Woo's stock amber panel turns up at the worst moment — a
   rejected coupon, a failed $50 minimum, a checkout error. The
   state is carried by the GROUND and by a caps eyebrow, never by
   colour alone, so it survives a red/green confusion.
   Scoped to cart+checkout: the my-account pass owns notices on
   .woocommerce-account, and nothing here reaches it.
   ============================================================ */
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info{
  display:block;position:relative;list-style:none;
  margin:0 0 18px!important;padding:14px 16px 15px!important;
  border:1.5px solid var(--wdkc-line);border-radius:var(--wdkc-r-sm);
  background:var(--wdkc-paper);box-shadow:none!important;
  font:400 13.5px/1.55 var(--wdkc-ui)!important;color:var(--wdkc-ink)!important;
}
/* Woo puts a circled glyph in ::before, absolutely positioned in its own icon
   font. That pseudo is REUSED as the eyebrow rather than hidden and replaced
   with ::after — ::after is Woo's clearfix, and an ::after eyebrow would have
   forced the panel into a flex column, which turns an inline link ("Returning
   customer? Click here to login") into its own block-level line. Every one of
   Woo's positioning properties is reset here because they are all inherited
   from that icon rule. */
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before{
  display:block;position:static;
  top:auto;left:auto;right:auto;bottom:auto;
  width:auto;height:auto;padding:0;margin:0 0 5px;border:0;background:none;
  font:800 10px/1 var(--wdkc-ui)!important;letter-spacing:.16em;text-transform:uppercase;
  text-indent:0;transform:none;
}
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error{background:var(--wdkc-warn-bg);border-color:var(--wdkc-warn)}
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before{content:"Check this"!important;color:var(--wdkc-warn)}
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message{background:var(--wdkc-mint);border-color:var(--wdkc-jade)}
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-message::before{content:"Done"!important;color:var(--wdkc-jadetext)}
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info{background:var(--wdkc-paper);border-color:var(--wdkc-line-2)}
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-info::before{content:"Note"!important;color:var(--wdkc-mut)}

body.woocommerce-cart .woocommerce-error li,
body.woocommerce-cart .woocommerce-message li,
body.woocommerce-cart .woocommerce-info li,
body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-checkout .woocommerce-message li,
body.woocommerce-checkout .woocommerce-info li{margin:0;padding:0;list-style:none}
body.woocommerce-cart .woocommerce-error a,
body.woocommerce-cart .woocommerce-message a,
body.woocommerce-cart .woocommerce-info a,
body.woocommerce-checkout .woocommerce-error a,
body.woocommerce-checkout .woocommerce-message a,
body.woocommerce-checkout .woocommerce-info a{
  color:var(--wdkc-jadetext)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-cart .woocommerce-error a,
body.woocommerce-checkout .woocommerce-error a{color:var(--wdkc-warn)!important}

/* The "View cart" / "Return to shop" button some notices carry. */
body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-cart .woocommerce-info .button,
body.woocommerce-checkout .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-info .button{
  /* Woo floats this right, which drops it into the middle of the sentence once
     the panel is a plain block. `display:flex` + `width:fit-content` gives it
     its own line at its own width, at every viewport. */
  float:none!important;display:flex;width:fit-content;max-width:100%;margin:12px 0 0!important;
}

/* ============================================================
   3. BUTTONS — one instrument, three voices.
   PRIMARY  = filled --wdkc-cta, white label (checkout, place order)
   SECONDARY= ink outline on white (update cart, apply coupon)
   QUIET    = plain jade-text link (keep shopping, remove)
   Scoped to Woo containers so no header/footer button is reached.
   ============================================================ */
body.woocommerce-cart .woocommerce .button,
body.woocommerce-checkout .woocommerce .button,
body.woocommerce-cart .woocommerce button[type=submit],
body.woocommerce-checkout .woocommerce button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;border-radius:var(--wdkc-r-sm);
  border:1.5px solid var(--wdkc-ink);background:var(--wdkc-card);color:var(--wdkc-ink);
  font:800 12px/1 var(--wdkc-ui);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
  box-shadow:none;text-shadow:none;
}
body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-checkout .woocommerce .button:hover,
body.woocommerce-cart .woocommerce button[type=submit]:hover,
body.woocommerce-checkout .woocommerce button[type=submit]:hover{
  background:var(--wdkc-ink);color:#fff;border-color:var(--wdkc-ink);
}
/* Woo marks its own primary with .alt — plus our two named CTAs. */
body.woocommerce-cart .woocommerce .button.alt,
body.woocommerce-checkout .woocommerce .button.alt,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order{
  background:var(--wdkc-cta);border-color:var(--wdkc-cta);color:#fff;
  font-family:var(--wdkc-display);font-weight:400;font-size:14px;letter-spacing:.04em;
}
body.woocommerce-cart .woocommerce .button.alt:hover,
body.woocommerce-checkout .woocommerce .button.alt:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover{
  background:var(--wdkc-cta-hover);border-color:var(--wdkc-cta-hover);color:#fff;
}
body.woocommerce-cart .woocommerce .button:disabled,
body.woocommerce-checkout .woocommerce .button:disabled,
body.woocommerce-cart .woocommerce .button.disabled,
body.woocommerce-checkout .woocommerce .button.disabled{
  opacity:1;background:var(--wdkc-paper);border-color:var(--wdkc-line-2);color:var(--wdkc-mut);cursor:not-allowed;
}

/* Focus is always visible and always the deep jade (4.3:1 against white, so
   the ring itself clears the 3:1 non-text minimum). */
body.woocommerce-cart .woocommerce a:focus-visible,
body.woocommerce-cart .woocommerce button:focus-visible,
body.woocommerce-cart .woocommerce input:focus-visible,
body.woocommerce-cart .woocommerce select:focus-visible,
body.woocommerce-cart .woocommerce textarea:focus-visible,
body.woocommerce-checkout .woocommerce a:focus-visible,
body.woocommerce-checkout .woocommerce button:focus-visible,
body.woocommerce-checkout .woocommerce input:focus-visible,
body.woocommerce-checkout .woocommerce select:focus-visible,
body.woocommerce-checkout .woocommerce textarea:focus-visible{
  outline:2.5px solid var(--wdkc-deep);outline-offset:2px;border-radius:var(--wdkc-r-sm);
}

/* ============================================================
   4. FORM FIELDS — the site's input language (44px, hairline,
   jade on focus), matching the header search field's geometry
   in wdk-chrome.css. Scoped hard: `.form-row` and Woo's own
   containers only, never a bare element selector.
   ============================================================ */
body.woocommerce-cart .woocommerce .form-row input.input-text,
body.woocommerce-cart .woocommerce .form-row textarea,
body.woocommerce-cart .woocommerce .form-row select,
body.woocommerce-checkout .woocommerce .form-row input.input-text,
body.woocommerce-checkout .woocommerce .form-row textarea,
body.woocommerce-checkout .woocommerce .form-row select,
body.woocommerce-checkout .woocommerce-billing-fields input.input-text,
body.woocommerce-checkout .woocommerce-shipping-fields input.input-text,
body.woocommerce-checkout .woocommerce-additional-fields textarea{
  /* CW-parity restyle 2026-08-18: filled paper fields on a white card (CW uses
     #F1F1EE fills with no border); the hairline returns as jade on focus. */
  width:100%;box-sizing:border-box;min-height:46px;
  padding:11px 13px;border:1.5px solid transparent;border-radius:var(--wdkc-r-sm);
  background:var(--wdkc-paper);color:var(--wdkc-ink);
  font:400 14.5px/1.4 var(--wdkc-ui);box-shadow:none;
  transition:border-color .15s ease,background-color .15s ease;
}
body.woocommerce-checkout .woocommerce .form-row textarea,
body.woocommerce-checkout .woocommerce-additional-fields textarea{min-height:110px;resize:vertical}
body.woocommerce-cart .woocommerce .form-row input.input-text:focus,
body.woocommerce-cart .woocommerce .form-row select:focus,
body.woocommerce-cart .woocommerce .form-row textarea:focus,
body.woocommerce-checkout .woocommerce .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce .form-row select:focus,
body.woocommerce-checkout .woocommerce .form-row textarea:focus{
  border-color:var(--wdkc-jade);background:var(--wdkc-card);box-shadow:none;
}
body.woocommerce-cart .woocommerce .form-row input.input-text::placeholder,
body.woocommerce-checkout .woocommerce .form-row input.input-text::placeholder,
body.woocommerce-checkout .woocommerce .form-row textarea::placeholder{color:var(--wdkc-mut);opacity:1}

body.woocommerce-checkout .woocommerce .form-row > label,
body.woocommerce-checkout .woocommerce-billing-fields .form-row > label,
body.woocommerce-checkout .woocommerce-shipping-fields .form-row > label{
  display:block;margin:0 0 6px;
  font:800 10.5px/1.4 var(--wdkc-ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--wdkc-mut);
}
/* Checkbox rows keep a normal sentence label — the caps eyebrow above is for
   text inputs only. `.checkbox` is Woo's own class on those rows. */
body.woocommerce-checkout .woocommerce .form-row.checkbox > label,
body.woocommerce-checkout .woocommerce .form-row > label.checkbox{
  display:inline-flex;align-items:flex-start;gap:9px;
  font:400 13.5px/1.5 var(--wdkc-ui);letter-spacing:0;text-transform:none;color:var(--wdkc-ink);
}
body.woocommerce-checkout .woocommerce .form-row input[type=checkbox],
body.woocommerce-checkout .woocommerce .form-row input[type=radio]{
  width:18px;height:18px;flex:0 0 auto;accent-color:var(--wdkc-deep);margin:1px 0 0;
}
body.woocommerce-checkout .woocommerce .form-row{margin:0 0 16px;padding:0}

/* select2, if Porto/Woo swaps the country + province selects for it. */
body.woocommerce-checkout .woocommerce .select2-container .select2-selection--single{
  height:46px;border:1.5px solid transparent;border-radius:var(--wdkc-r-sm);background:var(--wdkc-paper);
}
body.woocommerce-checkout .woocommerce .select2-container .select2-selection--single .select2-selection__rendered{
  line-height:44px;padding-left:12px;color:var(--wdkc-ink);font:400 14.5px/44px var(--wdkc-ui);
}
body.woocommerce-checkout .woocommerce .select2-container .select2-selection--single .select2-selection__arrow{height:44px}
body.woocommerce-checkout .woocommerce .select2-container--open .select2-selection--single{border-color:var(--wdkc-jade)}

/* CHECKOUT SECTION HEADINGS — NOT STYLED HERE ANY MORE (2026-08-18).
   This group used to set the form's h3s to 16px Archivo, including a
   `#customer_details h3:not(#order_review_heading)` selector whose ID
   out-specified assets/wdk-checkout.css's clamp(20px,2.2vw,26px) no matter
   which sheet printed last — so the checkout layer's own heading rule sat
   dead while looking authoritative. The 16px was this port's design call,
   never an owner request, so the headings belong to wdk-checkout.css now;
   nothing in this file may declare type on them again.
   #order_review_heading (the jade YOUR ORDER band, §13) is unaffected —
   it was excluded from this group even when the group existed. */

/* ============================================================
   5. CART — page shell.
   Woo 9.x cart page is:  .woocommerce > form.woocommerce-cart-form
                          .woocommerce > .cart-collaterals > (.cross-sells, .cart_totals)
   The grid is gated on both children existing as DIRECT children; if Porto
   nests them differently the page simply stays single-column, which is the
   mobile layout and is perfectly usable.
   `display:contents` on .cart-collaterals promotes .cart_totals and
   .cross-sells to grid items so the totals card can take the right column
   while the cross-sells stay full-width under the line items.
   ============================================================ */
@media (min-width:1024px){
  /* row-gap is 0 and the vertical rhythm comes from each block's own margin.
     That is deliberate: row 1 is the notices row, and when there are no
     notices an empty row must cost nothing. Rows are assigned EXPLICITLY
     rather than left to auto-placement, because auto-placement puts the
     notices below the cart (they come first in the DOM but the pinned form
     claims row 1) — a failed $50 minimum has to be at the top of the page. */
  body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form):has(> .cart-collaterals),
  body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form):has(> .cart_totals){
    display:grid;grid-template-columns:minmax(0,1fr) 352px;
    column-gap:30px;row-gap:0;align-items:start;
  }
  body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  body.woocommerce-cart .woocommerce > .woocommerce-error,
  body.woocommerce-cart .woocommerce > .woocommerce-message,
  body.woocommerce-cart .woocommerce > .woocommerce-info{grid-column:1 / -1;grid-row:1}
  body.woocommerce-cart .woocommerce > form.woocommerce-cart-form{grid-column:1;grid-row:2;min-width:0}
  body.woocommerce-cart .woocommerce > .cart-collaterals{display:contents}
  body.woocommerce-cart .woocommerce > .cart-collaterals > .cart_totals,
  body.woocommerce-cart .woocommerce > .cart_totals{
    grid-column:2;grid-row:2;position:sticky;top:20px;min-width:0;
  }
  body.woocommerce-cart .woocommerce > .cart-collaterals > .cross-sells,
  body.woocommerce-cart .woocommerce > .cross-sells{grid-column:1;grid-row:3;min-width:0}
}

/* ============================================================
   6. CART — savings chip (our own markup, inc/wdk-cart.php).
   The only orange on the page: savings and urgency only.
   ============================================================ */
body.woocommerce-cart .wdk-cart-save{
  display:inline-flex;align-items:baseline;gap:8px;
  margin:0 0 14px;padding:7px 14px;border-radius:999px;
  background:var(--wdkc-orange);color:var(--wdkc-orange-ink);
}
body.woocommerce-cart .wdk-cart-save-k{
  font:800 10.5px/1 var(--wdkc-ui);letter-spacing:.13em;text-transform:uppercase;
}
body.woocommerce-cart .wdk-cart-save-v,
body.woocommerce-cart .wdk-cart-save-v .amount,
body.woocommerce-cart .wdk-cart-save-v bdi{
  font-family:var(--cw-money);font-weight:600;font-size:15px;line-height:1;letter-spacing:-0.01em;
  color:var(--wdkc-orange-ink);
}

/* ============================================================
   7. CART — line items as a list.
   Woo's table becomes a card list. GATED: the conversion only
   applies to a table that actually carries td.product-quantity,
   which is the cell the whole grid is built around. Without it
   (different template, no :has() support) the rules never match
   and section 8's plain-table styling carries the page.
   ============================================================ */
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity),
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody{
  display:block;width:100%;border:0;margin:0;border-collapse:separate;border-spacing:0;background:none;
  /* explicitly undo section 8's fallback card, which is lower specificity but
     sets properties this rule does not otherwise touch */
  border-radius:0;overflow:visible;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > thead{display:none}

body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr.cart_item,
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr.woocommerce-cart-form__cart-item{
  display:grid;align-items:center;
  grid-template-columns:84px minmax(0,1fr) 104px 128px 100px 34px;
  grid-template-areas:"thumb name price qty sub rm";
  gap:0 16px;
  padding:14px;margin:0 0 10px;
  background:var(--wdkc-card);border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
}
/* Every cell in a converted row: kill table display, kill Woo's responsive
   data-title pseudo-label (our layout is explicit, the label would duplicate). */
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr > td{
  display:block;border:0;padding:0;background:none;text-align:left;width:auto;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr > td::before{
  content:none!important;display:none!important;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) td.product-thumbnail{grid-area:thumb}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) td.product-name{grid-area:name;min-width:0}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) td.product-price{grid-area:price}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) td.product-quantity{grid-area:qty}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) td.product-subtotal{grid-area:sub;text-align:right}
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) td.product-remove{grid-area:rm;text-align:right}

/* --- cell contents (safe with or without the conversion) --------------- */
body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail img{
  display:block;width:84px;height:84px;max-width:none;object-fit:cover;
  border-radius:8px;background:var(--wdkc-paper);
}
body.woocommerce-cart .woocommerce-cart-form td.product-name a{
  display:block;color:var(--wdkc-ink);text-decoration:none;
  font:800 14px/1.35 var(--wdkc-ui);letter-spacing:.02em;
}
body.woocommerce-cart .woocommerce-cart-form td.product-name a:hover{color:var(--wdkc-jadetext)}
/* Variation meta ("Weight: 28g") — the quiet line under the name. */
body.woocommerce-cart .woocommerce-cart-form td.product-name .variation,
body.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation{
  margin:5px 0 0;font:600 12px/1.5 'Figtree',var(--wdkc-ui);color:var(--wdkc-mut);
}
body.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dt,
body.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dd{
  display:inline;margin:0;padding:0;font-weight:400;
}
body.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dd{margin-right:10px}
body.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dd p{display:inline;margin:0}
body.woocommerce-cart .woocommerce-cart-form td.product-name dt.variation-Weight,
body.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dt{font-weight:700;color:var(--wdkc-ink)}
body.woocommerce-cart .woocommerce-cart-form td.product-name .backorder_notification{
  margin:6px 0 0;font:700 11.5px/1.4 var(--wdkc-ui);color:var(--wdkc-orange-ink);
  background:var(--wdkc-orange);display:inline-block;padding:3px 8px;border-radius:4px;
}
/* Free-gift lines (woocommerce-free-gift-coupons) get a jade whisper so they
   read as "included", not as a charge. */
body.woocommerce-cart .woocommerce-cart-form tr.cart_item.free-gift td.product-name a,
body.woocommerce-cart .woocommerce-cart-form tr.free_gift td.product-name a{color:var(--wdkc-jadetext)}

body.woocommerce-cart .woocommerce-cart-form td.product-price,
body.woocommerce-cart .woocommerce-cart-form td.product-price .amount,
body.woocommerce-cart .woocommerce-cart-form td.product-price bdi{
  font:400 14px/1.2 var(--wdkc-ui);color:var(--wdkc-mut);
}
body.woocommerce-cart .woocommerce-cart-form td.product-price del{color:var(--wdkc-mut);opacity:.75}
body.woocommerce-cart .woocommerce-cart-form td.product-price ins{text-decoration:none;color:var(--wdkc-ink)}
body.woocommerce-cart .woocommerce-cart-form td.product-subtotal,
body.woocommerce-cart .woocommerce-cart-form td.product-subtotal .amount,
body.woocommerce-cart .woocommerce-cart-form td.product-subtotal bdi{
  font-family:var(--cw-money);font-weight:600;font-size:18px;line-height:1.1;
  letter-spacing:-0.01em;color:var(--wdkc-ink);
}

/* Remove — a quiet round target that only goes red on intent. 34px keeps it a
   real touch target without shouting. */
body.woocommerce-cart .woocommerce-cart-form td.product-remove a.remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--wdkc-paper);color:var(--wdkc-mut)!important;
  font:400 20px/1 var(--wdkc-ui);text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
body.woocommerce-cart .woocommerce-cart-form td.product-remove a.remove:hover{
  background:var(--wdkc-warn-bg);color:var(--wdkc-warn)!important;
}

/* --- quantity ---------------------------------------------------------
   Woo renders `.quantity > input.qty[type=number]`. Snippet 36 ("Cart Page
   coin increase decrease") injects +/- controls around it from wp_footer, and
   the exact element it uses is unknown from here — so every plausible control
   (a.plus/.minus, button, input[type=button]) is styled, and the native
   spinner is only suppressed WHEN one of those controls is actually present.
   Without snippet 36 the browser spinner survives and the field stays usable.
   ---------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce-cart-form .quantity{
  display:inline-flex;align-items:stretch;height:44px;overflow:hidden;
  border:1.5px solid var(--wdkc-line-2);border-radius:var(--wdkc-r-sm);background:var(--wdkc-card);
}
body.woocommerce-cart .woocommerce-cart-form .quantity input.qty{
  width:56px;height:100%;box-sizing:border-box;margin:0;padding:0 4px;
  border:0;background:transparent;text-align:center;box-shadow:none;
  font-family:var(--cw-money);font-weight:600;font-size:15px;color:var(--wdkc-ink);
}
body.woocommerce-cart .woocommerce-cart-form .quantity input.qty:focus{outline-offset:-2px}
body.woocommerce-cart .woocommerce-cart-form .quantity:has(.plus) input.qty,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(.minus) input.qty,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(button) input.qty,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(input[type=button]) input.qty{
  -moz-appearance:textfield;appearance:textfield;
}
body.woocommerce-cart .woocommerce-cart-form .quantity:has(.plus) input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(.plus) input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(.minus) input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(.minus) input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(button) input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .woocommerce-cart-form .quantity:has(button) input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;appearance:none;margin:0;
}
body.woocommerce-cart .woocommerce-cart-form .quantity .plus,
body.woocommerce-cart .woocommerce-cart-form .quantity .minus,
body.woocommerce-cart .woocommerce-cart-form .quantity button,
body.woocommerce-cart .woocommerce-cart-form .quantity input[type=button]{
  display:flex;align-items:center;justify-content:center;
  width:38px;min-height:0;height:auto;flex:0 0 38px;padding:0;margin:0;
  /* Unshaded segments (owner, 2026-08-18: "remove the shading in the - and +
     buttons") — the box border carries the control; hover still answers. */
  border:0;border-radius:0;background:transparent;color:var(--wdkc-jadetext);
  font:700 17px/1 var(--wdkc-ui);letter-spacing:0;text-transform:none;
  cursor:pointer;text-decoration:none;box-shadow:none;
}
body.woocommerce-cart .woocommerce-cart-form .quantity .plus:hover,
body.woocommerce-cart .woocommerce-cart-form .quantity .minus:hover,
body.woocommerce-cart .woocommerce-cart-form .quantity button:hover,
body.woocommerce-cart .woocommerce-cart-form .quantity input[type=button]:hover{
  background:var(--wdkc-jade);color:#fff;
}

/* ============================================================
   8. CART — plain-table fallback.
   Applies when section 7's :has() gate does NOT fire (unexpected
   template, no :has() support). The page then keeps a real table
   but wears the site's type and hairlines instead of Porto's.
   ============================================================ */
body.woocommerce-cart .woocommerce-cart-form table.shop_table{
  border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
  background:var(--wdkc-card);border-collapse:separate;border-spacing:0;overflow:hidden;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table th{
  font:800 10.5px/1.4 var(--wdkc-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--wdkc-mut);background:var(--wdkc-paper);border:0;padding:12px 14px;text-align:left;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table td{
  border:0;border-top:1px solid var(--wdkc-line);padding:14px;vertical-align:middle;
}

/* ============================================================
   9. CART — actions row: coupon (quiet, inline) + update cart.
   Woo puts both inside `tr > td.actions` with colspan. Kept in
   place; only its dressing changes.
   ============================================================ */
body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr:has(td.actions){
  display:block;margin:4px 0 0;
}
body.woocommerce-cart .woocommerce-cart-form td.actions{
  display:flex!important;flex-wrap:wrap;align-items:center;gap:12px;
  padding:16px 0 0!important;border:0!important;border-top:1px solid var(--wdkc-line)!important;
  background:none!important;
}
/* min-width:0 is load-bearing: without it the coupon row's automatic minimum
   size is its input + button at max-content and the row pushes the page into
   horizontal scroll at 320px (measured). */
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon{
  display:flex;align-items:center;gap:8px;flex:1 1 300px;
  min-width:0;max-width:100%;box-sizing:border-box;margin:0;padding:0;border:0;
}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input#coupon_code,
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input.input-text{
  flex:1 1 auto;min-width:0;width:auto;height:46px;box-sizing:border-box;
  padding:0 13px;border:1.5px solid var(--wdkc-line-2);border-radius:var(--wdkc-r-sm);
  background:var(--wdkc-card);color:var(--wdkc-ink);font:400 14px/1 var(--wdkc-ui);box-shadow:none;
}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input#coupon_code:focus,
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input.input-text:focus{border-color:var(--wdkc-jade)}
body.woocommerce-cart .woocommerce-cart-form td.actions .coupon button{flex:0 0 auto}
/* "Update cart" is the quietest thing in the row — it is a correction, not a
   destination. Woo disables it until a qty changes; the disabled skin above
   already handles that state. */
body.woocommerce-cart .woocommerce-cart-form td.actions > button[name=update_cart],
body.woocommerce-cart .woocommerce-cart-form td.actions > input[name=update_cart]{
  margin-left:auto;
}

/* Applied-coupon chips, wherever the theme prints them. */
body.woocommerce-cart .cart-discount th,
body.woocommerce-cart .cart-discount td,
body.woocommerce-cart .cart-discount a{color:var(--wdkc-jadetext)}

/* ============================================================
   10. CART — totals card (the receipt).
   Woo's helpers emit <tr>s, so the table stays a table and is
   re-laid as a two-column grid per row: label left, figure right.
   Snippet 41 injects its own rows here via
   `woocommerce_cart_totals_before_shipping` — they inherit this
   receipt language automatically and are NOT special-cased.
   ============================================================ */
body.woocommerce-cart .cart_totals{
  background:var(--wdkc-card);border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
  padding:20px;box-shadow:0 1px 4px rgba(21,25,23,.05);
}
body.woocommerce-cart .cart_totals > h2{
  font-family:var(--wdkc-display)!important;font-weight:400!important;
  font-size:15px!important;line-height:1.2!important;letter-spacing:.02em;
  text-transform:uppercase;color:var(--wdkc-ink)!important;
  margin:0 0 14px!important;padding:0 0 12px;border-bottom:1px solid var(--wdkc-line);
}
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table > tbody{
  display:block;width:100%;margin:0;border:0;background:none;border-collapse:separate;border-spacing:0;
}
body.woocommerce-cart .cart_totals table.shop_table > tbody > tr{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--wdkc-line);
}
body.woocommerce-cart .cart_totals table.shop_table > tbody > tr:last-child{border-bottom:0;padding-bottom:0}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td{
  display:block;border:0;padding:0;background:none;width:auto;
}
body.woocommerce-cart .cart_totals table.shop_table td::before{content:none!important;display:none!important}
body.woocommerce-cart .cart_totals table.shop_table th{
  font:700 12px/1.4 var(--wdkc-ui);letter-spacing:.03em;color:var(--wdkc-mut);text-align:left;text-transform:none;
}
body.woocommerce-cart .cart_totals table.shop_table td{
  text-align:right;font:400 14px/1.3 var(--wdkc-ui);color:var(--wdkc-ink);
}
body.woocommerce-cart .cart_totals table.shop_table td .amount,
body.woocommerce-cart .cart_totals table.shop_table td bdi{
  font-family:var(--cw-money);font-weight:600;font-size:15px;letter-spacing:-0.01em;color:var(--wdkc-ink);
}
/* A row with no figure (a shipping calculator, a snippet's label-only row)
   must not leave a ragged empty column. */
body.woocommerce-cart .cart_totals table.shop_table > tbody > tr:has(> td:empty){grid-template-columns:1fr}
/* Discounts read jade; fees read ink (never red — a fee is not an error). */
body.woocommerce-cart .cart_totals tr.cart-discount th,
body.woocommerce-cart .cart_totals tr.cart-discount td,
body.woocommerce-cart .cart_totals tr.cart-discount td .amount,
body.woocommerce-cart .cart_totals tr.cart-discount td bdi{color:var(--wdkc-jadetext)}
body.woocommerce-cart .cart_totals tr.fee th{color:var(--wdkc-ink);font-weight:700}
/* The final line: a firm rule above it, then the biggest number on the page. */
body.woocommerce-cart .cart_totals tr.order-total{
  border-bottom:0;border-top:1.5px solid var(--wdkc-ink);margin-top:4px;padding-top:14px;align-items:center;
}
body.woocommerce-cart .cart_totals tr.order-total th{
  font:800 11px/1.2 var(--wdkc-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wdkc-ink);
}
body.woocommerce-cart .cart_totals tr.order-total td,
body.woocommerce-cart .cart_totals tr.order-total td .amount,
body.woocommerce-cart .cart_totals tr.order-total td bdi{
  font-family:var(--cw-money);font-weight:600;font-size:28px;line-height:1.05;letter-spacing:-0.02em;
  color:var(--wdkc-ink);
}
body.woocommerce-cart .cart_totals tr.order-total small,
body.woocommerce-cart .cart_totals tr.order-total .includes_tax{
  display:block;font:400 11px/1.4 var(--wdkc-ui);color:var(--wdkc-mut);letter-spacing:0;
}

body.woocommerce-cart .cart_totals .wc-proceed-to-checkout{padding:16px 0 0;margin:0}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:flex;width:100%;min-height:52px;margin:0;box-sizing:border-box;
}
/* Shipping calculator inside the card — a quiet disclosure, not a form wall. */
body.woocommerce-cart .cart_totals .shipping-calculator-button{
  font:700 12px/1.4 var(--wdkc-ui);color:var(--wdkc-jadetext);text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-cart .cart_totals .shipping-calculator-form{margin:10px 0 0}
body.woocommerce-cart .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;text-align:right}
body.woocommerce-cart .cart_totals ul#shipping_method li{margin:0 0 5px;padding:0;list-style:none}
body.woocommerce-cart .cart_totals ul#shipping_method label{font:400 13px/1.4 var(--wdkc-ui);color:var(--wdkc-ink)}
body.woocommerce-cart .cart_totals ul#shipping_method input[type=radio]{accent-color:var(--wdkc-deep)}

/* ============================================================
   11. CART — cross-sells, tidied (not removed).
   Kept, because they are merchandising the owner controls; just
   held to four across, in the site's heading voice, and never
   allowed to outweigh the totals card.
   ============================================================ */
body.woocommerce-cart .cross-sells{margin:28px 0 0}
body.woocommerce-cart .cross-sells > h2{
  font-family:var(--wdkc-display)!important;font-weight:400!important;
  font-size:15px!important;text-transform:uppercase;letter-spacing:.02em;
  color:var(--wdkc-ink)!important;margin:0 0 14px!important;
  padding:0 0 10px;border-bottom:1px solid var(--wdkc-line);
}
body.woocommerce-cart .cross-sells ul.products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;
  list-style:none;margin:0;padding:0;
}
body.woocommerce-cart .cross-sells ul.products > li.product{
  margin:0!important;padding:0;width:auto!important;float:none!important;list-style:none;
}
/* Never more than four — a cart is not a category page. */
body.woocommerce-cart .cross-sells ul.products > li.product:nth-child(n+5){display:none}

/* ============================================================
   12. CART — empty state.
   ============================================================ */
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .wc-empty-cart-message{
  font:400 15px/1.6 var(--wdkc-ui);color:var(--wdkc-ink);
}
body.woocommerce-cart .return-to-shop{margin:18px 0 0}
body.woocommerce-cart .return-to-shop .button{
  background:var(--wdkc-cta);border-color:var(--wdkc-cta);color:#fff;
  font-family:var(--wdkc-display);font-weight:400;font-size:14px;letter-spacing:.04em;
}
body.woocommerce-cart .return-to-shop .button:hover{background:var(--wdkc-cta-hover);border-color:var(--wdkc-cta-hover);color:#fff}

/* ============================================================
   13. CHECKOUT — page shell (CW-parity rebuild 2026-08-18).
   Porto's REAL markup (measured on staging, not Woo's default):
     form.checkout > #customer_details.row
       > .col-lg-7 > .align-left > .box-content   ← billing fields
       > .col-lg-5 > .align-left
           > .checkout-order-review > .box-content.featured-boxes
               > h3#order_review_heading + #order_review
   The old grid sat on the FORM and assumed #order_review was a
   direct child — everything collapsed into column 1 and the
   review shrank to a ~194px sliver. The grid now sits on
   #customer_details.row over the two bootstrap cols.
   Look = CW's checkout with WDK tokens: grey page ground, white
   rounded cards, jade YOUR ORDER band on the review card.
   NOT sticky: on WDK the review column carries the tip selector,
   the delivery notice AND the payment methods, so it is regularly
   taller than the viewport — sticking it would strand PLACE ORDER
   off-screen.
   ============================================================ */

/* Page ground + measure. #main is Porto's page slab under the header; the
   Elementor boxed container caps content at 1110px — widened to CW's 1270.
   The bare "Checkout" entry title goes: CW's checkout has no page heading,
   the jade YOUR ORDER band and the SHIPPING card headings carry the page. */
body.woocommerce-checkout #main{background:var(--wdkc-paper)}
body.woocommerce-checkout .e-con-boxed > .e-con-inner{max-width:1270px}
body.woocommerce-checkout h2.entry-title,
body.woocommerce-checkout .entry-title{display:none!important}
/* The grey centred "Checkout" was Porto's BREADCRUMB (ul.breadcrumb li.current),
   not the entry title — the whole crumb band goes with it. */
body.woocommerce-checkout .page-top,
body.woocommerce-checkout .breadcrumbs-wrap,
body.woocommerce-checkout ul.breadcrumb{display:none!important}
/* Page 209 embeds the gifts TEMPLATE (heading + subtitle + [wdk_promotions])
   as Elementor element 3d4c7e2; the PHP filter blanks only the shortcode, so
   the section's heading widgets are hidden here. The id is page-209-specific
   and this rule is scoped to checkout — nothing else can match it. */
body.woocommerce-checkout .elementor-element-3d4c7e2{display:none!important}

/* The checkout no longer shows the free-gifts / promotions band: snippet 92's
   [wdk_promotions] is short-circuited on is_checkout() in inc/wdk-cart.php.
   This is the CSS belt-and-braces for a cached page that still carries it. */
body.woocommerce-checkout .wdkp-wrap,
body.woocommerce-checkout .wdkp{display:none!important}

/* Bootstrap gutters off at every width so the cards align with the coupon
   pill and the notices above them. */
body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details.row{
  margin-left:0;margin-right:0;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details.row > [class*="col-"]{
  padding-left:0;padding-right:0;min-width:0;
}

@media (min-width:1024px){
  body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details.row{
    display:grid;grid-template-columns:minmax(0,1fr) 440px;
    column-gap:32px;row-gap:0;align-items:start;
  }
  body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details.row > .col-lg-7{
    grid-column:1;width:100%!important;max-width:none!important;flex:none;float:none!important;
  }
  body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details.row > .col-lg-5{
    grid-column:2;width:100%!important;max-width:none!important;flex:none;float:none!important;
  }
  /* Woo floats its own .col-1/.col-2 at 48%; the card owns the width now. */
  body.woocommerce-checkout #customer_details .col-1,
  body.woocommerce-checkout #customer_details .col-2,
  body.woocommerce-checkout #customer_details > .col2-set{
    width:100%!important;max-width:none!important;float:none!important;margin-left:0;margin-right:0;
  }
}
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2{margin-bottom:22px}

/* LEFT CARD — the shipping/billing fields on a white card. */
body.woocommerce-checkout #customer_details .col-lg-7 > .align-left{
  background:var(--wdkc-card);border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
  box-shadow:0 1px 4px rgba(21,25,23,.05);
  padding:clamp(18px,2.6vw,30px);
}

/* RIGHT CARD — YOUR ORDER. The card is .checkout-order-review; Porto's
   .box-content.featured-boxes inside it carries its own 22px/32px padding and
   a 20px radius, both zeroed so the jade band can run edge to edge. */
body.woocommerce-checkout .checkout-order-review{
  background:var(--wdkc-card);border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
  box-shadow:0 1px 4px rgba(21,25,23,.05);overflow:hidden;
}
body.woocommerce-checkout .checkout-order-review .box-content{
  padding:0!important;margin:0!important;background:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}

/* The jade band. White on --wdkc-cta (#177A52) is 5.3:1. The top radius is
   for the no-wrapper fallback; inside the card overflow:hidden clips it. */
body.woocommerce-checkout #order_review_heading{
  display:block;background:var(--wdkc-cta)!important;color:#fff!important;
  font-family:var(--wdkc-display)!important;font-weight:400!important;
  font-size:13px!important;line-height:1.2!important;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  margin:0!important;padding:15px 18px!important;border:0!important;
  border-radius:var(--wdkc-r) var(--wdkc-r) 0 0;
}
body.woocommerce-checkout .checkout-order-review #order_review_heading{border-radius:0}

/* Woo's two-up form rows (First/Last name) — grid, not floats, so they
   collapse cleanly at 320px. */
@media (min-width:600px){
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;
  }
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row{
    width:auto!important;float:none!important;margin-left:0;margin-right:0;grid-column:span 2;
  }
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-last{
    grid-column:span 1;
  }
}

/* ============================================================
   14. CHECKOUT — the two toggles above the form.
   `.woocommerce-form-login` also exists on my-account; this rule
   is scoped to body.woocommerce-checkout, so the my-account pass
   keeps sole ownership of the login form there.
   ============================================================ */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-login-toggle{margin:0 0 14px}
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login{
  margin:0 0 22px!important;padding:18px!important;
  background:var(--wdkc-mint);border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
}
body.woocommerce-checkout form.checkout_coupon > p:first-child{
  margin:0 0 12px;font:400 13.5px/1.5 var(--wdkc-ui);color:var(--wdkc-ink);
}
@media (min-width:600px){
  body.woocommerce-checkout form.checkout_coupon .form-row{
    display:inline-block;vertical-align:top;margin:0 10px 0 0;
  }
  body.woocommerce-checkout form.checkout_coupon .form-row-first{width:min(280px,60%)}
  body.woocommerce-checkout form.checkout_coupon .form-row-last{width:auto;margin-right:0}
}
/* CHECKOUT COUPON UI — NOT STYLED HERE ANY MORE (2026-08-18).
   This file used to restyle WDK's snippet-owned coupon form (a CLASSLESS
   <form> holding div.coupon-main > input#coupon_code, printed as a sibling
   ABOVE form.checkout) as a CW pill, right-aligned to the 440px order column.
   The owner has since asked for that field to live INSIDE the order card, so
   assets/wdk-checkout.css owns the checkout coupon wholesale — including
   suppressing the snippet's form and printing its own control. Those rules
   were deleted rather than left dormant: both sheets aiming at .coupon-main,
   with the checkout sheet enqueued later, is the silent-shadowing trap this
   theme has already hit twice today.
   The CART's coupon field is a different control — `.cw-promo` in
   woocommerce/cart/cart-totals.php — and is still styled here.  */

body.woocommerce-checkout form.woocommerce-form-login .woocommerce-form-login__submit{margin-right:12px}
body.woocommerce-checkout form.woocommerce-form-login .lost_password a{
  color:var(--wdkc-jadetext);text-decoration:underline;text-underline-offset:3px;
}

/* ============================================================
   15. CHECKOUT — order review table.
   The CLASSIC (shortcode) review table, restyled and NEVER
   restructured. Snippet 20 echoes its insurance <tr> into the
   tfoot on `woocommerce_review_order_before_order_total`, snippet
   41 injects rows before shipping, and snippet 42 filters the
   quantity/price strings inside the tbody cells — all three land
   in this table and are only dressed, never moved.
   ============================================================ */
body.woocommerce-checkout #order_review{
  background:var(--wdkc-card);border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
  padding:18px;box-shadow:0 1px 4px rgba(21,25,23,.05);
}
/* Inside the .checkout-order-review card (§13) the wrapper owns the card skin;
   the review body is just the card's interior. The rule above stays as the
   fallback for a Porto update that drops the wrapper. */
body.woocommerce-checkout .checkout-order-review #order_review{
  background:none;border:0;border-radius:0;box-shadow:none;padding:18px 20px 20px;
}
/* display/width are !important: Porto grids the tbody at calc(100% + 60px)
   (its own edge-to-edge row trick for .box-content's 30px padding, which §13
   zeroed) — without the override the rows run 60px past the card and the ×
   and line total clip at the card edge (measured 458px in a 398px box). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot{
  display:block!important;width:100%!important;min-width:0;max-width:none;
  margin:0!important;border:0;background:none;border-collapse:separate;border-spacing:0;
}
/* Same, restated under the #order_review id in case Porto's tbody rule also
   carries an id (an id + !important tie is decided by specificity). */
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table > thead,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table > tbody,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table > tfoot{
  display:block!important;width:100%!important;margin:0!important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead > tr,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--wdkc-line);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td{
  display:block;border:0;padding:0;background:none;width:auto;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td::before{content:none!important;display:none!important}
/* Any injected cell that spans the row (a snippet's colspan=2) takes the full
   width instead of being squeezed into the label column. */
/* A full-span cell is prose (snippet 20's insurance sentence, a notice), not a
   figure — it must not inherit the tfoot's right alignment. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr > [colspan]{
  grid-column:1 / -1;text-align:left;
}

/* head: one quiet eyebrow line. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead > tr{padding-top:0;border-bottom:1.5px solid var(--wdkc-ink)}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead th{
  font:800 10px/1.4 var(--wdkc-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--wdkc-mut);text-align:left;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead th.product-total{text-align:right}

/* items */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name{
  font:400 13.5px/1.45 var(--wdkc-ui);color:var(--wdkc-ink);min-width:0;overflow-wrap:anywhere;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name img{
  width:44px;height:44px;object-fit:cover;border-radius:6px;background:var(--wdkc-paper);
  float:left;margin:0 10px 4px 0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name .product-quantity,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name strong.product-quantity{
  font:800 12px/1.4 var(--wdkc-ui);color:var(--wdkc-jadetext);white-space:nowrap;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation{
  margin:3px 0 0;font:400 11.5px/1.5 var(--wdkc-ui);color:var(--wdkc-mut);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dt,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dd{
  display:inline;margin:0 6px 0 0;padding:0;font-weight:400;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name dl.variation dd p{display:inline;margin:0}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total{
  text-align:right;white-space:nowrap;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total bdi{
  font-family:var(--wdkc-display);font-weight:400;font-size:14px;letter-spacing:-0.01em;color:var(--wdkc-ink);
}

/* 15b. Porto's CUSTOM review row (measured 2026-08-18): the classic cells are
   replaced by ONE td.product-checkout-wrap holding .product-thumbnail (img
   floated hard right by Porto — the "scrollbar sliver" was a 50px syringe
   photo), .product-content > .product-name (+ empty a.remove-product,
   position-absolute) and .product-price (qty stepper + .product-total) which
   Porto HIDES. Rebuilt as CW's row: thumb left, name beside it, stepper and
   line total shown on their own line. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-checkout-wrap{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:4px 12px;align-items:start;padding-right:22px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-thumbnail{
  grid-column:1;grid-row:1 / span 2;width:48px;position:static;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-thumbnail img{
  float:none!important;display:block;width:48px!important;height:48px!important;
  object-fit:cover;border-radius:8px;background:var(--wdkc-paper);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-content{
  grid-column:2;display:block;min-width:0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-content .product-name{
  font:700 13.5px/1.4 var(--wdkc-ui);color:var(--wdkc-ink);overflow-wrap:anywhere;
}
/* Porto's remove anchor is an EMPTY a.position-absolute; the td above is its
   containing block. Drawn as a quiet × in the row's top-right corner. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table a.remove-product{
  position:absolute;top:0;right:0;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  color:var(--wdkc-mut)!important;font:400 16px/1 var(--wdkc-ui);text-decoration:none;
  border-radius:50%;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table a.remove-product:empty::before{content:"\00d7"}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table a.remove-product:hover{
  color:var(--wdkc-warn)!important;background:var(--wdkc-paper);
}
/* Porto ships the stepper + line total in .product-price and then hides it;
   CW shows both, so it comes back as the row's second line. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price{
  display:flex!important;grid-column:2;align-items:center;justify-content:space-between;gap:10px;
  margin-top:2px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity{
  display:inline-flex!important;align-items:center;gap:0;
  border:1px solid var(--wdkc-line-2);border-radius:999px;background:var(--wdkc-card);
  padding:2px;width:auto;float:none;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity .minus,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity .plus{
  appearance:none;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--wdkc-jadetext);
  font:800 14px/1 var(--wdkc-ui);padding:0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity .minus:hover,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity .plus:hover{
  background:var(--wdkc-jade);color:#fff;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity input.qty{
  width:34px;min-height:26px;border:0!important;background:none!important;box-shadow:none;
  text-align:center;font:800 13px/1 var(--wdkc-ui);color:var(--wdkc-ink);padding:0;margin:0;
  -moz-appearance:textfield;appearance:textfield;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .quantity input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .product-total{text-align:right;white-space:nowrap}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .product-total .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-price .product-total bdi{
  font-family:var(--wdkc-display);font-weight:400;font-size:14px;letter-spacing:-0.01em;color:var(--wdkc-ink);
}

/* foot: the receipt rows (subtotal, snippet 41's rows, shipping, fees,
   discounts, insurance, total). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot th{
  font:700 12px/1.4 var(--wdkc-ui);letter-spacing:.03em;color:var(--wdkc-mut);text-align:left;text-transform:none;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot td{
  text-align:right;font:400 13.5px/1.4 var(--wdkc-ui);color:var(--wdkc-ink);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot td .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot td bdi{
  font-family:var(--cw-money);font-weight:600;font-size:15px;letter-spacing:-0.01em;color:var(--wdkc-ink);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot tr:has(> td:empty){grid-template-columns:1fr}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-discount th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-discount td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-discount td .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-discount td bdi{color:var(--wdkc-jadetext)}
/* Fee rows (Insurance Fee, Tip (…)) — ink, never red. The site's old custom
   CSS styled `tr.fee th`; this is the replacement for it. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.fee th{color:var(--wdkc-ink);font-weight:700}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total{
  border-bottom:0;border-top:1.5px solid var(--wdkc-ink);align-items:center;padding-top:14px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th{
  font:800 11px/1.2 var(--wdkc-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wdkc-ink);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td bdi{
  font-family:var(--cw-money);font-weight:600;font-size:28px;line-height:1.05;letter-spacing:-0.02em;color:var(--wdkc-ink);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total small,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total .includes_tax{
  display:block;font:400 11px/1.4 var(--wdkc-ui);color:var(--wdkc-mut);letter-spacing:0;
}

/* ============================================================
   16. CHECKOUT — SNIPPET-OWNED elements. Restyled, never moved.
   See NOTES-cart-checkout.md §"Snippet-owned" before changing
   anything in this block: the markup is not ours and a snippet
   edit can silently un-match these selectors.
   ============================================================ */

/* 16a. Snippet 20 — the 3% Mail-Order Insurance opt-in row.
   The row is echoed into the review table's tfoot. The site's old custom CSS
   only ever styled `.insurance-checkbox label > a`, so `.insurance-checkbox`
   is the one class that is definitely present; the row is matched three ways
   (the class on the tr, on anything inside a tr, and a bare label+checkbox
   fallback) so it picks up the mint panel however the snippet nests it.
   The checkbox is a REAL checkbox with a session AJAX handler behind it —
   nothing here changes its name, its position or its state. */
/* SPLIT DELIBERATELY, do not re-merge with the :has() twin below. An
   unsupported `:has()` invalidates the WHOLE comma-separated list it appears
   in, so grouping these two would mean a browser without :has() loses the mint
   panel on the insurance row as well — a money element going unstyled because
   of a fallback that was only ever meant to ADD reach. Same reason for the
   text-align pair further down. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.insurance-checkbox{
  background:var(--wdkc-mint);border-bottom-color:var(--wdkc-jade);
  padding:12px;margin:6px 0;border-radius:var(--wdkc-r-sm);
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr:has(.insurance-checkbox){
  background:var(--wdkc-mint);border-bottom-color:var(--wdkc-jade);
  padding:12px;margin:6px 0;border-radius:var(--wdkc-r-sm);
}
/* The label stays a BLOCK, never a flex container: snippet 20's label is a
   run of inline nodes ("3% Mail-Order Insurance", <em>…</em>, <a>read more..</a>)
   and flex would break each of them onto its own column. The checkbox rides
   inline inside the sentence instead. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.insurance-checkbox > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.insurance-checkbox > th{
  text-align:left;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr:has(.insurance-checkbox) > td{
  text-align:left;
}
body.woocommerce-checkout .insurance-checkbox,
body.woocommerce-checkout .insurance-checkbox label{
  display:block;margin:0;text-align:left;
  font:400 12.5px/1.6 var(--wdkc-ui);color:var(--wdkc-ink);cursor:pointer;
}
body.woocommerce-checkout .insurance-checkbox input[type=checkbox]{
  width:17px;height:17px;margin:0 8px 0 0;vertical-align:-3px;
  accent-color:var(--wdkc-deep);cursor:pointer;
}
body.woocommerce-checkout .insurance-checkbox em,
body.woocommerce-checkout .insurance-checkbox i{color:var(--wdkc-mut);font-style:italic}
body.woocommerce-checkout .insurance-checkbox label > a,
body.woocommerce-checkout .insurance-checkbox a{
  color:var(--wdkc-jadetext);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
body.woocommerce-checkout .insurance-checkbox a:hover{color:var(--wdkc-cta-hover)}

/* SPECIFICITY GUARD — do not delete. Snippet 20 does not hand-write its label;
   it calls woocommerce_form_field( 'insurance_fee_option', type => checkbox ),
   and WooCommerce emits that as
       <p class="form-row form-row-insurance-fee">
         <label class="checkbox woocommerce-form__label-for-checkbox">
           <input type="checkbox" …> 3% Mail-Order Insurance <i>…</i> <a>…</a>
   (verified against wc-template-functions.php `case 'checkbox'` + the shared
   $field_container). That means section 6's CHECKOUT FIELD rules also match it:
     `… .woocommerce .form-row > label.checkbox`        (0,4,2)  → inline-flex
     `… .woocommerce .form-row input[type=checkbox]`    (0,4,2)  → margin:1px 0 0
   Both outrank the (0,2,2) rules above, so without this block the label really
   does become the flex row the note warns against — each inline node its own
   column — and the checkbox loses the gap between it and the sentence.
   Restated here at (0,5,2)/(0,5,2) so section 16a wins outright rather than on
   source order. The second selector in each pair is the fallback for a checkout
   rendered without the `.woocommerce` shortcode wrapper. */
body.woocommerce-checkout .woocommerce .insurance-checkbox .form-row > label.checkbox,
body.woocommerce-checkout .insurance-checkbox .form-row > label.checkbox{
  display:block;gap:0;align-items:normal;
  font:400 12.5px/1.6 var(--wdkc-ui);letter-spacing:0;text-transform:none;color:var(--wdkc-ink);
}
body.woocommerce-checkout .woocommerce .insurance-checkbox .form-row input[type=checkbox],
body.woocommerce-checkout .insurance-checkbox .form-row input[type=checkbox]{
  width:17px;height:17px;flex:none;margin:0 8px 0 0;vertical-align:-3px;
  accent-color:var(--wdkc-deep);cursor:pointer;
}
/* The generated wrapper is a paragraph inside a table cell; it must not carry
   section 6's 16px field rhythm inside the mint panel. */
body.woocommerce-checkout .woocommerce .insurance-checkbox .form-row,
body.woocommerce-checkout .insurance-checkbox .form-row{margin:0;padding:0}

/* 16b. Snippet 13 — the delivery-window notice printed inside the review
   column ("Orders placed after 7:30pm…", "Shipped Orders…"). It has no known
   class of its own, so it is reached as "loose prose that is a direct child of
   #order_review" — i.e. anything the snippet echoes between the table and the
   payment box. Kept legible and quiet; it is information, not a warning. */
body.woocommerce-checkout #order_review > p,
body.woocommerce-checkout #order_review > div > p,
body.woocommerce-checkout #order_review > h4,
body.woocommerce-checkout #order_review > h5,
body.woocommerce-checkout #order_review > strong{
  font:400 12.5px/1.6 var(--wdkc-ui);color:var(--wdkc-mut);margin:0 0 8px;
}
body.woocommerce-checkout #order_review > h4,
body.woocommerce-checkout #order_review > h5{
  font:800 11px/1.3 var(--wdkc-ui)!important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wdkc-ink)!important;margin:14px 0 6px!important;
}
body.woocommerce-checkout #order_review > p strong,
body.woocommerce-checkout #order_review > div > p strong{color:var(--wdkc-ink);font-weight:800}

/* 16c. order-tip-woo — the driver-tip selector ("Tips for the drivers…" plus
   12% / 15% / 20% / Edit). It renders INSIDE #order_review, above the table.
   Its class names are not knowable from here, so it is matched by (a) any
   descendant container whose class mentions "tip" and (b) generic controls
   inside #order_review that are not the place-order button. Both are narrow
   because they are confined to #order_review.
   ITS FEE LINES ARE NAMED `Tip (…)` AND UD CLASSIFIES FEES BY NAME — nothing
   here touches labels, values or the plugin's own inputs. */
body.woocommerce-checkout #order_review [class*="tip"]:not(.tips):not([class*="tooltip"]){
  font-family:var(--wdkc-ui);
}
/* The tip block is a DIRECT child of #order_review and sits above the review
   table; without a rule of its own its controls collide with the table's
   "Product / Subtotal" eyebrow. Direct-child only, so it cannot catch a class
   that merely happens to contain "tip" deeper in the table. */
body.woocommerce-checkout #order_review > [class*="tip"]{
  display:block;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--wdkc-line);
}
body.woocommerce-checkout #order_review > [class*="tip"] p,
body.woocommerce-checkout #order_review > [class*="tip"] > label,
body.woocommerce-checkout #order_review > [class*="tip"] h3,
body.woocommerce-checkout #order_review > [class*="tip"] h4{
  font:700 12.5px/1.45 var(--wdkc-ui)!important;letter-spacing:0;text-transform:none;
  color:var(--wdkc-ink)!important;margin:0 0 9px!important;padding:0;border:0;
}
body.woocommerce-checkout #order_review [class*="tip"] a,
body.woocommerce-checkout #order_review [class*="tip"] button,
body.woocommerce-checkout #order_review [class*="tip"] input[type=button],
body.woocommerce-checkout #order_review [class*="tip"] label{
  border-radius:999px;
}
body.woocommerce-checkout #order_review [class*="tip"] a,
body.woocommerce-checkout #order_review [class*="tip"] button:not(#place_order),
body.woocommerce-checkout #order_review [class*="tip"] input[type=button]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 14px;margin:0 6px 6px 0;
  border:1.5px solid var(--wdkc-jade);background:var(--wdkc-mint);color:var(--wdkc-jadetext);
  font:800 12px/1 var(--wdkc-ui);letter-spacing:.04em;text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
body.woocommerce-checkout #order_review [class*="tip"] a:hover,
body.woocommerce-checkout #order_review [class*="tip"] button:not(#place_order):hover,
body.woocommerce-checkout #order_review [class*="tip"] input[type=button]:hover{
  background:var(--wdkc-jade);color:#fff;border-color:var(--wdkc-jade);
}
body.woocommerce-checkout #order_review [class*="tip"] a.selected,
body.woocommerce-checkout #order_review [class*="tip"] a.active,
body.woocommerce-checkout #order_review [class*="tip"] button.selected,
body.woocommerce-checkout #order_review [class*="tip"] button.active{
  background:var(--wdkc-cta);border-color:var(--wdkc-cta);color:#fff;
}
body.woocommerce-checkout #order_review [class*="tip"] input[type=text],
body.woocommerce-checkout #order_review [class*="tip"] input[type=number]{
  height:36px;box-sizing:border-box;padding:0 10px;max-width:120px;
  border:1.5px solid var(--wdkc-line-2);border-radius:var(--wdkc-r-sm);
  background:var(--wdkc-card);color:var(--wdkc-ink);font:400 13px/1 var(--wdkc-ui);
}

/* 16d. conditional-extra-fees-for-woocommerce (PiWeb) — dormant today, but it
   has rendered UI before and the old custom CSS left-aligned it. Same rule,
   re-homed, so nothing regresses if the owner turns an optional fee back on. */
body.woocommerce-checkout .pi-cefw-optional-fees-list{
  text-align:left;font:400 13px/1.6 var(--wdkc-ui);color:var(--wdkc-ink);margin:0 0 10px;
}
body.woocommerce-checkout .pi-cefw-optional-fees-list input[type=checkbox]{accent-color:var(--wdkc-deep)}

/* ============================================================
   17. CHECKOUT — payment methods + place order.
   Two gateways: Cash (cod) and Interac e-Transfer (betpg). The
   betpg .payment_box carries the live e-transfer instructions
   (recipient, security Q/A, memo token) — it is given a white
   card, 13px/1.7 ink and `overflow-wrap:anywhere` so the email
   address and the token cannot overflow or be clipped at 320px.
   ============================================================ */
body.woocommerce-checkout #payment{
  background:var(--wdkc-mint);border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
  padding:16px 18px;margin:16px 0 0;
}
body.woocommerce-checkout #payment > h3,
body.woocommerce-checkout #payment .payment-methods-title{
  font-family:var(--wdkc-display)!important;font-weight:400!important;
  font-size:13px!important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wdkc-ink)!important;margin:0 0 12px!important;
}
body.woocommerce-checkout #payment ul.payment_methods{
  list-style:none;margin:0;padding:0;border:0;
}
/* No border-bottom here, and no `:last-child{border-bottom:0}` — those were
   this section's flat divider-list design, and wdk-checkout.css §4 has since
   turned each li into a bordered CARD. At (1,2,3) these selectors beat the
   card rule's (1,2,2), so the divider leftovers were literally erasing the
   Interac card's bottom border (its 8px corners made the side strokes taper
   into nothing — owner, 2026-08-19: "the interac card looks cut off") and
   repainting the Cash card's bottom hairline in the wrong grey. */
body.woocommerce-checkout #payment ul.payment_methods > li{
  list-style:none;margin:0;padding:11px 0;background:none;
}
body.woocommerce-checkout #payment ul.payment_methods > li > label{
  display:inline-flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  font:800 13px/1.3 var(--wdkc-ui);letter-spacing:.02em;color:var(--wdkc-ink);
}
/* Woo renders the radio as a SIBLING of its label, not inside it, so the gap
   has to come from the input's own margin — an inline-flex `gap` on the label
   never reaches it. */
body.woocommerce-checkout #payment ul.payment_methods > li input[type=radio]{
  width:18px;height:18px;flex:0 0 auto;margin:0 9px 0 0;vertical-align:-4px;
  accent-color:var(--wdkc-deep);cursor:pointer;
}
/* Gateway badge images: the old custom CSS hid betpg's on page 209. Kept, but
   as a size cap rather than a blanket hide — a legitimate badge stays, an
   oversized one can no longer blow the row open. */
body.woocommerce-checkout #payment ul.payment_methods > li > label img{
  max-height:26px;width:auto;margin:0 0 0 6px;vertical-align:middle;
}
body.woocommerce-checkout #payment .payment_box{
  background:var(--wdkc-card)!important;border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r-sm);
  margin:10px 0 2px!important;padding:13px 15px!important;
  font:400 13px/1.7 var(--wdkc-ui)!important;color:var(--wdkc-ink)!important;
  overflow-wrap:anywhere;
}
/* Woo's little pointer triangle on the payment box; the card reads cleanly
   without it and it inherits the wrong colour against mint. */
body.woocommerce-checkout #payment .payment_box::before{display:none!important;content:none!important}
body.woocommerce-checkout #payment .payment_box p{margin:0 0 9px}
body.woocommerce-checkout #payment .payment_box p:last-child{margin-bottom:0}
body.woocommerce-checkout #payment .payment_box strong,
body.woocommerce-checkout #payment .payment_box b{font-weight:800;color:var(--wdkc-ink)}
body.woocommerce-checkout #payment .payment_box a{
  color:var(--wdkc-jadetext);font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-checkout #payment .payment_box ul,
body.woocommerce-checkout #payment .payment_box ol{margin:0 0 9px;padding-left:20px}
body.woocommerce-checkout #payment .payment_box li{margin:0 0 4px}

body.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{
  padding:12px 0 0;font:400 12px/1.6 var(--wdkc-ui);color:var(--wdkc-mut);
}
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text a,
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper a{
  color:var(--wdkc-jadetext);text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-checkout #payment .form-row.place-order{margin:0;padding:14px 0 0}
body.woocommerce-checkout #place_order{
  width:100%;min-height:54px;margin:0;box-sizing:border-box;font-size:15px;
}

/* ============================================================
   18. ORDER-RECEIVED (thank you).
   is_checkout() is true here too, so this sheet loads. These
   rules exist so the page inherits the receipt language instead
   of being half-styled by the rules above; the my-account pass
   owns /my-account/view-order/, which is a different template.
   ============================================================ */
body.woocommerce-checkout .woocommerce-order .woocommerce-thankyou-order-received,
body.woocommerce-checkout .woocommerce-order > p.woocommerce-notice{
  font-family:var(--wdkc-display);font-weight:400;text-transform:uppercase;letter-spacing:-0.01em;
  font-size:clamp(20px,2.6vw,26px);line-height:1.15;color:var(--wdkc-ink);margin:0 0 16px;
}
body.woocommerce-checkout .woocommerce-order ul.woocommerce-order-overview{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  list-style:none;margin:0 0 24px;padding:0;
}
body.woocommerce-checkout .woocommerce-order ul.woocommerce-order-overview > li{
  list-style:none;margin:0;padding:12px 14px;border:1px solid var(--wdkc-line);
  border-radius:var(--wdkc-r-sm);background:var(--wdkc-card);
  font:800 10px/1.4 var(--wdkc-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wdkc-mut);
}
body.woocommerce-checkout .woocommerce-order ul.woocommerce-order-overview > li strong{
  display:block;margin-top:5px;
  font-family:var(--cw-money);font-weight:600;font-size:15px;letter-spacing:-0.01em;
  text-transform:none;color:var(--wdkc-ink);
}
body.woocommerce-checkout .woocommerce-order table.shop_table{
  width:100%;border:1px solid var(--wdkc-line);border-radius:var(--wdkc-r);
  border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--wdkc-card);
}
body.woocommerce-checkout .woocommerce-order table.shop_table th{
  font:800 10.5px/1.4 var(--wdkc-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--wdkc-mut);background:var(--wdkc-paper);border:0;padding:11px 14px;text-align:left;
}
body.woocommerce-checkout .woocommerce-order table.shop_table td{
  border:0;border-top:1px solid var(--wdkc-line);padding:12px 14px;
  font:400 13.5px/1.5 var(--wdkc-ui);color:var(--wdkc-ink);
}
body.woocommerce-checkout .woocommerce-order table.shop_table tfoot th{
  background:none;text-transform:none;letter-spacing:.03em;font-size:12px;color:var(--wdkc-mut);
  border-top:1px solid var(--wdkc-line);
}

/* ============================================================
   19. RESPONSIVE — down to 320px.
   ============================================================ */
@media (max-width:1023px){
  body.woocommerce-cart .cart_totals{margin-top:22px}
  /* Stacked: the review card follows the shipping card. The margin sits on the
     card wrapper; the bare #order_review line is the no-wrapper fallback. */
  body.woocommerce-checkout .checkout-order-review{margin-top:20px}
  body.woocommerce-checkout #customer_details .col-lg-5 > .align-left > #order_review{margin-top:20px}
}
@media (max-width:781px){
  /* Line items restack: thumb spans the block, the money sits on its own
     baseline row. Areas are re-declared, not re-ordered in the DOM. */
  body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr.cart_item,
  body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr.woocommerce-cart-form__cart-item{
    /* third column is `auto`, NOT a fixed 34px: it carries BOTH the remove
       target and the line subtotal, and a fixed 34px pushed the subtotal
       ~3px past the viewport at 375 and ~15px at 320 (measured). */
    grid-template-columns:64px minmax(0,1fr) auto;
    grid-template-areas:
      "thumb name  rm"
      "thumb price price"
      "qty   qty   sub";
    gap:8px 12px;padding:12px;
  }
  body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail img{width:64px;height:64px}
  body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) td.product-subtotal{align-self:center}
  body.woocommerce-cart .woocommerce-cart-form td.actions{flex-direction:column;align-items:stretch}
  /* wrap, so a long "Apply coupon" label drops under the field instead of
     forcing the row wider than the viewport */
  body.woocommerce-cart .woocommerce-cart-form td.actions .coupon{flex:1 1 auto;flex-wrap:wrap}
  body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input#coupon_code,
  body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input.input-text{flex:1 1 160px}
  body.woocommerce-cart .woocommerce-cart-form td.actions > button[name=update_cart],
  body.woocommerce-cart .woocommerce-cart-form td.actions > input[name=update_cart]{margin-left:0;width:100%}
}
@media (max-width:400px){
  body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr.cart_item,
  body.woocommerce-cart .woocommerce-cart-form table.shop_table:has(td.product-quantity) > tbody > tr.woocommerce-cart-form__cart-item{
    grid-template-columns:56px minmax(0,1fr) auto;gap:6px 10px;padding:10px;
  }
  body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail img{width:56px;height:56px}
  body.woocommerce-cart .woocommerce-cart-form .quantity input.qty{width:44px}
  body.woocommerce-cart .woocommerce-cart-form .quantity .plus,
  body.woocommerce-cart .woocommerce-cart-form .quantity .minus,
  body.woocommerce-cart .woocommerce-cart-form .quantity button,
  body.woocommerce-cart .woocommerce-cart-form .quantity input[type=button]{width:34px;flex-basis:34px}
  body.woocommerce-cart .cart_totals,
  body.woocommerce-checkout #order_review{padding:14px}
  body.woocommerce-checkout #payment{padding:13px 14px}
  body.woocommerce-cart .cart_totals tr.order-total td,
  body.woocommerce-cart .cart_totals tr.order-total td .amount,
  body.woocommerce-cart .cart_totals tr.order-total td bdi,
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td,
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td .amount,
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td bdi{font-size:24px}
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name img{width:38px;height:38px}
}

/* ============================================================
   20. MOTION.
   Nothing here animates position or size; the transitions are
   colour only. They still stop on request.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body.woocommerce-cart .woocommerce *,
  body.woocommerce-checkout .woocommerce *{
    transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;
  }
}

/* ============================================================
   CW CART + CHECKOUT PORT (owner, 2026-08-18: "make the cart and
   checkout look like CW, with WDK fonts")

   Lifted from cheap-weed.com's assets/cw-checkout.css and kept
   selector-for-selector so future CW syncs stay diffable. Three
   deliberate changes on the way in:

   1. WDK FONTS AND COLOURS COME FOR FREE. Every rule here reads
      --cw-display / --cw-accent / --cw-ink etc., and wdk-shop.css
      already repoints those tokens at Archivo Black and WDK jade.
      Nothing was hardcoded to CW's green or to Bebas.
   2. 35 rules that target Woodmart-only markup (.wd-checkout-prod*,
      .wd-table-wrapper, .wd-hide) were dropped - Porto never emits
      those elements, so they were dead weight.
   3. .site-content is Woodmart's page wrapper; remapped to Porto's
      .main-content.

   This block sits AFTER the WDK money-layer rules above on purpose.
   Where the two disagree about a shared element this wins on order,
   but nothing here touches the fee rows, the insurance opt-in, the
   tip selector or the minimum-order notices - those selectors do not
   appear in CW's sheet at all, because CW has none of them.
   ============================================================ */
/* ============================================================
   CART PAGE
   ============================================================ */
.cw-cartpage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ck-gap);align-items:start}
/* Anything the hooks print before the form (notices, progress bars) keeps the
   full width; the list and the receipt pair up on the row after them. */
.cw-cartpage > *{grid-column:1/-1;min-width:0}

/* ---- list head: title, count, savings, delete all ---- */
.cw-cl-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.cw-cl-head h2{font-family:var(--cw-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,7vw,42px);line-height:.9;letter-spacing:.01em;margin:0;color:var(--cw-ink)}
.cw-cl-head h2 sup{font:700 14px/1 var(--ck-mono);color:var(--cw-ink);vertical-align:super;margin-left:8px;
  letter-spacing:0}
.cw-saved-chip{font:800 10px/1 var(--cw-ui);letter-spacing:.12em;text-transform:uppercase;
  background:var(--cw-badge);color:var(--cw-badge-ink);padding:6px 9px;border-radius:3px}
/* Enlarged on the cart head at the user's request (2026-08-08): doubled to
   20px, then pulled back halfway when that read too heavy beside CART. Scoped
   to .cw-cl-head so the mini-cart's own chip keeps its docket scale. */
.cw-cl-head .cw-saved-chip{font-size:15px;letter-spacing:.1em;padding:8px 12px;border-radius:4px}
@media (max-width:600px){
  .cw-cl-head .cw-saved-chip{font-size:13px;padding:7px 10px}
}
.cw-cl-clear{margin-left:auto;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font:800 10px/1 var(--cw-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cw-mut);
  padding:7px 2px;transition:color .16s}
.cw-cl-clear:hover{color:#b3261e}
.cw-cl-clear .cw-i{width:14px;height:14px;flex:none}

/* ---- the list ---- */
.cw-cartlist{background:var(--cw-card);border:1px solid var(--cw-line);border-radius:10px;
  box-shadow:0 2px 10px rgba(17,17,16,.05);overflow:hidden}

.cw-ci{display:grid;grid-template-columns:88px minmax(0,1fr) auto;
  grid-template-areas:"img main rm" "img qty sub";
  gap:10px 14px;padding:15px;align-items:start;position:relative}
/* the tear between goods — the flyer's perforation, not a solid rule */
.cw-ci + .cw-ci{border-top:1px dashed var(--cw-line)}

.cw-ci-img{grid-area:img;width:88px;height:88px;border:1px solid var(--cw-line);border-radius:8px;
  overflow:hidden;background:#fff}
.cw-ci-img a,.cw-ci-img img{display:block;width:100%;height:100%}
.cw-ci-img img{object-fit:cover;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cw-ci:hover .cw-ci-img img{transform:scale(1.05)}

.cw-ci-main{grid-area:main;min-width:0}
.cw-ci-brand{display:inline-block;font:800 9px/1 var(--cw-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cw-mut);border:1px solid var(--cw-line);border-radius:99px;padding:5px 9px;margin-bottom:8px}
.cw-ci-nm{display:block;font-family:var(--cw-display);font-weight:400;text-transform:uppercase;
  /* clamp(17px,4.4vw,21px) until 2026-08-18 — owner: "reduce font size of
     cart page product titles". */
  font-size:clamp(14px,3.2vw,17px);line-height:1.12;letter-spacing:.01em;color:var(--cw-ink)!important;
  text-decoration:none;overflow-wrap:anywhere;transition:color .16s}
a.cw-ci-nm:hover{color:var(--cw-accent)!important}

/* variation meta — Woo prints a <dl class="variation"> of dt/dd pairs */
.cw-ci-meta{margin-top:7px}
.cw-ci-meta .variation,.cw-ci-meta dl.variation{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;
  font:600 11.5px/1.5 'Figtree',var(--cw-ui);color:var(--cw-mut)}
.cw-ci-meta .variation dt,.cw-ci-meta .variation dd{margin:0;padding:0;float:none;clear:none;display:inline}
.cw-ci-meta .variation dt{font-weight:400}
.cw-ci-meta .variation dd{color:var(--cw-ink);margin-right:10px}
.cw-ci-meta .variation dd p{margin:0;display:inline}
.cw-ci-meta .backorder_notification{margin:6px 0 0;font:700 11px/1.4 var(--cw-ui);color:var(--cw-sativa)}
.cw-ci-unit{display:block;margin-top:7px;font:400 11.5px/1 var(--ck-mono);color:var(--cw-mut)}
/* Strain + potency on a cart row, same anatomy and colour code as the grid
   card's .cw-tag: the strain word carries the hue, the potency is reference
   data in its own bordered chip. */
.cw-ci-tag{display:flex;align-items:center;flex-wrap:wrap;gap:0 7px;margin:8px 0 0;
  font:800 10.5px/1.3 var(--cw-ui);letter-spacing:.06em;color:var(--cw-mut);
  font-variant-numeric:tabular-nums}
.cw-ci-tag.is-indica{color:var(--cw-indica)}
.cw-ci-tag.is-sativa{color:var(--cw-sativa)}
.cw-ci-tag.is-hybrid{color:var(--cw-hybrid)}
.cw-ci-tag .sub{font:800 10px/1 var(--cw-ui);letter-spacing:.07em;color:var(--cw-mut);
  border:1px solid var(--cw-line);border-radius:3px;padding:3px 5px;white-space:nowrap}

/* ---- stepper ---- */
.cw-ci-qty{grid-area:qty;align-self:end}
.cw-ci-qty .quantity{display:inline-flex!important;align-items:center;border:1px solid var(--cw-line);
  border-radius:99px;overflow:hidden;background:var(--cw-card);height:38px;float:none!important;margin:0!important}
.cw-ci-qty .quantity input[type=button],
.cw-ci-qty .quantity .minus,.cw-ci-qty .quantity .plus{appearance:none;-webkit-appearance:none;border:0;
  background:none;width:36px;height:36px;cursor:pointer;color:var(--cw-ink);
  font:400 17px/1 var(--cw-ui);display:flex;align-items:center;justify-content:center;
  transition:background .14s,color .14s;padding:0;border-radius:0}
.cw-ci-qty .quantity input[type=button]:hover,
.cw-ci-qty .quantity .minus:hover,.cw-ci-qty .quantity .plus:hover{background:var(--cw-soft);color:var(--cw-deep)}
.cw-ci-qty .quantity input.qty{width:44px!important;height:36px;border:0!important;background:none!important;
  text-align:center;font:600 14px/1 'Figtree',var(--cw-ui);font-variant-numeric:tabular-nums;color:var(--cw-ink);
  box-shadow:none!important;padding:0!important;-moz-appearance:textfield}
.cw-ci-qty .quantity input.qty::-webkit-outer-spin-button,
.cw-ci-qty .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Free Gift Coupons rows: the woocommerce_cart_item_quantity filter returns a
   bare "1" (plus a hidden input) instead of a stepper, and that naked text
   node rendered in body type at the column's left edge (owner, 2026-08-18:
   "qty numbers for the free gifts should be the same font as the other
   products and centered"). Gated on the stepper's ABSENCE so rows that have
   one keep their exact position; the type matches the winning input.qty rule
   (the wdkc block in section 7, not the cw one this sits next to). */
.cw-ci-qty:not(:has(.quantity)){
  text-align:center;
  font-family:var(--cw-money);font-weight:600;font-size:15px;color:var(--wdkc-ink);
}

/* ---- line total + remove ---- */
.cw-ci-sub{grid-area:sub;justify-self:end;align-self:end;text-align:right;
  font-family:var(--cw-money);font-weight:600;font-size:22px;line-height:1;color:var(--cw-ink);
  white-space:nowrap}
.cw-ci-sub del,.cw-ci-sub del .amount{display:block;font:600 12px/1 var(--cw-ui)!important;
  color:var(--cw-mut)!important;margin-bottom:5px;text-decoration:line-through}
.cw-ci-sub ins{text-decoration:none;background:none}
/* the site's global sale colour is a bright green that reads as a badge here;
   the line total is ink and the saving is stated in the summary instead */
.cw-ci-sub ins .amount,.cw-ci-sub > .amount,.cw-ci-sub bdi{white-space:nowrap;
  font-family:var(--cw-money)!important;font-weight:600!important;font-size:22px!important;
  color:var(--cw-ink)!important}
/* the struck figure keeps the small muted treatment even though it nests a bdi */
.cw-ci-sub del bdi,.cw-ci-sub del .amount,.cw-ci-sub del span{
  font-family:var(--cw-ui)!important;font-weight:600!important;font-size:12px!important;
  color:var(--cw-mut)!important}
/* unit price line: the site's global sale green would shout louder than the total */
.cw-ci-unit,.cw-ci-unit *{font-family:'Figtree',var(--cw-ui)!important;font-weight:600!important;
  font-size:11.5px!important;color:var(--cw-mut)!important;text-decoration:none}
.cw-ci-unit del,.cw-ci-unit del *{text-decoration:line-through}

.cw-ci-rm{grid-area:rm;justify-self:end}
.cw-ci-rm .remove{display:flex!important;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:6px;color:var(--cw-mut)!important;background:none!important;font-size:0!important;
  text-decoration:none;transition:color .16s,background .16s}
.cw-ci-rm .remove:hover{color:#b3261e!important;background:#fbeceb!important}
.cw-ci-rm .remove .cw-i{width:15px;height:15px}

/* ---- under-list actions ---- */
.cw-cl-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.cw-cl-more{font:800 10.5px/1 var(--cw-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--cw-ink);text-decoration:none;border-bottom:2px solid var(--cw-accent);padding-bottom:3px}
.cw-cl-more:hover{color:var(--cw-accent)}
.cw-cl-actions button[name=update_cart]{appearance:none;border:1px solid var(--cw-line);cursor:pointer;
  background:var(--cw-card);color:var(--cw-ink);border-radius:6px;padding:11px 16px;
  font:800 10.5px/1 var(--cw-ui);letter-spacing:.13em;text-transform:uppercase}
.cw-cl-actions button[name=update_cart]:hover{border-color:var(--cw-accent);color:var(--cw-accent)}

/* ============================================================
   THE RECEIPT CARD — cart summary and checkout order review share it
   ============================================================ */
.cw-summary,
.woocommerce-checkout .checkout-order-review{background:var(--cw-card)!important;
  border:1px solid var(--cw-line)!important;border-radius:10px!important;overflow:hidden;
  box-shadow:0 2px 10px rgba(17,17,16,.06)!important;width:auto!important;
  float:none!important;padding:0!important;margin:0!important}
/* Woodmart wraps the totals in .cart-totals-inner, a second 10px-rounded 3px-bordered
   box — a card inside a card. Flatten it; this card is the only one. */
.cw-summary .cart-totals-inner,
.woocommerce-checkout .checkout-order-review .cart-totals-inner{background:none!important;
  border:0!important;border-radius:0!important;padding:0!important;margin:0!important;box-shadow:none!important}

.cw-sum-tab,
.woocommerce-checkout #order_review_heading{background:var(--cw-accent);color:#fff;margin:0!important;
  padding:11px 18px!important;font-family:var(--cw-ui)!important;font-weight:800!important;font-size:10.5px!important;
  line-height:1.2!important;letter-spacing:.2em!important;text-transform:uppercase!important;border:0!important}
.cw-sum-tab .t{display:block}
.cw-sum-body,
.woocommerce-checkout #order_review{padding:18px}

/* ---- money rows ---- */
.cw-sum-rows,
.woocommerce-checkout .woocommerce-checkout-review-order-table{width:100%;border:0!important;
  border-collapse:collapse!important;border-spacing:0!important;margin:0!important;background:none!important}

/* item count as a strip under the card header (checkout side) */
.cw-order-count{font:400 11px/1 var(--ck-mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--cw-mut);padding:11px 18px 0}
.cw-sum-rows tr,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr{border:0!important;background:none!important}
.cw-sum-rows th,.cw-sum-rows td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{
  border:0!important;background:none!important;padding:8px 0!important;vertical-align:baseline}
.cw-sum-rows th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th{text-align:left;
  font:600 13px/1.4 var(--cw-ui)!important;color:#3d3d37!important;letter-spacing:0!important;
  text-transform:none!important;width:auto}
.cw-sum-rows td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{text-align:right;
  font:600 13px/1.4 'Figtree',var(--cw-ui)!important;font-variant-numeric:tabular-nums;color:var(--cw-ink)!important}
.cw-sum-rows td .amount,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td .amount{
  font-family:'Figtree',var(--cw-ui);font-weight:600;color:var(--cw-ink)}
.cw-sum-rows small,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot small{
  display:block;font:400 10.5px/1.4 var(--cw-ui);color:var(--cw-mut);letter-spacing:0}

/* shipping choices read as a short list, not a paragraph of radios */
.cw-sum-rows .shipping td,
.woocommerce-checkout .woocommerce-shipping-totals td{text-align:right}
.cw-sum-rows ul#shipping_method,
.woocommerce-checkout ul#shipping_method{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:7px;align-items:flex-end}
.cw-sum-rows ul#shipping_method li,
.woocommerce-checkout ul#shipping_method li{margin:0;padding:0;display:flex;align-items:center;gap:7px;
  font:600 12.5px/1.35 var(--cw-ui);color:var(--cw-ink);text-align:right}
.cw-sum-rows ul#shipping_method label,
.woocommerce-checkout ul#shipping_method label{font:600 12.5px/1.35 var(--cw-ui);color:var(--cw-ink);margin:0}
/* The parenthesised cities from wdk_ship_label_two_lines() (inc/wdk-cart.php)
   drop to their own quieter line, so "Free Delivery!" stops clipping. Styled
   by our own class, so it holds in the receipt card AND the plain-table
   fallback; family inherits from whichever label rule applies there. */
ul#shipping_method .wdk-ship-sub{display:block;font-size:11px;font-weight:600;
  line-height:1.45;color:#6f7d75;letter-spacing:0}
.cw-sum-rows ul#shipping_method .amount,
.woocommerce-checkout ul#shipping_method .amount{font-family:var(--ck-mono);font-variant-numeric:tabular-nums}
.woocommerce-shipping-destination,.shipping-calculator-button{font:400 11px/1.5 var(--cw-ui)!important;
  color:var(--cw-mut)!important}
.shipping-calculator-button{color:var(--cw-accent)!important;font-weight:800!important;
  text-decoration:none!important;border-bottom:1px solid currentColor}

/* Snippet 41's free-delivery prompt. cart-totals.php buffers whatever the
   before/after-shipping actions echo and wraps it in this row, because the
   snippet emits a bare <h4> and the browser would otherwise foster-parent it
   out of the table and reprint it above the first row of the card. */
.cw-sum-shipnote td{padding:10px 0 2px!important;text-align:left!important}
.cw-sum-shipnote h4,
.cw-sum-shipnote p{margin:0!important;padding:0!important;
  font:800 10.5px/1.35 var(--cw-ui)!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;color:var(--cw-accent)!important}

/* discounts read as money coming off */
.cw-sum-rows .cart-discount td,
.woocommerce-checkout .cart-discount td{color:var(--cw-accent)!important}
.cw-sum-rows .cart-discount td .amount,
.woocommerce-checkout .cart-discount td .amount{color:var(--cw-accent)}
.cw-sum-rows .cart-discount a,
.woocommerce-checkout .cart-discount a{font:400 10px/1 var(--cw-ui);color:var(--cw-mut);text-decoration:none;
  display:inline-block;margin-left:6px;text-transform:uppercase;letter-spacing:.08em}
.cw-sum-rows .cart-discount a:hover{color:#b3261e}

/* the final line, ruled off — one rule row rather than two cell borders that
   leave a seam at the th/td boundary */
.cw-sum-rule td{padding:12px 0 0!important;border:0!important}
.cw-sum-rule span{display:block;height:1px;background:var(--cw-line)}
.cw-sum-rows .order-total th,.cw-sum-rows .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{
  border:0!important;padding-top:13px!important;padding-bottom:2px!important}
.cw-sum-rows .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th{
  font:800 10.5px/1.3 var(--cw-ui)!important;letter-spacing:.13em!important;text-transform:uppercase!important;
  color:var(--cw-ink)!important;white-space:nowrap!important;vertical-align:middle!important}
.cw-sum-rows .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td{
  font-family:var(--cw-display)!important;font-weight:400!important;font-size:30px!important;
  line-height:1!important;color:var(--cw-ink)!important}
.cw-sum-rows .order-total td .amount,.cw-sum-rows .order-total td bdi,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td .amount,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td bdi{
  font-family:var(--cw-display)!important;font-weight:400!important;font-size:30px!important;
  line-height:1!important;color:var(--cw-ink)!important}
.cw-sum-rows .order-total td small{font-family:var(--cw-ui);font-size:10px}

/* ---- promo field: input with the action set into its end ---- */
.cw-promo,
.woocommerce-checkout form.checkout_coupon{display:flex!important;align-items:center;gap:0;
  margin:16px 0 0!important;padding:4px!important;border:1px solid var(--cw-line)!important;
  border-radius:99px;background:var(--cw-paper);width:100%!important}
.cw-promo input[type=text],
.woocommerce-checkout form.checkout_coupon input[type=text],
.woocommerce-checkout form.checkout_coupon #coupon_code{flex:1;min-width:0;border:0!important;
  background:none!important;box-shadow:none!important;height:38px!important;margin:0!important;
  padding:0 6px 0 14px!important;font:600 13px/1 var(--cw-ui)!important;color:var(--cw-ink)!important;
  width:auto!important}
.cw-promo input::placeholder,
.woocommerce-checkout form.checkout_coupon input::placeholder{color:#77776f;font-weight:500}
/* Focus ring traces the PILL, not the input. §3's generic :focus-visible rule
   draws a 6px-radius rect at +2px offset around the bare <input>; on this
   control that ring cuts across the wrapper's own rounded border instead of
   following it (owner, 2026-08-28: "the green border doesn't match the
   field"). The wrapper takes focus instead, via an INSET shadow so it traces
   the 99px radius and cannot be clipped by .cw-summary's overflow:hidden.
   Same pattern as the checkout coupon row, wdk-checkout.css §5. */
body.woocommerce-cart .cw-promo input[type=text]:focus,
body.woocommerce-cart .cw-promo input[type=text]:focus-visible,
body.woocommerce-checkout form.checkout_coupon input[type=text]:focus,
body.woocommerce-checkout form.checkout_coupon input[type=text]:focus-visible,
body.woocommerce-checkout form.checkout_coupon #coupon_code:focus-visible{
  outline:none!important;box-shadow:none!important}
.cw-promo:focus-within,
.woocommerce-checkout form.checkout_coupon:focus-within{
  border-color:var(--wdkc-deep)!important;
  box-shadow:inset 0 0 0 .5px var(--wdkc-deep)}

.cw-promo-go,
.woocommerce-checkout form.checkout_coupon button{appearance:none;border:0!important;cursor:pointer;flex:none;
  background:var(--cw-ink)!important;color:#fff!important;border-radius:99px!important;
  padding:0 20px!important;height:38px!important;margin:0!important;
  font-family:var(--cw-ui)!important;font-weight:800!important;font-size:10.5px!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;line-height:38px!important;
  transition:background .16s;width:auto!important;min-width:0!important}
.cw-promo-go:hover,
.woocommerce-checkout form.checkout_coupon button:hover{background:var(--cw-accent)!important}
.woocommerce-checkout form.checkout_coupon p{margin:0!important;display:contents}
.woocommerce-checkout .cw-promo-row td{padding:0!important;border:0!important}
/* Woo's "Have a coupon?" toggle is redundant once the field is always open */
.woocommerce-checkout .woocommerce-form-coupon-toggle{display:none!important}

/* ---- primary actions ---- */
.cw-summary .wc-proceed-to-checkout{padding:0!important;margin:16px 0 0!important}
/* Woodmart styles .wc-proceed-to-checkout a.checkout-button with !important, so
   the selector has to out-specify it rather than just shout. */
.cw-summary .wc-proceed-to-checkout a.checkout-button.cw-checkout-btn,
.woocommerce-checkout .place-order button#place_order,
.woocommerce-checkout #place_order{display:block!important;width:100%!important;text-align:center;
  background:var(--cw-accent)!important;color:#fff!important;border:0!important;border-radius:8px!important;
  padding:17px 20px!important;margin:0!important;cursor:pointer;
  font-family:var(--cw-ui)!important;font-weight:800!important;font-size:12.5px!important;line-height:1!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;text-decoration:none;
  transition:background .16s,transform .12s;box-shadow:0 4px 14px rgba(14,124,64,.22)!important}
.cw-summary .wc-proceed-to-checkout a.checkout-button.cw-checkout-btn:hover,
.woocommerce-checkout .place-order button#place_order:hover{background:var(--cw-deep)!important}
.cw-summary .wc-proceed-to-checkout a.checkout-button.cw-checkout-btn:active,
.woocommerce-checkout .place-order button#place_order:active{transform:translateY(1px)}
.cw-sum-note{margin:12px 0 0!important;text-align:center;
  font:400 11px/1.5 var(--cw-ui);color:var(--cw-mut)}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
/* CW's sheet put the two-column grid on `form.checkout`, because Woodmart makes
   #customer_details and .checkout-order-review SIBLINGS under the form. Porto
   does not: it nests the review INSIDE #customer_details > .col-lg-5 (see §13,
   which is where this rebuild's checkout columns actually live). The CW rules
   are therefore removed, not adapted — kept, they gave form.checkout a
   two-column grid with a single child, so the form squeezed into ~888px of the
   1270px measure and the right 382px was a dead gutter (found by the checkout
   session, 2026-08-18). §13 already owns this layout; nothing replaces them. */

/* e-transfer explainer — a pinned note on the bill, not a green box. No edge
   accent: it already has an Anton heading and accent-coloured step numbers, so a
   coloured cap on top of that is one signal too many. */
.cw-paybox{background:var(--cw-card);border:1px solid var(--cw-line);
  border-radius:8px;padding:18px;margin:0 0 var(--ck-gap);
  box-shadow:0 2px 10px rgba(17,17,16,.05)}
.cw-paybox h3{font-family:var(--cw-display);font-weight:400;text-transform:uppercase;
  font-size:19px;line-height:1;letter-spacing:.02em;margin:0 0 8px;color:var(--cw-ink)}
.cw-paybox p{margin:0 0 9px;font:600 13px/1.55 var(--cw-ui);color:#3d3d37}
.cw-paybox ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.cw-paybox li{font:400 12.5px/1.6 var(--cw-ui);color:#4a4a45}
.cw-paybox li::marker{font-family:var(--ck-mono);color:var(--cw-accent);font-weight:700}

/* ---- customer details ---- */
.woocommerce-checkout .customer-details{background:var(--cw-card);border:1px solid var(--cw-line);
  border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(17,17,16,.05)}
.woocommerce-checkout .customer-details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-additional-fields h3{font-family:var(--cw-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em}
.woocommerce-checkout .customer-details h3,
.woocommerce-checkout .woocommerce-additional-fields h3{font-size:22px;line-height:1;margin:0 0 16px;
  color:var(--cw-ink);padding-bottom:12px;border-bottom:1px solid var(--cw-line)}
.woocommerce-checkout .woocommerce-additional-fields{margin-top:24px;padding-top:4px}

.woocommerce-checkout .form-row{margin:0 0 15px!important;padding:0!important}
.woocommerce-checkout .form-row label{display:block;font:800 9.5px/1.3 var(--cw-ui)!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--cw-mut)!important;
  margin:0 0 7px!important}
.woocommerce-checkout .form-row label .required{color:var(--cw-accent)!important;text-decoration:none}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout .form-row select{width:100%;background:var(--cw-paper)!important;
  border:1px solid var(--cw-line)!important;border-radius:7px!important;box-shadow:none!important;
  min-height:46px!important;height:auto!important;padding:12px 14px!important;
  font:600 14px/1.4 var(--cw-ui)!important;color:var(--cw-ink)!important;
  transition:border-color .16s,background .16s}
.woocommerce-checkout .form-row textarea{min-height:104px!important;line-height:1.6!important;resize:vertical}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus{border-color:var(--cw-accent)!important;background:#fff!important;
  outline:none}
.woocommerce-checkout .form-row input::placeholder,
.woocommerce-checkout .form-row textarea::placeholder{color:#8d8d85;font-weight:500}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select{border-color:#b3261e!important}
.woocommerce-checkout .select2-container--default .select2-selection--single{border-radius:7px!important;
  border:1px solid var(--cw-line)!important;background:var(--cw-paper)!important;height:46px!important}
.woocommerce-checkout .select2-container--default .select2-selection--single
  .select2-selection__rendered{line-height:44px!important;padding-left:14px!important;
  font:600 14px/44px var(--cw-ui)!important;color:var(--cw-ink)!important}
.woocommerce-checkout .select2-container--default .select2-selection--single
  .select2-selection__arrow{height:44px!important}

/* the two-up name row the reference implies, without touching Woo's classes */
@media (min-width:600px){
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{display:grid;
    grid-template-columns:1fr 1fr;gap:0 16px}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row{grid-column:1/-1}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_first_name_field,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > #shipping_first_name_field{grid-column:1}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_last_name_field,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > #shipping_last_name_field{grid-column:2}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_postcode_field{grid-column:1}
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_phone_field{grid-column:2}
}

/* Checkboxes in the form (newsletter opt-in, terms, shipping insurance).
   NOT display:flex — these labels contain inline <b>/<a> runs, and flexing the
   label turns every run into its own column, which shredded the insurance
   paragraph into vertical strips. Inline flow with a hanging indent instead. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox{display:block!important;
  font:600 11.5px/1.55 var(--cw-ui)!important;letter-spacing:.01em!important;
  text-transform:none!important;color:#3d3d37!important;margin:0!important}
.woocommerce-checkout .woocommerce-form__label-for-checkbox b,
.woocommerce-checkout label.checkbox b{font-weight:800}
.woocommerce-checkout input[type=checkbox]{width:17px;height:17px;accent-color:var(--cw-accent);
  margin:0 8px 0 0;vertical-align:-3px}

/* ---- order review line items ---- */
.woocommerce-checkout .woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item{border:0!important}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item td{
  border:0!important;padding:13px 0!important;background:none!important}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item + tr.cart_item td{
  border-top:1px dashed var(--cw-line)!important}
.woocommerce-checkout .cart-product-label,
.woocommerce-checkout .cart-product-label-link{font-family:var(--cw-display)!important;font-weight:400!important;
  text-transform:uppercase;font-size:14.5px!important;line-height:1.12!important;letter-spacing:.01em;
  color:var(--cw-ink)!important;text-decoration:none;overflow-wrap:anywhere}
.woocommerce-checkout .cart-product-label-link:hover .cart-product-label{color:var(--cw-accent)!important}

/* Insurance / gift / shipping notes plugins drop into the review card — paper
   panels on the same hairline as everything else, not tinted boxes. */
.woocommerce-checkout #order_review .wc-fgc-cart-item,
.woocommerce-checkout #order_review td > .woocommerce-shipping-may-be-available-html{
  font:400 11.5px/1.55 var(--cw-ui)!important;color:var(--cw-mut)!important}
/* The insurance opt-in arrives as tr.insurance-checkbox > th > .form-row; it is a
   paper panel on the same hairline as the rest, not a tinted box. */
.woocommerce-checkout #order_review tr.insurance-checkbox th,
.woocommerce-checkout #order_review tr.insurance-checkbox td{background:var(--cw-paper)!important;
  border:1px solid var(--cw-line)!important;border-radius:7px!important;padding:12px 14px!important;
  margin:0!important}
.woocommerce-checkout #order_review tr.insurance-checkbox .form-row,
.woocommerce-checkout #order_review tr.insurance-checkbox span,
.woocommerce-checkout #order_review tr.insurance-checkbox b{background:none!important}
.woocommerce-checkout #order_review tr.insurance-checkbox .form-row{margin:0!important;padding:0!important}
.woocommerce-checkout #order_review tr.insurance-checkbox label.checkbox{background:none!important;
  border:0!important;padding:0!important;font:400 11.5px/1.6 var(--cw-ui)!important;color:#4a4a45!important}
.woocommerce-checkout #order_review label.checkbox a{color:var(--cw-accent)!important;font-weight:700}

/* ---- payment ---- */
.woocommerce-checkout #payment{background:none!important;border:0!important;border-radius:0!important;
  margin:16px 0 0!important;padding:16px 0 0!important;border-top:1px solid var(--cw-line)!important}
.woocommerce-checkout #payment ul.payment_methods{margin:0!important;padding:0!important;border:0!important;
  list-style:none;display:flex;flex-direction:column;gap:10px}
.woocommerce-checkout #payment li.wc_payment_method{margin:0;padding:0}
.woocommerce-checkout #payment li.wc_payment_method > label{display:flex!important;align-items:center;gap:9px;
  font:800 11px/1.3 var(--cw-ui)!important;letter-spacing:.12em!important;text-transform:uppercase!important;
  color:var(--cw-ink)!important;margin:0!important;cursor:pointer}
.woocommerce-checkout #payment li.wc_payment_method input[type=radio]{width:17px;height:17px;
  accent-color:var(--cw-accent);margin:0}
.woocommerce-checkout #payment .payment_box{background:var(--cw-paper)!important;border:1px solid var(--cw-line)!important;
  border-radius:7px!important;padding:12px 14px!important;margin:9px 0 0!important;
  font:400 12px/1.6 var(--cw-ui)!important;color:#4a4a45!important}
.woocommerce-checkout #payment .payment_box::before,
.woocommerce-checkout #payment .payment_box::after{display:none!important}
.woocommerce-checkout #payment .payment_box p{margin:0!important}
.woocommerce-checkout .woocommerce-privacy-policy-text p{font:400 11px/1.55 var(--cw-ui)!important;
  color:var(--cw-mut)!important;margin:14px 0 0!important}
.woocommerce-checkout .woocommerce-privacy-policy-text a{color:var(--cw-accent)!important;font-weight:700}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:12px 0 16px!important}
.woocommerce-checkout .validate-required .woocommerce-terms-and-conditions-checkbox-text{
  font:600 11.5px/1.5 var(--cw-ui)!important;color:#3d3d37!important;letter-spacing:0!important;
  text-transform:none!important}
.woocommerce-checkout .place-order{padding:0!important;margin:0!important}

/* ============================================================
   TWO COLUMNS — the goods and the money side by side
   ============================================================ */
@media (min-width:1025px){
  .cw-cartpage{grid-template-columns:minmax(0,1fr) 372px}
  .cw-cartpage > form.woocommerce-cart-form{grid-column:1}
  .cw-cartpage > .cart-totals-section{grid-column:2;position:sticky;top:104px}
  .cw-cartpage > .cw-cart-xsell{grid-column:1/-1}

  /* CW's desktop checkout columns removed with the grid they belonged to — see
     the note above the CHECKOUT PAGE block. `> .checkout-order-review` cannot
     match on Porto, so this only ever reserved an empty 382px track. */

  .cw-ci{grid-template-columns:104px minmax(0,1fr) 150px 132px 44px;
    grid-template-areas:"img main qty sub rm";gap:16px;padding:17px 18px;align-items:center}
  .cw-ci-img{width:104px;height:104px}
  .cw-ci-qty{align-self:center;justify-self:start}
  .cw-ci-sub{align-self:center}
  .cw-ci-rm{align-self:center}
  .cw-cl-head{margin-bottom:16px}
  .cw-sum-body,.woocommerce-checkout #order_review{padding:20px}
  .woocommerce-checkout .customer-details{padding:26px}
}

/* Woodmart's own cart/checkout column widths must not fight the grid. */
.cw-cartpage > .cart-table-section,
.cw-cartpage > form.woocommerce-cart-form,
.cw-cartpage > .cart-totals-section,
.woocommerce-checkout .checkout > .customer-details,
.woocommerce-checkout .checkout > .checkout-order-review{width:auto!important;float:none!important;
  max-width:none!important;margin-left:0!important;margin-right:0!important}

@media (prefers-reduced-motion:reduce){
  .cw-ci-img img,.cw-checkout-btn,.woocommerce-checkout #place_order{transition:none}
  .cw-ci:hover .cw-ci-img img{transform:none}
}

/* ============================================================
   CW-R4-CHECKOUT — user-reported checkout fixes (2026-08-07)
   Re-applied after a whole-file deploy dropped them. If you rebuild this
   file, keep this block or fold it into the rules above.
   ============================================================ */

/* The province select read as indented next to every other field: the shared
   field rule pads the select2 container 14px AND select2 pads its own
   .__rendered another 14px, so the value sat at 29px while inputs sit at 15.
   The container also kept 12px of vertical padding under a fixed 46px height,
   pushing the value off-centre. Container owns the box, the span owns nothing. */
.woocommerce-checkout .form-row .select2-container--default .select2-selection--single{
  padding:0 14px!important;display:flex!important;align-items:center}
.woocommerce-checkout .form-row .select2-container--default .select2-selection--single
  .select2-selection__rendered{padding:0 24px 0 0!important;margin:0!important;
  line-height:44px!important;width:100%}
.woocommerce-checkout .form-row .select2-container--default .select2-selection--single
  .select2-selection__arrow{right:10px!important}
/* the bare <select> before select2 boots, so nothing jumps on init */
.woocommerce-checkout .form-row select{padding:0 14px!important;height:46px!important}

/* The payment block and PLACE ORDER ran flush to the card's edges — copy and
   button touching the page. Give them the inset the item table has, plus a
   real foot. #order_review itself must stay padding-free: the green YOUR ORDER
   strip above it is full-bleed. */
.woocommerce-checkout #order_review > #payment{padding:16px 18px 20px!important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:12px 0 14px!important}

/* Gateway logos arrive at native size (Interac is 95x40) and out-shout the
   method name beside them. */
.woocommerce-checkout #payment li.wc_payment_method > label img{
  max-height:26px!important;width:auto!important;max-width:90px!important;
  margin:0 0 0 2px!important;display:inline-block;vertical-align:middle}
.cw-ci-qty .quantity input.qty{width:46px!important;font-size:18px!important}

/* ============================================================
   FREE SHIPPING PUNCH CARD  (user, 2026-08-08)
   Same component as the mini-cart, so the indicator does not change
   shape between the panel, the cart and the checkout.
   ============================================================ */
.woocommerce-cart .cw-ship,
.woocommerce-checkout .cw-ship{margin:0 0 14px;padding:0}
.woocommerce-cart .cw-ship-lbl,
.woocommerce-checkout .cw-ship-lbl{display:block;margin:0 0 6px;
  font:400 10.5px/1 var(--fl-mono,ui-monospace,Menlo,monospace);letter-spacing:.11em;
  text-transform:uppercase;color:var(--cw-mut)}
.woocommerce-cart .cw-ship.is-done .cw-ship-lbl,
.woocommerce-checkout .cw-ship.is-done .cw-ship-lbl{color:var(--cw-deep);font-weight:700}
.woocommerce-cart .cw-ship-row,
.woocommerce-checkout .cw-ship-row{display:flex;align-items:center;gap:10px}
.woocommerce-cart .cw-ship-ticks,
.woocommerce-checkout .cw-ship-ticks{display:flex;gap:4px;flex:none}
.woocommerce-cart .cw-ship-ticks i,
.woocommerce-checkout .cw-ship-ticks i{width:22px;height:8px;border-radius:1px;
  background:var(--cw-line);transition:background .35s cubic-bezier(.16,1,.3,1)}
.woocommerce-cart .cw-ship-ticks i.on,
.woocommerce-checkout .cw-ship-ticks i.on{background:var(--cw-accent)}
.woocommerce-cart .cw-ship-togo,
.woocommerce-checkout .cw-ship-togo{font:400 11.5px/1 var(--fl-mono,ui-monospace,Menlo,monospace);
  letter-spacing:.04em;color:var(--cw-mut);white-space:nowrap}
/* The checkout one rides in a table row of its own inside the review card. */
.woocommerce-checkout tr.cw-ship-row-wrap td{border:0!important;padding:4px 0 12px!important;
  background:none!important}
@media (max-width:768px){
  .woocommerce-cart .cw-ship-ticks i,
  .woocommerce-checkout .cw-ship-ticks i{width:18px}
}

/* ============================================================
   DELETE ALL ON THE HEADING LINE  (user, 2026-08-08)
   At phone width "CART 07" plus the savings chip filled the row, so the
   clear link wrapped and spent a whole band of the screen on the one
   action almost nobody takes. It keeps its place at the right of the
   heading and loses the words: the bin is unambiguous, and the label
   stays in the accessibility tree for anyone not reading pixels.
   ============================================================ */
@media (max-width:600px){
  .cw-cl-head{flex-wrap:nowrap;gap:10px}
  .cw-cl-head h2{flex:0 0 auto}
  .cw-cl-head .cw-saved-chip{min-width:0;font-size:11.5px;padding:6px 8px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cw-cl-clear{flex:0 0 auto;padding:7px 0;gap:0}
  .cw-cl-clear .cw-i{width:19px;height:19px}
  .cw-cl-clear span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* Subtotal carries its own discount: what it would have been, what it is,
   and the difference as a chip (user, 2026-08-08). */
.cart_totals .cw-sub-was,
.woocommerce-checkout-review-order-table .cw-sub-was{font:600 12px/1 var(--cw-ui);color:var(--cw-mut);
  text-decoration:line-through;margin-right:7px}
.cart_totals .cw-sub-off,
.woocommerce-checkout-review-order-table .cw-sub-off{display:inline-block;margin-left:8px;font:800 10px/1 var(--cw-ui);
  letter-spacing:.06em;background:var(--cw-badge);color:var(--cw-badge-ink);
  padding:4px 6px;border-radius:2px;vertical-align:2px}
@media (max-width:600px){
  .cart_totals .cw-sub-was,
  .woocommerce-checkout-review-order-table .cw-sub-was{font-size:11px;margin-right:6px}
  .cart_totals .cw-sub-off,
  .woocommerce-checkout-review-order-table .cw-sub-off{margin-left:6px;font-size:9px;padding:3px 5px}
}

/* ============================================================
   CART LINE TRIM  (user, 2026-08-08)
   ============================================================ */

/* --- the bin belongs on the title's line ---
   The row is a grid of "img main rm", and .cw-ci-main leads with the brand
   chip on branded rows, so the bin lined up with the brand instead of the
   product. :has() lets the offset apply only where a chip exists; rows
   without one were already correct and stay untouched. */
.cw-ci:has(.cw-ci-brand) .cw-ci-rm{margin-top:20px}

/* --- photos centred, not cropped ---
   object-fit:cover filled the 88px square by cutting the edges off, which
   on a packaged product reads as a badly framed photo. contain shows the
   whole thing and centres it; the padding keeps it off the border. */
.cw-ci-img{display:flex;align-items:center;justify-content:center;padding:5px;background:#fff}
.cw-ci-img a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cw-ci-img img{width:100%;height:100%;object-fit:contain;object-position:center}

/* --- a smaller stepper ---
   120x38 was the widest control in the row and competed with the price. */
.cw-ci-qty .quantity{height:34px}
.cw-ci-qty .quantity input[type=button],
.cw-ci-qty .quantity .minus,.cw-ci-qty .quantity .plus{width:30px;height:32px;font-size:15px}
.cw-ci-qty .quantity input.qty{width:36px!important;height:32px;font-size:15px!important}
.woocommerce-cart .cw-ci-qty .quantity input.qty,
.woocommerce-cart input.input-text.qty{font-size:18px!important}

/* Order total, both pages: 30 -> 37. */
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-cart .cart_totals .order-total bdi,
.woocommerce-cart .cart_totals .order-total strong,
.cw-sum-rows .order-total td,
.cw-sum-rows .order-total td .amount,
.cw-sum-rows .order-total td bdi,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td .amount,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td bdi{
  font-family:var(--cw-money)!important;font-size:37px!important;font-weight:600!important;
  font-variant-numeric:tabular-nums}

/* The rows above the total: 13 -> 16. */
.cw-sum-rows td,.cw-sum-rows td .amount,.cw-sum-rows td bdi,
.woocommerce-cart .cart_totals .amount,
.woocommerce-cart .cart_totals bdi{font-family:var(--cw-money)!important;font-size:16px!important;
  font-weight:400!important;font-variant-numeric:tabular-nums}
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-cart .cart_totals .order-total bdi{font-size:37px!important}

/* ============================================================
   STRUCK PRICES STAY SMALL  (regression fix, 2026-08-11)
   ============================================================
   The Bebas size bumps above were written as "every .amount in this block",
   which is also true of the .amount inside a <del>. So the was-price inherited
   the full 27px/37px treatment and landed on top of the price it was supposed
   to sit quietly above — two figures overlapping in the same space.

   The was-price was never meant to be display type: it is a reference number,
   and the whole point of the layout is that there is no question which figure
   you pay. Restated here, after the rules that broke it, with the extra class
   needed to outrank them. */
.woocommerce-cart .cw-ci-sub del,
.woocommerce-cart .cw-ci-sub del .amount,
.woocommerce-cart .cw-ci-sub del bdi,
.woocommerce-cart .cw-ci-sub del span{font:600 12px/1 var(--cw-ui)!important;
  color:var(--cw-mut)!important;letter-spacing:0!important}

.cart-widget-side .cart-info span.quantity del,
.cart-widget-side .cart-info span.quantity del .amount,
.cart-widget-side .cart-info span.quantity del bdi{font:600 12.5px/1 var(--cw-ui)!important;
  color:var(--cw-mut)!important;letter-spacing:0!important}

/* Display type needs its own leading. These figures sit inside containers whose
   line-height was set for 12px text, so a 32-37px number had nowhere to stand
   and collided with the line above it. */
.cart-widget-side .cart-info .amount,
.cart-widget-side .cart-info span.quantity ins .amount,
.woocommerce-cart .cw-ci-sub,
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-checkout .shop_table .order-total .amount,
.cw-sum-rows .order-total td{line-height:1.06!important}

/* The currency mark keeps its smaller size but drops the vertical nudge: on a
   face with a flat baseline it pushed the $ off the line the digits stand on. */
.woocommerce-Price-currencySymbol{vertical-align:baseline}

/* Same story on the cart page and checkout: the discounted figure sits in <ins>
   or beside a <del>, and those rows were the ones still on the old face. */
.woocommerce-cart .cw-ci-sub ins,
.woocommerce-cart .cw-ci-sub ins .amount,
.woocommerce-cart .cw-ci-sub ins bdi{font-family:var(--cw-money)!important;
  font-size:27px!important;line-height:1.06!important;text-decoration:none}


/* ============================================================
   ORDER RECEIVED  (user-approved 2026-08-13)
   Same anatomy as the cart: paper ground, white cards on hairlines, Anton for
   the figures that matter, a green strip on the receipt, dashed tears between
   goods. The judgement call is the ORDER: on this store the order is not paid
   when it lands here, so the payment step is the page and the thank-you is the
   caption. Markup comes from woocommerce/checkout/thankyou.php in this theme.
   Scoped to .cw-or, which that template owns, rather than a body class.
   ============================================================ */

/* --ck-mono is declared on .cw-cartpage / .checkout / .cw-paybox, none of which
   wrap this page — so every `font: ... var(--ck-mono)` shorthand here resolved
   to an invalid value and the WHOLE shorthand was dropped, taking the size and
   weight with it. The recipient name and email came out 16px system sans while
   everything around them was right (user, 2026-08-13). The token belongs on the
   element that uses it. */
.cw-or{--ck-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  max-width:1270px;margin-inline:auto}

/* ---- head ---- */
.cw-or-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.cw-or-head h1{font-family:var(--cw-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,7vw,44px);line-height:.9;letter-spacing:.01em;margin:0;color:var(--cw-ink)}
.cw-or-num{font:700 14px/1 var(--ck-mono);color:var(--cw-ink);vertical-align:super;letter-spacing:0}
.cw-or-chip{font:800 10px/1 var(--cw-ui);letter-spacing:.12em;text-transform:uppercase;
  background:var(--cw-badge);color:var(--cw-badge-ink);padding:8px 12px;border-radius:4px}
.cw-or-sub{color:#4a4a45;font-size:14px;line-height:1.6;margin:0 0 22px;max-width:62ch}

.cw-or-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ck-gap,26px);align-items:start}
@media (min-width:992px){.cw-or-grid{grid-template-columns:minmax(0,1fr) 400px}}
.cw-or-main{min-width:0}

/* ---- shared card ---- */
.cw-or-card{background:var(--cw-card);border:1px solid var(--cw-line);border-radius:10px;
  box-shadow:0 2px 10px rgba(17,17,16,.05);overflow:hidden}
.cw-or-main > .cw-or-card + .cw-or-card{margin-top:var(--ck-gap,26px)}
.cw-or-tab{background:var(--cw-accent);color:#fff;font:800 11px/1 var(--cw-ui);
  letter-spacing:.16em;text-transform:uppercase;padding:14px 18px}
.cw-or-tab-ink{background:var(--cw-ink)}
.cw-or-card-body{padding:18px}

/* ---- the step that still has to happen ---- */
.cw-or-lead{font:500 13.5px/1.6 var(--cw-ui);color:#4a4a45;margin:0 0 16px}
.cw-or-lead b{color:var(--cw-ink);font-weight:700}
.cw-or-fields{display:grid;gap:1px;background:var(--cw-line);border:1px solid var(--cw-line);
  border-radius:8px;overflow:hidden;margin:0}
.cw-or-pf{display:grid;grid-template-columns:minmax(120px,150px) minmax(0,1fr);gap:12px;
  background:#fff;padding:12px 14px;align-items:center;margin:0}
.cw-or-pf dt{font:800 9.5px/1.3 var(--cw-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cw-mut);margin:0}
.cw-or-pf dd{margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:600 14px/1.35 var(--ck-mono);color:var(--cw-ink);overflow-wrap:anywhere}
/* Memo and amount are the two people get wrong, so they carry a little more
   weight — but no fill. A green tint read as a status colour on a page that
   already uses green for "done" (user, 2026-08-13). */
.cw-or-pf.is-key dd{font-weight:700}
.cw-or-pf .v{min-width:0}
.cw-or-copy{border:1px solid var(--cw-line);background:#fff;border-radius:99px;cursor:pointer;
  font:800 9px/1 var(--cw-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--cw-mut);
  padding:7px 11px;white-space:nowrap;flex:none;transition:color .16s,border-color .16s,background .16s}
.cw-or-copy:hover{color:var(--cw-ink);border-color:var(--cw-ink)}
.cw-or-copy.is-done{color:#fff;background:var(--cw-accent);border-color:var(--cw-accent)}

/* No side accent bar: the storefront marks urgency with a stamp and hairline
   cards, never a coloured rule down one edge. */
.cw-or-warn{margin:16px 0 0;border:1px solid rgba(165,32,22,.3);background:#fdf3f2;
  padding:13px 15px;border-radius:6px;font:500 12.5px/1.55 var(--cw-ui);color:#5f2b27}
.cw-or-warn b{display:block;font:800 9.5px/1 var(--cw-ui);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cw-warn);margin-bottom:7px}
.cw-or-fine{margin:14px 0 0}
.cw-or-fine p{font:500 12px/1.55 var(--cw-ui);color:var(--cw-mut);margin:0 0 7px}
.cw-or-fine p:last-child{margin-bottom:0}
.cw-or-fine a{color:var(--cw-accent)}
.cw-or-hooked{margin-top:10px}

/* ---- goods ---- */
.cw-or-goods .cw-or-card-body{padding:4px 18px 14px}
.cw-or-line{display:flex;justify-content:space-between;gap:14px;padding:14px 0}
.cw-or-line + .cw-or-line{border-top:1px dashed var(--cw-line)}
.cw-or-line-main{min-width:0}
.cw-or-line-nm{display:block;font-family:var(--cw-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(16px,4vw,19px);line-height:1.05;letter-spacing:.01em;color:var(--cw-ink)!important;
  text-decoration:none;overflow-wrap:anywhere;transition:color .16s}
a.cw-or-line-nm:hover{color:var(--cw-accent)!important}
.cw-or-line-qty{display:block;font:700 10px/1 var(--cw-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cw-mut);margin-top:6px}
.cw-or-line .wc-item-meta,.cw-or-line .variation{margin:7px 0 0;font:500 12px/1.5 var(--cw-ui);
  color:var(--cw-mut);padding:0;list-style:none}
.cw-or-line .wc-item-meta p,.cw-or-line .variation p{margin:0;display:inline}
.cw-or-line-amt{font-family:var(--cw-display);font-weight:400;font-size:20px;white-space:nowrap;
  color:var(--cw-ink)}

/* ---- receipt ---- */
.cw-or-rows{width:100%;border-collapse:collapse;margin:0}
.cw-or-rows th,.cw-or-rows td{padding:9px 0;text-align:left;border:0!important;vertical-align:baseline;
  background:none!important}
.cw-or-rows th{font:800 10px/1.3 var(--cw-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--cw-mut)}
.cw-or-rows td{text-align:right;font:600 14px/1.3 var(--ck-mono);color:var(--cw-ink)}
.cw-or-rows td .amount,.cw-or-rows td bdi{font-family:inherit;font-size:inherit;font-weight:inherit}
.cw-or-rows small{display:block;font:500 11px/1.4 var(--cw-ui);color:var(--cw-mut);margin-top:3px}
.cw-or-rows tr.tot th,.cw-or-rows tr.tot td{border-top:1px solid var(--cw-line)!important;padding-top:15px}
.cw-or-rows tr.tot th{font-size:11px;color:var(--cw-ink)}
.cw-or-rows tr.tot td,.cw-or-rows tr.tot td .amount,.cw-or-rows tr.tot td bdi{
  font-family:var(--cw-display);font-weight:400;font-size:30px;line-height:1}
.cw-or-rows tr.tot .woocommerce-Price-currencySymbol{font-size:15px;vertical-align:super}

.cw-or-cta,.cw-or-ghost{display:block;text-align:center;text-decoration:none;
  font:800 11px/1 var(--cw-ui);letter-spacing:.16em;text-transform:uppercase;transition:background .16s,color .16s}
.cw-or-cta{margin-top:16px;background:var(--cw-accent);color:#fff!important;border-radius:99px;padding:15px 20px}
.cw-or-cta:hover{background:var(--cw-deep)}
.cw-or-ghost{margin-top:9px;border:1.5px solid var(--cw-ink);color:var(--cw-ink)!important;
  border-radius:99px;padding:13px 20px}
.cw-or-ghost:hover{background:var(--cw-ink);color:#fff!important}

/* ---- what happens next ---- */
.cw-or-steps{display:grid;gap:1px;background:var(--cw-line);border-top:1px solid var(--cw-line);
  margin:var(--ck-gap,26px) 0 0;padding:0;list-style:none}
@media (min-width:700px){.cw-or-steps{grid-template-columns:repeat(3,1fr)}}
.cw-or-step{background:var(--cw-paper);padding:18px 16px;margin:0}
.cw-or-step i{display:block;font-family:var(--cw-display);font-style:normal;font-size:22px;line-height:1;
  color:var(--cw-ink);margin-bottom:9px}
.cw-or-step b{display:block;font:800 10px/1 var(--cw-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cw-accent);margin-bottom:8px}
.cw-or-step span{font:500 12.5px/1.55 var(--cw-ui);color:#4a4a45}

@media (max-width:600px){
  .cw-or-card-body{padding:16px}
  .cw-or-goods .cw-or-card-body{padding:2px 16px 12px}
  .cw-or-pf{grid-template-columns:minmax(0,1fr)}
  .cw-or-pf dt{margin-bottom:-4px}
}
@media (prefers-reduced-motion:reduce){
  .cw-or-copy,.cw-or-cta,.cw-or-ghost,.cw-or-line-nm{transition:none}
}



/* ---------------------------------------------------------------
   Shipment rows, tidied (owner, 2026-08-18: "cart page shipment
   text looks messed"). With an address in session and a qualifying
   cart the row carries TWO choices — Free Delivery and the $6.50
   fee — as NATIVE radios: 13px browser-default dots sitting off
   the baseline of right-aligned 13px labels, with the long
   "(Kelowna, West Kelowna, Lake Country)" label free to wrap under
   the dot. Radios take the brand colour, sit on the label's
   baseline, labels stop wrapping loose, and the whole choice reads
   as receipt lines. Markup untouched — Woo core cart-shipping.php.
   --------------------------------------------------------------- */
.cw-sum-rows ul#shipping_method li{align-items:baseline;justify-content:flex-end;flex-wrap:nowrap}
.cw-sum-rows ul#shipping_method input.shipping_method[type=radio]{
  appearance:auto;flex:none;width:14px;height:14px;margin:0;
  accent-color:var(--cw-accent);cursor:pointer;position:relative;top:2px;
}
.cw-sum-rows ul#shipping_method label{
  cursor:pointer;max-width:300px;text-align:right;
}
/* the picked line carries the weight; the alternative steps back */
.cw-sum-rows ul#shipping_method li:has(input:checked) label{color:var(--cw-ink);font-weight:800}
.cw-sum-rows ul#shipping_method li:has(input:not(:checked)) label{color:var(--cw-mut);font-weight:600}
.cw-sum-rows .woocommerce-shipping-destination{margin:6px 0 0;text-align:right}

/* ============================================================
   SMALL CURRENCY MARK (owner, 2026-08-18: "making the $ smaller
   as well") — on the FIGURES (line totals, grand totals); rows of
   13-16px receipt text keep a full-size $ or the mark turns to
   dust. The checkout file already superscripts its own grand $.
   ============================================================ */
.cw-ci-sub .woocommerce-Price-currencySymbol{font-size:.6em}
.cw-ci-sub del .woocommerce-Price-currencySymbol{font-size:inherit}
.cw-sum-rows .order-total td .woocommerce-Price-currencySymbol,
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-currencySymbol,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td .woocommerce-Price-currencySymbol{
  font-size:.55em;vertical-align:super;margin-right:1px}

/* ============================================================
   CART PAGE HEADER STRIP + EMPTY STATE (owner, 2026-08-18:
   "remove my bag and this needs to match our theme").
   "My Bag" is not a heading — the Customizer CSS (#wp-custom-css)
   hides the breadcrumb's text and injects it via
   .page-id-208 .breadcrumb .current:after. Hiding the whole
   Porto strip removes it and its leftover breadcrumb chrome in
   one move; the cart's own heading is .cw-cl-head.
   ============================================================ */
body.woocommerce-cart .woo-page-header{display:none!important}

/* Porto's empty-cart template in the site's voice: no icon-font bag,
   the message as the page's display-face heading, the CTA in the same
   jade the checkout button wears. */
body.woocommerce-cart .cart-empty-page{padding:44px 16px 72px}
body.woocommerce-cart i.cart-empty.porto-icon-bag-2{display:none}
body.woocommerce-cart p.cart-empty{
  margin:0;padding:0;
  font-family:var(--wdkc-display)!important;font-weight:400!important;
  font-size:clamp(21px,3vw,29px)!important;line-height:1.12;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--wdkc-ink)!important;
}
body.woocommerce-cart .return-to-shop{margin:24px 0 0}
body.woocommerce-cart .return-to-shop a.button{
  display:inline-block;background:var(--wdkc-cta)!important;border:1.5px solid var(--wdkc-cta)!important;
  color:#fff!important;border-radius:var(--wdkc-r-sm)!important;padding:14px 28px!important;
  font-family:var(--wdkc-display)!important;font-weight:400!important;font-size:14px!important;
  letter-spacing:.04em!important;text-transform:uppercase!important;text-decoration:none!important;
}
body.woocommerce-cart .return-to-shop a.button:hover{
  background:var(--wdkc-cta-hover)!important;border-color:var(--wdkc-cta-hover)!important}


/* ============================================================
   CART HEAD ON ONE LINE  (owner, 2026-08-18: "these fonts reduce
   the size[,] have the 04 and you save in the same line as cart")

   The count was a 42px Archivo Black <sup> carrying
   vertical-align:super, so it stood 26px ABOVE the h2's own box:
   it collided with the strip above the heading, and it stretched
   the h2 box tall enough that align-items:center pushed the
   savings chip well off CART's optical centre. The <sup> now sits
   on the baseline at money-face 18px, the display size drops
   42 -> 32, and the chip loses the bottom margin that was tilting
   it off the shared centre line.
   ============================================================ */
body.woocommerce-cart .cw-cl-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;
}
body.woocommerce-cart .cw-cl-head h2{
  font-size:clamp(24px,4.4vw,32px);line-height:1;margin:0;
}
body.woocommerce-cart .cw-cl-head h2 sup{
  vertical-align:baseline;top:auto;position:static;
  font-family:var(--cw-money);font-weight:600;font-size:18px;line-height:1;
  letter-spacing:0;margin-left:9px;color:var(--cw-mut);
}
body.woocommerce-cart .cw-cl-head .wdk-cart-save{margin:0;padding:6px 12px}
body.woocommerce-cart .cw-cl-head .wdk-cart-save-k{font-size:9.5px}
body.woocommerce-cart .cw-cl-head .wdk-cart-save-v,
body.woocommerce-cart .cw-cl-head .wdk-cart-save-v .amount,
body.woocommerce-cart .cw-cl-head .wdk-cart-save-v bdi{font-size:14px}
@media (max-width:600px){
  body.woocommerce-cart .cw-cl-head h2 sup{font-size:15px;margin-left:7px}
}

/* ============================================================
   FREE-GIFT ROW: its qty digit shares the stepper's centre line
   (owner, 2026-08-18: "the 3 free grams 1 should line up with the
   other 1's and same font and size").

   Free Gift Coupons' woocommerce_cart_item_quantity filter returns
   a bare "1" instead of a stepper. The existing
   `:not(:has(.quantity))` rule already asked for text-align:center,
   but .cw-ci-qty is `justify-self:start` in the row grid, so the box
   shrink-wraps to the digit and centring inside it is a no-op — the
   digit stayed at the column's left edge while every stepper centred
   its figure 57px in. Giving the box the stepper's own rendered width
   (38+36+38 + 2x1px border = 114px) puts the two centres on the same
   vertical line. Size 18px, not 15px: the cart-wide
   `input.input-text.qty{font-size:18px!important}` further down this
   file is what the steppers actually render at.
   ============================================================ */
body.woocommerce-cart .cw-ci-qty:not(:has(.quantity)){
  min-width:114px;text-align:center;
  font-family:var(--cw-money);font-weight:600;font-size:18px;line-height:1;
  color:var(--cw-ink);
}

/* ============================================================
   SHIPPING OPTIONS: one column, radios on a shared left edge
   (owner, 2026-08-18: "have the bullets line up").

   Porto prints <h4>Shipment</h4> + ul#shipping_method inside a
   right-aligned totals cell. Each <li> shrink-wrapped to its own
   label, so "Free Delivery! (Kelowna, West Kelowna, Lake Country)"
   and "Delivery Fee: $6.50" started at different x and their radios
   stepped diagonally across the card. The list now sizes to its
   widest row (width:max-content, pushed right by margin-left:auto)
   and every row fills that width, so the radios share one left edge
   and the labels all read from it. Serves the cart and the checkout
   — both surfaces print the same ul#shipping_method.
   ============================================================ */
body.woocommerce-cart ul#shipping_method,
body.woocommerce-checkout ul#shipping_method{
  list-style:none;margin:0 0 0 auto;padding:0;
  width:max-content;max-width:100%;
  display:flex;flex-direction:column;gap:9px;text-align:left;
}
body.woocommerce-cart ul#shipping_method li,
body.woocommerce-checkout ul#shipping_method li{
  display:block;width:100%;margin:0;padding:0;text-align:left;
}
body.woocommerce-cart ul#shipping_method li::before,
body.woocommerce-checkout ul#shipping_method li::before{content:none}
body.woocommerce-cart ul#shipping_method .porto-radio,
body.woocommerce-checkout ul#shipping_method .porto-radio{
  display:grid;grid-template-columns:18px minmax(0,1fr);
  align-items:start;gap:0 10px;width:100%;text-align:left;
}
body.woocommerce-cart ul#shipping_method input[type=radio],
body.woocommerce-checkout ul#shipping_method input[type=radio]{
  grid-column:1;width:17px;height:17px;margin:1px 0 0;
  accent-color:var(--wdkc-jade);
}
body.woocommerce-cart ul#shipping_method label,
body.woocommerce-checkout ul#shipping_method label{
  grid-column:2;margin:0;padding:0;text-align:left;
  font:700 14px/1.35 var(--wdkc-ui);color:var(--wdkc-ink);
}
/* the parenthesised service area (section 13 of inc/wdk-cart.php) */
body.woocommerce-cart ul#shipping_method .wdk-ship-sub,
body.woocommerce-checkout ul#shipping_method .wdk-ship-sub{
  display:block;font:400 12px/1.35 var(--wdkc-ui);color:var(--wdkc-mut);
}
/* a costed method's price keeps the money face the rest of the receipt uses */
body.woocommerce-cart ul#shipping_method label .amount,
body.woocommerce-checkout ul#shipping_method label .amount,
body.woocommerce-cart ul#shipping_method label bdi,
body.woocommerce-checkout ul#shipping_method label bdi{
  font-family:var(--cw-money);font-weight:600;color:var(--wdkc-ink);
}

/* ============================================================
   CART PAGE CLEARS THE TICKER  (owner, 2026-08-19: "cart page too
   close to bar move it down a bit").

   Porto's usual 20px of top padding on .main-content was zeroed to
   5px sitewide when the homepage hero was made flush to the header,
   so on a cart with no notices the CART heading began 5px under the
   price ticker's bottom edge. The clearance is put back on the cart
   wrapper alone — .main-content is shared with the flush-hero
   homepage and must stay as it is.
   ============================================================ */
body.woocommerce-cart .cw-cartpage{padding-top:60px}   /* 30 -> 60, owner 2026-08-19: "double it" */
@media (max-width:768px){
  body.woocommerce-cart .cw-cartpage{padding-top:40px}
}

/* ============================================================
   A ZERO DISCOUNT ROW IS NOT SHOWN  (owner, 2026-08-19: "hide")
   inc/wdk-cart.php section 16 wraps the amount in
   .wdk-zero-discount when a coupon's discount is 0 — the free-gift
   coupons book no money, and with their label filtered away the row
   read as a captionless "-$0" under Subtotal. Both surfaces: the
   cart totals card and the checkout review table.
   ============================================================ */
body.woocommerce-cart tr.cart-discount:has(.wdk-zero-discount),
body.woocommerce-checkout tr.cart-discount:has(.wdk-zero-discount){display:none!important}

/* ============================================================
   SHIPPING BLOCK TYPE  (owner, 2026-08-19: "the bullet points
   should be the same font and not so bold even the title too")
   One family across the whole block — Porto's <h4>Shipment</h4>,
   each option label and the costed method's price — and the weight
   comes off 700. The parenthesised service area keeps its quieter
   second line. Overrides the 700 set when the rows were aligned.
   ============================================================ */
body.woocommerce-cart tr.woocommerce-shipping-totals > td > h4,
body.woocommerce-checkout tr.woocommerce-shipping-totals > td > h4,
body.woocommerce-cart tr.shipping > td > h4,
body.woocommerce-checkout tr.shipping > td > h4{
  font-family:var(--wdkc-ui)!important;font-weight:500!important;
  font-size:14px!important;line-height:1.35!important;color:var(--wdkc-ink)!important;
  letter-spacing:0!important;text-transform:none!important;margin:0 0 8px!important;
}
body.woocommerce-cart ul#shipping_method label,
body.woocommerce-checkout ul#shipping_method label,
body.woocommerce-cart ul#shipping_method label .amount,
body.woocommerce-checkout ul#shipping_method label .amount,
body.woocommerce-cart ul#shipping_method label bdi,
body.woocommerce-checkout ul#shipping_method label bdi,
body.woocommerce-cart ul#shipping_method label span:not(.wdk-ship-sub),
body.woocommerce-checkout ul#shipping_method label span:not(.wdk-ship-sub){
  font-family:var(--wdkc-ui)!important;font-weight:500!important;
  font-size:14px!important;line-height:1.35!important;color:var(--wdkc-ink)!important;
}
body.woocommerce-cart ul#shipping_method .wdk-ship-sub,
body.woocommerce-checkout ul#shipping_method .wdk-ship-sub{
  font-weight:400!important;font-size:12px!important;color:var(--wdkc-mut)!important;
}

/* ============================================================
   MOBILE CART: THE SUMMARY CARD CLEARS THE ACTIONS ROW
   (owner, 2026-08-19: "the summary island is touching the update
   cart button move it down").

   .cw-summary carries `margin:0!important` from the CW port (the
   desktop layout spaces the two columns with a grid alley, so the
   card must not add margins of its own). Below the breakpoint the
   card stacks straight under .cw-cl-actions and the green SUMMARY
   tab landed against the UPDATE CART button. The gap belongs to
   the stacked layout only, and it has to be !important to beat the
   port's own !important.
   ============================================================ */
@media (max-width:1024px){
  body.woocommerce-cart .cw-summary{margin-top:28px!important}
}

/* ============================================================
   ROUND 25 (owner, 2026-08-19) — CART LINE ROWS
   ============================================================ */

/* --- 25a. the photo fills its square ---------------------------------
   Owner: "The images should just use up the whole square dont have the
   white borders."

   This reverses the 2026-08-18 "photos centred, not cropped" pass further
   up this file: that one added 5px of white padding and object-fit:contain,
   which is what reads as a white frame around every thumbnail. The frame
   hairline stays — it is the grey --cw-line rule that draws the square, not
   the white the owner is pointing at. Cover crops the long edge of a very
   tall or very wide packshot; that is the trade the owner asked for. */
body.woocommerce-cart .cw-ci-img{padding:0;background:transparent}
body.woocommerce-cart .cw-ci-img img{object-fit:cover}
/* ...and the grey hairline goes too (owner, 2026-08-19, second pass: "there is
   a grey border around the images remove it"). Nothing is left framing the
   thumb but its own 8px corner radius. NOTE: a lot of the product photography
   carries a white studio background, so a pale margin can still READ as a
   frame on those shots — that one is in the image file, not in this sheet. */
body.woocommerce-cart .cw-ci-img{border:0}

/* --- 25b. phone stepper = the checkout's -----------------------------
   Owner: "the qty selector is too big, use the same one as the checkout
   page."

   Below 600px the checkout review row runs the compact control from
   wdk-checkout.css §23 (96x32: 1.5px frame, 6px corners, 30px buttons,
   33px figure, 15px type). The cart still ran the full-size 44px pill from
   section 7 (measured 106x44 at 360px, buttons 34, figure 36 at 18px), so
   the two pages disagreed on a phone only — desktop already matches at 44px
   and is deliberately untouched.

   Every declaration is !important and every selector carries .cw-ci-qty:
   section 7 styles the same control through
   `body.woocommerce-cart .woocommerce-cart-form .quantity` (0,3,1) and the
   <=400px block narrows the buttons again, and both sit EARLIER in this
   file. Same cascade note as wdk-checkout.css §23. */
@media (max-width:599px){
  body.woocommerce-cart .cw-ci-qty .quantity{
    height:32px!important;border-width:1.5px!important;border-radius:6px!important;
  }
  body.woocommerce-cart .cw-ci-qty .quantity .minus,
  body.woocommerce-cart .cw-ci-qty .quantity .plus,
  body.woocommerce-cart .cw-ci-qty .quantity button,
  body.woocommerce-cart .cw-ci-qty .quantity input[type=button]{
    width:30px!important;flex:0 0 30px!important;height:auto!important;font-size:15px!important;
  }
  body.woocommerce-cart .cw-ci-qty .quantity input.qty{
    width:33px!important;height:100%!important;padding:0 4px!important;font-size:15px!important;
  }
  /* --- 25c. the free-gift row's bare "1" keeps the stepper's centre ---
     Owner: "the 1 for the 3 free grams should be the font and line up with
     the 1 above it."

     Free Gift Coupons returns a bare digit instead of a stepper, so the
     `:not(:has(.quantity))` box further up this file gives it the stepper's
     rendered width and centres the digit in it — two symmetric boxes with a
     shared left edge put the two figures on one vertical line. That width
     was 114px, computed for the 38px-button control; the phone control is
     1.5+30+33+30+1.5 = 96px. min-width alone is not enough here: the box is
     a grid item and stretches to the whole qty column (128px at 360px), so
     the centre has to be pinned with a real width. Type follows the figure
     it lines up with — 15px, not the cart's 18px. */
  body.woocommerce-cart .cw-ci-qty:not(:has(.quantity)){
    width:96px!important;min-width:96px!important;max-width:96px!important;
    font-size:15px!important;
  }
}

/* ============================================================
   ROUND 25b (owner, 2026-08-19): the line title speaks in the
   CARD's voice — 800 var(--cw-ui), uppercase, .05em tracking,
   exactly `.cw-nm` on the shop and category grids. It was
   Archivo Black 400: the same product name in a different face
   one page later. Only the face changes; the size clamp above
   (14 -> 17px, the owner's own 2026-08-18 reduction) stands.
   ============================================================ */
.cw-ci-nm{font-family:var(--cw-ui);font-weight:800;letter-spacing:.05em}

/* ============================================================
   25c. THE ORPHANED POINTS NOTES (found 2026-08-19 while
   diagnosing "the loyalty points fields have gone").

   WooRewards' cart slot prints the voucher block PLUS two
   hand-written divs, `.wr-after-point-1` ("1000 points = $1")
   and `.wr-after-point-2` ("Minimum of 1000 points and maximum
   of 25,000 points"). The block itself is
   `PointsOnCart::shortcode()`, which returns an EMPTY STRING for
   `get_current_user_id() === 0` — so a logged-out visitor gets
   the two notes with nothing above them, dangling under the
   summary card.

   assets/wdk-points.css already hides that pair, but
   inc/wdk-points.php enqueues that sheet only for
   `is_user_logged_in()` — correctly, since nothing else in it
   has anything to style for a guest. The one rule a guest DOES
   need therefore lives here, in the sheet the cart always loads.
   The empty `.cart-collaterals.cross-sells` wrapper the slot
   leaves behind goes with it, guarded on :empty so a real
   cross-sell section is untouched.
   ============================================================ */
body.woocommerce-cart .wr-after-point-1,
body.woocommerce-cart .wr-after-point-2{display:none}
body.woocommerce-cart .cart-collaterals.cross-sells:empty{display:none}

/* ============================================================
   26. THE STEPPER SAYS WHY IT STOPPED (owner, 2026-08-19: "qty
   selector doesnt go above the stock qty available which is
   good, but the customer doesnt know that... show a tooltip
   saying 'Sorry, only X available'").

   The cap itself is WooCommerce's — `max` on the qty input, from
   the product's maximum purchase quantity — so the + button just
   stops answering on the last unit. assets/wdk-cart.js appends
   one `.wdk-qtytip` per stepper the first time it is needed and
   toggles `.is-on`; everything else is here.

   It hangs off the stepper's CONTAINER, not the stepper: the
   control is a 99px pill with overflow:hidden (§14 — that is
   what rounds its ends), and a bubble parked inside it is
   clipped away to nothing. Cost an hour to see, because the node
   is present, visible and correctly sized while painting no
   pixels. The script marks the container .wdk-qtytip-anchor; the
   row above it clips nothing, so the bubble clears the pill on
   both pages. It is `visibility:hidden` between showings rather
   than removed, so the same node is reused and the transition
   has something to animate.
   ============================================================ */
.wdk-qtytip-anchor{position:relative}

.wdk-qtytip{
  position:absolute;left:50%;bottom:calc(100% + 9px);z-index:6;
  padding:7px 11px;border-radius:8px;
  background:var(--wdkc-ink,#151917);color:#fff;
  font:600 12px/1.25 var(--wdkc-ui,sans-serif)!important;letter-spacing:.01em;
  text-transform:none!important;white-space:nowrap;
  box-shadow:0 6px 18px rgba(10,14,12,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
/* the little nose, pointing back down at the + it came from */
.wdk-qtytip::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--wdkc-ink,#151917);
}
.wdk-qtytip.is-on{
  opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s;
}
@media (prefers-reduced-motion:reduce){
  .wdk-qtytip{transition:none}
}

/* ============================================================
   FREE-GIFT ROW QUANTITY, ROUND 2 (owner, 2026-08-19: "the 1 for
   the free gifts is not the same font as the 1 in the qty
   selector, make it the same").

   A gift line has no stepper: woocommerce-free-gift-coupons (and
   nukeleus's BXGY twin) filter woocommerce_cart_item_quantity
   down to a BARE TEXT NODE plus a hidden input, so the figure
   inherits whatever the cell carries. Earlier rounds addressed
   this on `.cw-ci-qty:not(:has(.quantity))`, which stops matching
   the moment the row gains a class or the popup markup changes —
   and leaves the two figures free to drift apart again.

   Both figures are now stated once, together, so they cannot
   disagree: the stepper's own `input.input-text.qty{18px}` value,
   the money face named literally (never through --cw-money, which
   is defined in wdk-shop.css and would fall back to the UI face
   anywhere that sheet is absent), and the cell's ink.
   ============================================================ */
body.woocommerce-cart .cw-ci-qty,
body.woocommerce-cart .cw-ci-qty .quantity input.qty{
  font-family:'Figtree',var(--cw-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif)!important;
  font-weight:600!important;
  font-size:18px!important;
  line-height:1!important;
  color:var(--wdkc-ink,#151917)!important;
  font-variant-numeric:tabular-nums;
}


/* ============================================================
   SHIPMENT ROW (owner, 2026-08-20: "this is looking messed up on
   cart page" - the screenshot read "Ship$15ent").

   Every totals row above is `display:grid; grid-template-columns:
   minmax(0,1fr) auto` - label track flexible, figure track auto.
   That holds while the figure is "$98". The shipment cell is a
   method list PLUS "Shipping to 1233 Lawrence Avenue East, 109,
   Toronto ON M3A 1C3.", and an auto track sized to that paragraph
   takes the entire row: measured live, tr.shipping th resolved to
   0px against a 296px td inside a 310px card, so the <th> text
   overflowed its own box and painted over the method.

   This row therefore stacks - label, then the method and the
   destination beneath it at full width - and the cost is pulled to
   the right edge, where every other figure in the card sits. The
   name/sub/cost spans come from wdk_ship_label_two_lines() in
   inc/wdk-cart.php; WooCommerce hands the label over as one
   "<title>: <price>" string and CSS cannot separate the halves.

   Note every WDK zone offers exactly ONE rate at a time (section 14
   of inc/wdk-cart.php drops the paid rates whenever a free one
   qualifies), so this is normally a single line and the radio arm
   below is for the day that stops being true.
   ============================================================ */
body.woocommerce-cart .cart_totals table.shop_table > tbody > tr.woocommerce-shipping-totals{
  grid-template-columns:minmax(0,1fr);
  gap:7px 0;
  align-items:start;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > td{
  text-align:left;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals ul#shipping_method{
  margin:0;padding:0;width:100%;max-width:100%;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals ul#shipping_method li{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;
  width:100%;margin:0;padding:0;text-align:left;
}
/* A single available rate prints a hidden input; it must not sit in the flex
   flow as a zero-width item between the radio column and the name. */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals input.shipping_method[type=hidden]{
  display:none!important;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals input.shipping_method[type=radio]{
  flex:none;width:14px;height:14px;margin:0;accent-color:var(--wdkc-jade,#3EB785);
  position:relative;top:1px;cursor:pointer;
}
/* The label is the flex container, not the <li>: display:contents on a
   <label> drops it out of the accessibility tree in some browsers and can
   cost the radio its click target. The <li> stays a simple [radio][label]
   row and the label lays its own three spans out. */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals ul#shipping_method label{
  display:flex;flex:1 1 auto;min-width:0;flex-wrap:wrap;
  align-items:baseline;column-gap:10px;margin:0;padding:0;text-align:left;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .wdk-ship-name{
  flex:1 1 auto;min-width:0;
  font:600 13px/1.4 var(--wdkc-ui);color:var(--wdkc-ink);
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .wdk-ship-cost,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .wdk-ship-cost .amount,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .wdk-ship-cost bdi{
  font-family:var(--cw-money);font-weight:600;font-size:15px;letter-spacing:-0.01em;
  color:var(--wdkc-ink);
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .wdk-ship-cost{
  flex:0 0 auto;margin-left:auto;order:2;white-space:nowrap;
}
/* the service area drops under the name, quiet, full width */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .wdk-ship-sub{
  flex:1 0 100%;order:3;display:block;margin:0;
  font:400 11.5px/1.4 var(--wdkc-ui);color:var(--wdkc-mut);letter-spacing:0;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-destination{
  margin:9px 0 0!important;text-align:left!important;
  font:400 11px/1.5 var(--wdkc-ui)!important;color:var(--wdkc-mut)!important;
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-destination strong{
  font-weight:600;color:var(--wdkc-ink);
}
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .shipping-calculator-button{
  display:inline-block;margin-top:6px;
}

/* ============================================================
   REMOVE-COUPON CONTROL (owner, 2026-08-20: "remove the remove
   text and have a X there instead").

   WooCommerce prints the literal string "[Remove]" inside the
   link. It already carries role="button" and aria-label="Remove
   <code> coupon", so swapping the visible glyph for a close mark
   costs a screen reader nothing - the accessible name is untouched.
   font-size:0 hides the text node; ::before draws the mark.
   ============================================================ */
body.woocommerce-cart .cart_totals a.woocommerce-remove-coupon,
body.woocommerce-checkout a.woocommerce-remove-coupon{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;flex:none;margin-left:9px;vertical-align:middle;
  border:1px solid var(--wdkc-line,#E9EDEA);border-radius:50%;
  background:var(--wdkc-paper,#F7F8F7);
  font-size:0!important;line-height:0;text-decoration:none!important;
  color:var(--wdkc-mut,#6C7570)!important;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
body.woocommerce-cart .cart_totals a.woocommerce-remove-coupon::before,
body.woocommerce-checkout a.woocommerce-remove-coupon::before{
  content:"\00d7";font-size:14px;line-height:1;font-weight:400;
  font-family:var(--wdkc-ui,inherit);
}
body.woocommerce-cart .cart_totals a.woocommerce-remove-coupon:hover,
body.woocommerce-checkout a.woocommerce-remove-coupon:hover{
  background:var(--wdkc-ink,#151917);border-color:var(--wdkc-ink,#151917);
  color:#fff!important;
}