/**
 * Cart page — card layout
 *
 * Pairs with woocommerce/cart/cart.php. Loaded only on the cart page, so these
 * selectors stay shallow and specificity stays low; there is nothing global to
 * out-shout. The old table overrides in lj-styles.css have been removed rather
 * than layered over.
 *
 * One card component at every breakpoint — the grid areas re-flow, the markup
 * does not change.
 *
 * @package luxe-jewish-life
 */

.ljl-cart {
  --ljl-cart-gap: 1.25rem;
  --ljl-cart-rule: 1px solid var(--color-gray);
  --ljl-cart-media: 84px;
  --ljl-cart-radius: 2px;
  --ljl-cart-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1l14 14M15 1L1 15' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  -webkit-margin-after: 2.5rem;
          margin-block-end: 2.5rem;
}

/* ==============================
   Header
   ============================== */

.ljl-cart__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  -webkit-padding-after: 0.875rem;
          padding-block-end: 0.875rem;
  -webkit-border-after: var(--ljl-cart-rule);
          border-block-end: var(--ljl-cart-rule);
}

.ljl-cart__title {
  margin: 0;
  font-family: "lust", serif;
  font-size: var(--font-size-h3);
  font-weight: 400;
  line-height: 1.1;
}

.ljl-cart__count {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ==============================
   Item list
   ============================== */

.ljl-cart__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ljl-cart-item {
  display: grid;
  grid-template-columns: var(--ljl-cart-media) minmax(0, 1fr) auto;
  grid-template-areas:
    "media name     remove"
    "media price    price"
    "media qty      subtotal";
  align-items: start;
  -moz-column-gap: var(--ljl-cart-gap);
       column-gap: var(--ljl-cart-gap);
  row-gap: 0.375rem;
  padding-block: 1.25rem;
  -webkit-border-after: var(--ljl-cart-rule);
          border-block-end: var(--ljl-cart-rule);
}

.ljl-cart-item:last-child {
  -webkit-border-after: none;
          border-block-end: none;
}

/* Media -------------------------------------------------- */

.ljl-cart-item__media {
  grid-area: media;
}

.ljl-cart-item__media a,
.ljl-cart-item__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ljl-cart-radius);
}

/* Name --------------------------------------------------- */

.ljl-cart-item__name {
  grid-area: name;
  align-self: center;
  min-width: 0;
}

.ljl-cart-item__name > a {
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  text-wrap: balance;
}

.ljl-cart-item__name > a:hover {
  text-decoration: underline;
}

/* Variation / meta data output by wc_get_formatted_cart_item_data(). */
.ljl-cart-item__name .variation {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.65;
}

.ljl-cart-item__name .variation dt,
.ljl-cart-item__name .variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}

.ljl-cart-item__name .variation dd + dt::before {
  content: " · ";
}

/* Pack-discount label, printed by ljl_pack_discount_cart_message(). It no
   longer needs the absolute positioning hack it had against the old table. */
.ljl-cart-item__name .ljl-pack-discount-label--cart {
  margin: 0.375rem 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-pink);
}

/* Price -------------------------------------------------- */

.ljl-cart-item__price {
  grid-area: price;
  align-self: center;
  font-size: 0.875rem;
  opacity: 0.7;
}

.ljl-cart-item__price del {
  opacity: 0.55;
  -webkit-margin-end: 0.25rem;
          margin-inline-end: 0.25rem;
}

.ljl-cart-item__price .ljl-gift-free-label {
  opacity: 1;
}

/* Quantity ----------------------------------------------- */

.ljl-cart-item__qty {
  grid-area: qty;
  align-self: end;
}

.ljl-cart-item__qty .quantity {
  display: inline-flex;
  align-items: center;
  border: var(--ljl-cart-rule);
  border-radius: var(--ljl-cart-radius);
  overflow: hidden;
}

/* The parent theme (zanna/assets/js/app.js) appends .qty-button elements to
   every .quantity and relies on DOM order, so the stepper is ordered here
   rather than in markup: minus, input, plus. */
.ljl-cart-item__qty .qty-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: background-color 0.15s ease;
}

.ljl-cart-item__qty .qty-button:hover {
  background-color: rgb(0 0 0 / 0.05);
}

/* cartEnhance.js renders these with role="button" tabindex="0", so they are
   reachable by keyboard and need a visible focus state. */
.ljl-cart-item__qty .qty-button:focus-visible {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: -2px;
  background-color: rgb(0 0 0 / 0.05);
}

.ljl-cart-item__qty .qty-button.dec {
  order: 1;
}

.ljl-cart-item__qty .quantity input.qty {
  order: 2;
  width: 2.75rem;
  /* The parent theme's app.css gives every input `height: 3rem` and
     `margin: 0 0 0.75rem`. The margin was adding 12px of dead space below the
     field, making the stepper 62px tall around 36px buttons. Both are reset
     here so the whole control is one consistent height. */
  height: 2.75rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: 0.875rem;
  /* Native spinners duplicate the +/- buttons. */
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

.ljl-cart-item__qty .quantity input.qty::-webkit-outer-spin-button,
.ljl-cart-item__qty .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ljl-cart-item__qty .qty-button.inc {
  order: 3;
}

.ljl-cart-item__qty .quantity br,
.ljl-cart-item__qty .quantity label {
  display: none;
}

/* Locked quantity on free-gift rows — see ljl_mark_locked_cart_quantity(). */
.ljl-cart-item__qty .ljl-qty-locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px dashed var(--color-gray);
  border-radius: var(--ljl-cart-radius);
  font-size: 0.875rem;
  opacity: 0.6;
}

/* Subtotal ----------------------------------------------- */

.ljl-cart-item__subtotal {
  grid-area: subtotal;
  align-self: end;
  justify-self: end;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Remove ------------------------------------------------- */

.ljl-cart-item__actions {
  grid-area: remove;
  justify-self: end;
}

/* Rendered as an X so it reads as a control, not body copy. The accessible
   name still comes from the aria-label WooCommerce puts on the link. */
.ljl-cart-item__remove.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  border-radius: 50%;
  opacity: 0.45;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
}

.ljl-cart-item__remove.remove::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background-color: currentColor;
  -webkit-mask: var(--ljl-cart-close) center / contain no-repeat;
  mask: var(--ljl-cart-close) center / contain no-repeat;
}

.ljl-cart-item__remove.remove:hover,
.ljl-cart-item__remove.remove:focus-visible {
  opacity: 1;
  background-color: rgb(0 0 0 / 0.06);
  color: inherit;
}

/* Pending state while a quantity change is debouncing or in flight.
   Deliberately does NOT set pointer-events: none — the customer has to be able
   to keep tapping + to go from 1 to 4, which is exactly what the debounce in
   cartEnhance.js is there to absorb. */
.ljl-cart-item.is-updating {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

/* ==============================
   Actions — coupon + update
   ============================== */

.ljl-cart__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  -webkit-padding-before: 1.25rem;
          padding-block-start: 1.25rem;
  -webkit-border-before: var(--ljl-cart-rule);
          border-block-start: var(--ljl-cart-rule);
}

.ljl-cart__coupon {
  flex: 1 1 min(100%, 28rem);
}

/* Specificity is deliberate. The theme sets `body button` and the Elementor kit
   sets `.elementor-kit-6 button` — both (0,1,1) — giving every button a solid
   dark fill, 1rem/2rem padding, uppercase and 4px letter-spacing. A plain
   `.ljl-cart__coupon-toggle` (0,1,0) loses to those, so the toggle rendered as a
   full black button. This selector is (0,2,1) and resets them all. */
.ljl-cart button.ljl-cart__coupon-toggle {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.ljl-cart button.ljl-cart__coupon-toggle:hover {
  background: none;
  background-color: transparent;
  color: inherit;
  opacity: 0.7;
}

/* Only offered once cartEnhance.js can actually collapse the panel. Applied in
   both static and in-place-update modes.

   Specificity must exceed the reset block above, which hides the toggle at
   (0,2,1) — a plain `.ljl-cart--enhanced .ljl-cart__coupon-toggle` (0,2,0) would
   lose to it and the toggle would never appear. This is (0,3,1). */
.ljl-cart.ljl-cart--enhanced button.ljl-cart__coupon-toggle {
  display: inline-block;
}

.ljl-cart__coupon-panel {
  display: flex;
  gap: 0.5rem;
}

.ljl-cart--enhanced .ljl-cart__coupon-panel {
  -webkit-margin-before: 0.75rem;
          margin-block-start: 0.75rem;
}

.ljl-cart__coupon-panel[hidden] {
  display: none;
}

/* The theme's app.css gives inputs `margin: 0 0 0.75rem` and buttons
   `padding: 1rem 2rem 0.9375rem`, which left the field offset from the panel
   edge and the Apply button 60px tall against a 48px input. Both are pinned to
   the same height here so the pair reads as one control. */
.ljl-cart__coupon-panel .input-text {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  min-height: 0;
  margin: 0;
  padding: 0 0.75rem;
}

.ljl-cart__coupon-panel .button {
  flex: 0 0 auto;
  height: 48px;
  min-height: 0;
  margin: 0;
  padding: 0 1.25rem;
}

/* In static mode this button IS the mechanism for saving a quantity, so it has
   to read clearly in both states. The theme left it white-on-white: `body .button`
   and `.elementor-kit-6 button` (both (0,1,1)) resolve its fill and text colour
   to the same white, so the label was invisible — most obvious when disabled,
   where a 0.5 opacity is layered on top. Styled here as an outline button at
   (0,2,1) so both states are legible. */
.ljl-cart button.ljl-cart__update {
  min-height: 48px;
  padding: 0 1.5rem;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background-color: #fff;
  color: var(--e-global-color-primary, #212121);
  border: 1px solid var(--e-global-color-primary, #212121);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.ljl-cart button.ljl-cart__update:hover:not(:disabled),
.ljl-cart button.ljl-cart__update:focus-visible:not(:disabled) {
  background-color: var(--e-global-color-primary, #212121);
  color: #fff;
}

.ljl-cart button.ljl-cart__update:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Hidden only when in-place quantity updating is enabled. In static mode this
   button is the mechanism, so it stays visible. */
/* (0,3,1) so it outranks the outline styling above, which is (0,2,1) — otherwise
   its min-height and padding would win here and the "visually hidden" button
   would still occupy 48px. min-height is reset for the same reason. */
.ljl-cart.ljl-cart--live-qty button.ljl-cart__update {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}

/* ==============================
   Totals
   ============================== */

/* The parent theme sets a flat `padding: 1.875rem` (30px) on this panel, which
   eats a lot of a phone's width — the panel is only ~454px wide there, so 60px
   of it was padding. Scaled down for narrow screens and back up to the theme's
   30px on desktop.

   Specificity: the theme's rule is
   `body.woocommerce-cart .cart-collaterals .cart_totals` at (0,3,1), and
   app.css loads AFTER this file (index 25 vs 19), so an equal-specificity rule
   here would lose the tie. Adding the `.woocommerce` ancestor makes this
   (0,4,1). */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  padding: clamp(1.125rem, 3.5vw, 1.875rem);
}

.ljl-cart-savings th,
.ljl-cart-savings td {
  color: var(--color-pink);
}

/* ==============================
   Sticky mobile checkout bar
   ============================== */

.ljl-cart-sticky {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  /* High enough to clear page content, deliberately below the sticky header
     (9995) and any consent or modal UI. It no longer needs to out-stack the
     woomotiv popups at 999999 — those are switched off on cart and checkout by
     ljl_disable_woomotiv_in_checkout_flow(). */
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--spacing-edge);
  -webkit-padding-after: max(0.75rem, env(safe-area-inset-bottom));
          padding-block-end: max(0.75rem, env(safe-area-inset-bottom));
  background-color: #fff;
  -webkit-border-before: var(--ljl-cart-rule);
          border-block-start: var(--ljl-cart-rule);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.06);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

/* Revealed by cartEnhance.js once the in-page checkout button scrolls out of
   view, so it never sits on top of the button it duplicates.

   NOT called .is-visible: the parent theme ships a global
   `.is-visible { display: block !important; }` utility in zanna/assets/css/app.css,
   which beat the `display: none` in the desktop media query below and left the
   bar showing on desktop. */
.ljl-cart-sticky--visible {
  transform: translateY(0);
}

.ljl-cart-sticky__summary {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ljl-cart-sticky__label {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.ljl-cart-sticky__total {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.1;
}

/* Safety net: if wpautop ever wraps the bar's children in a <p> again, this
   keeps the flex row intact instead of dropping the button onto its own line. */
.ljl-cart-sticky > p {
  display: contents;
}

/* Specificity is deliberate, as with the coupon toggle: `body .button` (0,1,1)
   in the theme sets the fill, text colour and 1rem/2rem padding, and
   `.elementor p a` underlines it. This selector is (0,2,1) and beats both. */
.ljl-cart-sticky a.ljl-cart-sticky__button {
  flex: 0 0 auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 1.75rem;
  font-family: "brandon-grotesque", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.225em;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--e-global-color-primary, #212121);
  color: var(--e-global-color-secondary, #fff);
  border: solid 1px var(--e-global-color-primary, #212121);
}

.ljl-cart-sticky a.ljl-cart-sticky__button:hover,
.ljl-cart-sticky a.ljl-cart-sticky__button:focus-visible {
  background-color: var(--e-global-color-secondary, #fff);
  color: var(--e-global-color-primary, #212121);
  text-decoration: none;
}

/* Clears the bar so the last row of the page stays reachable. */
body.woocommerce-cart:has(.ljl-cart-sticky) .site-content {
  -webkit-padding-after: 6rem;
          padding-block-end: 6rem;
}

/* ==============================
   Desktop
   ============================== */

@media (min-width: 48em) {
  .ljl-cart {
    --ljl-cart-media: 104px;
  }

  .ljl-cart-item {
    grid-template-columns:
      var(--ljl-cart-media) minmax(0, 1fr)
      6.5rem 8.5rem 6.5rem 2rem;
    grid-template-areas: "media name price qty subtotal remove";
    align-items: center;
    row-gap: 0;
  }

  .ljl-cart-item__price,
  .ljl-cart-item__qty,
  .ljl-cart-item__subtotal {
    align-self: center;
  }

  .ljl-cart-item__price {
    font-size: 0.9375rem;
    text-align: center;
  }

  .ljl-cart-item__qty {
    justify-self: center;
  }

  .ljl-cart-item__name > a {
    font-size: 1rem;
  }

  /* Kept on desktop too, not hidden.
     The totals panel measures ~1116px against a ~900px viewport, so its
     Checkout button scrolls out of reach on the way down to the upsell and
     cross-sells — and because the panel is taller than the viewport,
     position: sticky on the panel itself would not fix that either.
     The content is constrained to the site's measure so the bar does not read
     as edge-to-edge on a wide screen. */
  .ljl-cart-sticky {
    padding-inline: max(var(--spacing-edge), calc((100% - 1200px) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ljl-cart-sticky,
  .ljl-cart-item,
  .ljl-cart-item__remove.remove {
    transition: none;
  }
}