/* =====================================================================
   lpen-cart.css — the cart surface

   EVERY SELECTOR MUST CONTAIN `#lpen-cart`.
   ---------------------------------------------------------------------
   `lpen-assets/` is enqueued site-wide (§18j) and this file is the only
   stylesheet in the repo that styles `.shop_table`, `.cart_totals`,
   `.coupon` and `.wc-proceed-to-checkout` — markup WooCommerce also
   renders on the CHECKOUT page, the order-received page, the order
   emails preview and every product page. One unanchored rule here
   repaints all of them.

   There is no prefix scoper in build_cart.py on purpose. Prefixing is a
   transformation you have to trust; an id anchor is a fact you can grep,
   and `assert_anchored()` fails the build on any selector without it,
   including inside @media.

   Section ids, all set from the builder:
     #lpen-cart-head        H1 band
     #lpen-cart-steps         the two-step strip inside it
     #lpen-cart-woo         the band holding the WooCommerce widget
     #lpen-cart-tablehead     the "Courses in your cart" H2
     #lpen-cart-empty         the empty state, sibling of the widget
     #lpen-cart-assure      what a course includes
     #lpen-cart-detail      money questions and cancellation
     #lpen-cart-detailrow     the two-column row inside it
     #lpen-cart-money         left card
     #lpen-cart-terms         right card
     #lpen-cart-helpbtns      the FAQ / contact button row
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TYPE AND MEASURE INSIDE THE WOOCOMMERCE WIDGET

   The Elementor kit emits `.elementor-kit-8 h2 {...}` at specificity
   (0,1,1), which beats a bare class (§18b.3). Everything here is at
   least (0,1,1) because of the id, so the kit does not win.
   --------------------------------------------------------------------- */
#lpen-cart-woo .woocommerce {
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  color: #111820;
}

#lpen-cart-woo .e-cart__container {
  align-items: flex-start;
}

/* ---------------------------------------------------------------------
   2. THE LINE-ITEM TABLE

   Default WooCommerce draws a boxed grid with a border on every cell.
   At two or three line items that reads as a spreadsheet. Rows with a
   single hairline between them read as a receipt, which is what this is.
   --------------------------------------------------------------------- */
/* Elementor Pro wraps the table in `.e-shop-table.e-cart-section`, which
   ships its own 1px border and `16px 30px` of padding. Left alone that
   draws a box inside a box: the rounded table below sits inset in a
   second rectangle with a visible gutter between the two borders. Only
   one of them can be the card, and it should be the one that follows the
   table's own corners. */
#lpen-cart-woo .e-shop-table.e-cart-section {
  border: 0;
  padding: 0;
  background: transparent;
}

#lpen-cart-woo .shop_table.cart {
  border: 1px solid #CFD6DD;
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

#lpen-cart-woo .shop_table.cart thead th {
  background: #F6F8FA;
  border: 0;
  border-bottom: 1px solid #CFD6DD;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: #6B7684;
  text-align: left;
}

#lpen-cart-woo .shop_table.cart tbody td {
  border: 0;
  border-top: 1px solid #E4E9ED;
  padding: 18px 14px;
  vertical-align: middle;
  background: #FFFFFF;
}

#lpen-cart-woo .shop_table.cart tbody tr:first-child td {
  border-top: 0;
}

#lpen-cart-woo .shop_table.cart td.product-thumbnail {
  width: 96px;
  padding-right: 0;
}

#lpen-cart-woo .shop_table.cart td.product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #E4E9ED;
  display: block;
}

#lpen-cart-woo .shop_table.cart td.product-name {
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: #012032;
}

/* The theme underlines every <a> (§18i). A course title is long, and an
   underline under a full sentence of link text is noise; keep it for
   hover and for keyboard focus, where it is the affordance. */
#lpen-cart-woo .shop_table.cart td.product-name a {
  color: #012032;
  text-decoration: none;
}

#lpen-cart-woo .shop_table.cart td.product-name a:hover,
#lpen-cart-woo .shop_table.cart td.product-name a:focus-visible {
  color: #0F5C96;
  text-decoration: underline;
}

#lpen-cart-woo .shop_table.cart td.product-price,
#lpen-cart-woo .shop_table.cart td.product-subtotal {
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#lpen-cart-woo .shop_table.cart td.product-subtotal {
  font-weight: 600;
  color: #012032;
}

#lpen-cart-woo .shop_table.cart td.product-remove {
  width: 46px;
  padding-right: 0;
}

/* The remove `x` is redrawn as a Tabler glyph by icons_css() in the
   builder, which also gives it a 34px hit area. Bare `&times;` at body
   size is a ~10px target next to a $800 line item. */
#lpen-cart-woo .shop_table.cart td.product-remove a.remove:hover {
  background-color: #FBEAE8 !important;
}

#lpen-cart-woo .shop_table.cart td.product-remove a.remove:focus-visible {
  outline: 2px solid #0F5C96;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   3. THE DEAD QUANTITY COLUMN

   Every LPEN product is "sold individually", so WooCommerce renders the
   quantity as `<input type="hidden">`. Measured on live page 1334 on
   2026-08-23: two rows, two quantity inputs, both computing to
   `display: none` with a 0x0 box. The result is a "Quantity" header over
   an empty column on every row, an `Update cart` button that is
   permanently `disabled`, and an orphaned `<label class="screen-reader-
   text">` that still announces "<course name> quantity" with no control
   under it.

   ⚠️ This is CONDITIONAL, not a blanket hide. `:has()` asks the table
   whether it contains a quantity control that is NOT hidden; if one
   product is ever sold in multiples the column, the label and the update
   button all come back on their own. A hard `display: none` here would
   silently break that product's cart row and nobody would find out until
   a customer could not buy two seats.
   --------------------------------------------------------------------- */
#lpen-cart-woo .shop_table.cart:not(:has(td.product-quantity input:not([type="hidden"]))) th.product-quantity,
#lpen-cart-woo .shop_table.cart:not(:has(td.product-quantity input:not([type="hidden"]))) td.product-quantity {
  display: none;
}

/* ⚠️ `!important` is load-bearing here and is not laziness.
   Elementor Pro's own `custom-pro-widget-woocommerce-cart.min.css` ships

     .elementor-widget-woocommerce-cart .woocommerce table.shop_table.cart
     .actions .button { display: inline-block !important }

   measured in the cascade on 2026-08-23. An `!important` declaration
   beats a normal one whatever the specificity, so the id anchor does not
   help. This is the same fight §18j documents with the LearnDash inline
   block. Do not remove it and assume the id is enough.

   The whole `<tr>` goes, not just the button: `td.actions` has
   `colspan="6"` and nothing else visible in it, so hiding only the button
   leaves an empty padded row with a rule above it. The two hidden inputs
   inside it still post with the form, because a display:none input is
   still submitted. */
#lpen-cart-woo .woocommerce-cart-form:not(:has(td.product-quantity input:not([type="hidden"]))) .shop_table.cart tbody tr:has(> td.actions) {
  display: none !important;
}

/* ---------------------------------------------------------------------
   4. COUPON

   The child theme disables `woocommerce_coupons_enabled` on checkout
   (§10), so this box is the ONLY place a code can be entered on the
   whole site. It is styled to look like a field somebody is meant to
   use, not like a leftover.
   --------------------------------------------------------------------- */
#lpen-cart-woo .coupon.e-cart-section {
  background: #F3F7F9;
  border: 1px solid #C9DDE8;
  border-radius: 10px;
  padding: 16px;
  margin-top: 18px;
}

#lpen-cart-woo .coupon .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin: 0;
}

#lpen-cart-woo .coupon .coupon-col-start {
  flex: 1 1 220px;
  min-width: 0;
}

#lpen-cart-woo .coupon .coupon-col-end {
  flex: 0 0 auto;
}

#lpen-cart-woo .coupon input.input-text {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #CFD6DD;
  border-radius: 4px;
  background: #FFFFFF;
  font-size: 16px;   /* 16px or iOS zooms the page on focus */
  color: #111820;
}

#lpen-cart-woo .coupon input.input-text:focus {
  outline: 2px solid #0F5C96;
  outline-offset: 1px;
  border-color: #0F5C96;
}

#lpen-cart-woo .coupon button.e-apply-coupon {
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 4px;
  background: #FFFFFF;
  color: #0F5C96;
  border: 1px solid #CFD6DD;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

#lpen-cart-woo .coupon button.e-apply-coupon:hover {
  background: #0F5C96;
  color: #FFFFFF;
  border-color: #0F5C96;
}

/* ---------------------------------------------------------------------
   5. THE EMPTY STATE

   `#lpen-cart-empty` and the WooCommerce widget are siblings in one
   section, and exactly one of them shows. An Elementor display condition
   cannot see whether a cart has items, so the switch is `:has()`.

   ⚠️ The default is HIDDEN, and `:has()` reveals it. That ordering is
   the whole safety of this block: a browser without `:has()` support
   shows nothing extra and falls back to WooCommerce's own "Your cart is
   currently empty" message, which is still in the DOM. If the default
   were "visible, hidden when full", the same browser would show an empty
   state underneath a full cart.
   --------------------------------------------------------------------- */
#lpen-cart-empty {
  display: none;
}

#lpen-cart-woo:has(.wc-empty-cart-message) #lpen-cart-empty,
#lpen-cart-woo:has(.cart-empty) #lpen-cart-empty {
  display: flex;
}

/* WooCommerce's own message and its "Return to shop" button, which
   points at /shop/ — 140 products over 16 pages, 2021 courses on the
   first screen. Hidden only inside the same `:has()`, so it survives if
   the selector is ever unsupported. */
#lpen-cart-woo:has(.wc-empty-cart-message) .wc-empty-cart-message,
#lpen-cart-woo:has(.cart-empty) .cart-empty,
#lpen-cart-woo:has(.wc-empty-cart-message) .return-to-shop,
#lpen-cart-woo:has(.cart-empty) .return-to-shop {
  display: none;
}

/* With an empty cart there is nothing to head, nothing to step through
   and no purchase to reassure anybody about. */
#lpen-cart-woo:has(.cart-empty) #lpen-cart-tablehead,
#lpen-cart-woo:has(.wc-empty-cart-message) #lpen-cart-tablehead {
  display: none;
}

/* With an empty cart there is no purchase to orient, reassure or explain
   the money for, so the step strip, the lead, the "what a course
   includes" band and the money band all go. What is left is the H1 and
   four routes back into the catalogue, which is the entire job of this
   page in that state.

   ⚠️ The assurance band is in this list for a second reason. The GLOBAL
   FOOTER already carries "Live and on demand", "Certificate on
   completion" and "Taught by experts" — three of that band's four tiles,
   in almost the same words. With a full cart there is most of a page
   between them. With an empty cart the band lands directly on top of the
   footer strip and the page says the same thing twice in a row. */
body:has(#lpen-cart-woo .cart-empty) #lpen-cart-steps,
body:has(#lpen-cart-woo .wc-empty-cart-message) #lpen-cart-steps,
body:has(#lpen-cart-woo .cart-empty) #lpen-cart-lead,
body:has(#lpen-cart-woo .wc-empty-cart-message) #lpen-cart-lead,
body:has(#lpen-cart-woo .cart-empty) #lpen-cart-assure,
body:has(#lpen-cart-woo .wc-empty-cart-message) #lpen-cart-assure,
body:has(#lpen-cart-woo .cart-empty) #lpen-cart-detail,
body:has(#lpen-cart-woo .wc-empty-cart-message) #lpen-cart-detail {
  display: none;
}

/* ---------------------------------------------------------------------
   6. ORDER SUMMARY

   The widget already renders a two-column `.e-cart__container` with an
   `.e-sticky-right-column`, so this is polish, not layout. The sticky
   offset clears the header's sticky bar, measured at 77px on 2026-08-23,
   plus a 20px breathing gap. The admin bar adds its own 32px and only
   an admin ever sees that.
   --------------------------------------------------------------------- */
#lpen-cart-woo .e-cart__column-inner.e-sticky-right-column {
  top: 97px;
}

body.admin-bar #lpen-cart-woo .e-cart__column-inner.e-sticky-right-column {
  top: 129px;
}

#lpen-cart-woo .e-cart-totals.e-cart-section {
  background: #F6F8FA;
  border: 1px solid #CFD6DD;
  border-radius: 10px;
  padding: 22px;
}

#lpen-cart-woo .cart_totals > h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: #6B7684;
  margin: 0 0 14px;
  padding: 0;
}

#lpen-cart-woo .cart_totals table.shop_table {
  border: 0;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

#lpen-cart-woo .cart_totals table.shop_table th,
#lpen-cart-woo .cart_totals table.shop_table td {
  border: 0;
  padding: 8px 0;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  vertical-align: baseline;
}

#lpen-cart-woo .cart_totals table.shop_table th {
  font-weight: 400;
  color: #4A5666;
  text-align: left;
}

#lpen-cart-woo .cart_totals table.shop_table td {
  text-align: right;
  color: #111820;
  font-variant-numeric: tabular-nums;
}

#lpen-cart-woo .cart_totals tr.order-total th,
#lpen-cart-woo .cart_totals tr.order-total td {
  border-top: 1px solid #CFD6DD;
  padding-top: 14px;
  font-weight: 700;
  color: #012032;
}

#lpen-cart-woo .cart_totals tr.order-total td {
  font-size: 24px;
  line-height: 32px;
}

/* ---------------------------------------------------------------------
   7. THE CHECKOUT BUTTON

   One primary action on the page, full width of its column, and at
   least 52px tall so it is a comfortable target on a phone. The padlock
   note under it is drawn by icons_css() as a Tabler mask.
   --------------------------------------------------------------------- */
#lpen-cart-woo .wc-proceed-to-checkout {
  padding: 18px 0 0;
  margin: 0;
}

#lpen-cart-woo .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 4px;
  background: #0F5C96;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  margin: 0;
}

#lpen-cart-woo .wc-proceed-to-checkout a.checkout-button:hover {
  background: #0B4465;
  color: #FFFFFF;
}

#lpen-cart-woo .wc-proceed-to-checkout a.checkout-button:focus-visible {
  outline: 3px solid #012032;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   8. NOTICES

   "X has been added to your cart" and coupon errors both land in
   `.woocommerce-notices-wrapper`. WooCommerce's default is a grey bar
   with a tick; an error and a success currently look identical.
   --------------------------------------------------------------------- */
#lpen-cart-woo .woocommerce-notices-wrapper .woocommerce-message,
#lpen-cart-woo .woocommerce-notices-wrapper .woocommerce-info,
#lpen-cart-woo .woocommerce-notices-wrapper .woocommerce-error {
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 23px;
  margin: 0 0 18px;
  border-top: 0;
  border-left: 4px solid #0F5C96;
  background: #F3F7F9;
  color: #111820;
}

#lpen-cart-woo .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: #B3261E;
  background: #FBEAE8;
}

/* ---------------------------------------------------------------------
   9. THE PAGE'S OWN BLOCKS
   --------------------------------------------------------------------- */
#lpen-cart-steps .elementor-icon-box-title {
  margin-bottom: 4px;
}

#lpen-cart-helpbtns {
  align-items: flex-start;
}

/* ⚠️ There is deliberately NO trust badge under the checkout button.
   Nothing can be added inside the widget's totals column without an html
   widget wrapping it, and a padlock drawn next to a button is decoration
   rather than information. What a buyer actually needs to know before
   typing a card number is in #lpen-cart-money, in words. */

/* ---------------------------------------------------------------------
   10. NARROW SCREENS

   WooCommerce ships `shop_table_responsive`, which stacks the table
   using the `data-title` attribute on each cell. It is serviceable and
   ugly: every row becomes a bordered block with right-aligned values and
   a repeated label. Below 768px this turns each line item into a card
   with the thumbnail beside the title.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  #lpen-cart-woo .shop_table.cart {
    border: 0;
    border-radius: 0;
  }

  #lpen-cart-woo .shop_table.cart thead {
    display: none;
  }

  #lpen-cart-woo .shop_table.cart tbody tr.cart_item {
    display: grid;
    grid-template-columns: 76px 1fr 34px;
    grid-template-areas:
      "thumb name remove"
      "thumb price price"
      "thumb sub   sub";
    gap: 2px 14px;
    align-items: center;
    border: 1px solid #CFD6DD;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
  }

  #lpen-cart-woo .shop_table.cart tbody tr.cart_item td {
    border: 0 !important;
    padding: 0;
    text-align: left !important;
    background: transparent;
  }

  /* WooCommerce's smallscreen sheet writes `content: attr(data-title)`
     into a ::before on every cell, so a stacked row reads
     "Product: <title> / Price: $240 / Subtotal: $240". Most of those
     labels are noise next to the value they label. Two are not, and both
     are re-enabled below: with the quantity column gone, price and
     subtotal are two money figures with nothing to tell them apart. */
  #lpen-cart-woo .shop_table.cart tbody tr.cart_item td::before {
    display: none !important;
  }

  #lpen-cart-woo .shop_table.cart tbody tr.cart_item td.product-price::before,
  #lpen-cart-woo .shop_table.cart tbody tr.cart_item td.product-subtotal::before {
    display: inline !important;
    float: none !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #6B7684;
    margin-right: 6px;
  }

  /* ⚠️ `display: block` is required, not cosmetic. WooCommerce's
     `woocommerce-smallscreen.css` hides `td.product-thumbnail` outright
     below its breakpoint, on the assumption the stacked layout has no
     room for it. This layout does: the thumbnail is the left column of
     the card grid, and without this rule that column renders empty and
     the row looks broken. */
  #lpen-cart-woo .shop_table.cart td.product-thumbnail {
    display: block;
    grid-area: thumb;
    width: auto;
    align-self: start;
  }

  #lpen-cart-woo .shop_table.cart td.product-thumbnail img {
    width: 76px;
    height: 76px;
  }

  #lpen-cart-woo .shop_table.cart td.product-name {
    grid-area: name;
    font-size: 16px;
    line-height: 23px;
  }

  #lpen-cart-woo .shop_table.cart td.product-price {
    grid-area: price;
    font-size: 14px;
    color: #6B7684;
  }

  #lpen-cart-woo .shop_table.cart td.product-subtotal {
    grid-area: sub;
    font-size: 17px;
  }

  #lpen-cart-woo .shop_table.cart td.product-remove {
    grid-area: remove;
    width: auto;
    align-self: start;
    justify-self: end;
  }

  #lpen-cart-woo .cart_totals tr.order-total td {
    font-size: 22px;
  }

  #lpen-cart-woo .e-cart-totals.e-cart-section {
    padding: 18px;
  }
}

/* ====== GENERATED BY build_cart.py — DO NOT EDIT ====== */
#lpen-cart-woo .shop_table td.product-remove a.remove{font-size:0;line-height:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:6px;background-color:transparent}
#lpen-cart-woo .shop_table td.product-remove a.remove::before{content:'';width:19px;height:19px;background-color:#8A93A0;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m5.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L5 18l.1.5.6.5.7-.1 2.9-2.8 2.7-2.7 2.7 2.7L18 19l.5-.1.5-.6-.1-.7-2.8-2.9-2.7-2.7 2.7-2.7L19 6l-.1-.5a1 1 0 0 0-1.2-.4c-.2 0-.5.3-3 2.8L12 10.6 9.3 7.9a21 21 0 0 0-3-2.8z'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='m5.7 5-.6.5v.9l2.8 2.9 2.7 2.7-2.7 2.7L5 18l.1.5.6.5.7-.1 2.9-2.8 2.7-2.7 2.7 2.7L18 19l.5-.1.5-.6-.1-.7-2.8-2.9-2.7-2.7 2.7-2.7L19 6l-.1-.5a1 1 0 0 0-1.2-.4c-.2 0-.5.3-3 2.8L12 10.6 9.3 7.9a21 21 0 0 0-3-2.8z'/></svg>");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
#lpen-cart-woo .shop_table td.product-remove a.remove:hover::before{background-color:#B3261E}