/* ECP Cart Panel v1.0.0 (2026-10-09). Markup: inc/ecp-cart-panel.php · JS: assets/js/ecp-cart.js
   Mobile <=768: flush under the header (same --ecp-mobile-panel-top as the hamburger), full remaining height.
   Desktop >=769: 420px right slide-out. Fixed sizes everywhere qty/price text can change (CLS ~0). */

.ecp-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 9998;
  opacity: 0;
  transition: opacity .22s ease;
}
html.ecp-cart-open .ecp-cart-overlay { opacity: 1; }
.ecp-cart-overlay[hidden] { display: none; }

.ecp-cart {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
  color: var(--ecp-text, #333);
  font-family: var(--ecp-font-body, 'Lato', sans-serif);
  visibility: hidden;
  pointer-events: none;
  outline: none;
  contain: layout paint;
}
html.ecp-cart-open .ecp-cart { visibility: visible; pointer-events: auto; }

/* ── Desktop: right slide-out ── */
@media (min-width: 769px) {
  .ecp-cart {
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .26s;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .08);
  }
  html.ecp-cart-open .ecp-cart { transform: translateX(0); transition: transform .26s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
}

/* ── Mobile: panel under the header, header stays visible above the overlay ── */
@media (max-width: 768px) {
  .ecp-cart-overlay { top: var(--ecp-mobile-panel-top, 120px); }
  .ecp-cart {
    top: var(--ecp-mobile-panel-top, 120px);
    left: 0;
    right: 0;
    width: 100%;
    height: auto; /* like the hamburger drawer: as tall as its content, never past the viewport */
    max-height: calc(100vh - var(--ecp-mobile-panel-top, 120px) + 2px);
    max-height: calc(100dvh - var(--ecp-mobile-panel-top, 120px) + 2px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    opacity: 0;
    transition: opacity .18s ease, visibility 0s linear .18s;
    border-bottom: 1px solid var(--ecp-border, #e8e8e8);
  }
  html.ecp-cart-open .ecp-cart { opacity: 1; transition: opacity .18s ease, visibility 0s; }
  html.ecp-cart-open div.ecp-site-header { z-index: 10001; }
  html.ecp-cart-open .ecp-announce,
  html.ecp-cart-open header.ecp-header-main { position: relative; z-index: 10001; }
  .ecp-cart__top { display: none !important; } /* the bag icon toggles; no X on mobile */
}

/* ── Desktop title row with close ── */
.ecp-cart__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--ecp-border, #e8e8e8);
}
.ecp-cart__title {
  font-family: var(--ecp-font-display, 'Merriweather', serif);
  font-size: 18px;
  color: var(--ecp-navy, #2a3a52);
}
#ecpCartPanel .ecp-cart__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ecp-navy, #2a3a52);
  cursor: pointer;
}

.ecp-cart__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Items (scroll) ── */
.ecp-cart__items {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px var(--ecp-cart-gutter, 20px);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ecp-cart__row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ecp-border, #e8e8e8);
  box-sizing: border-box;
  overflow: hidden;
  transition: height .22s ease, opacity .18s ease, padding .22s ease, background-color .6s ease, box-shadow .6s ease;
  /* Just-added highlight runs edge to edge: a spread shadow fills the list gutters left/right,
     clip-path keeps it from bleeding above/below. Paint-only: no layout change, no overflow. */
  box-shadow: 0 0 0 var(--ecp-cart-gutter, 20px) transparent;
  clip-path: inset(0 calc(-1 * var(--ecp-cart-gutter, 20px)));
}
.ecp-cart__row:last-child { border-bottom: 0; }
.ecp-cart__row.is-removing { opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; pointer-events: none; }
.ecp-cart__row.is-new { background-color: var(--ecp-bg-warm, #f5f3ef); box-shadow: 0 0 0 var(--ecp-cart-gutter, 20px) var(--ecp-bg-warm, #f5f3ef); }
.ecp-cart__row--child { grid-template-columns: 56px minmax(0, 1fr); padding-left: 24px; }
.ecp-cart__row--child .ecp-cart__img { width: 56px; height: 56px; }

.ecp-cart__img {
  width: 80px;
  height: 80px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ecp-bg-warm-alt, #f7f6f4);
}
.ecp-cart__img a, .ecp-cart__img img { display: block; width: 100%; height: 100%; }
.ecp-cart__img img { object-fit: cover; margin: 0; }

.ecp-cart__info { min-width: 0; }
.ecp-cart__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  column-gap: 10px;
  align-items: start;
}
.ecp-cart__name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ecp-navy, #2a3a52);
}
.ecp-cart__name a { color: inherit; text-decoration: none; }
.ecp-cart__name .edit, .ecp-cart__name a[href*="yith_wapo"], .ecp-cart__name .yith-wapo-edit {
  display: block; margin-top: 4px; font-size: 12px; font-weight: 700;
}
.ecp-cart__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ecp-cart__line-total {
  font-size: 15px;
  line-height: 20px;
  height: 20px;
  white-space: nowrap;
  color: var(--ecp-text, #333);
}
.ecp-cart__line-total .woocommerce-Price-amount { font-weight: 400; }
.ecp-cart__each {
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  white-space: nowrap;
  color: var(--ecp-text-light, #666);
}
.ecp-cart__each[data-off] { visibility: hidden; } /* reserved so qty 1 -> 2 never shifts the row */
.ecp-cart__split {
  font-size: 11px;
  line-height: 14px;
  color: #6b6f76;
}

.ecp-cart__meta { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ecp-text-mid, #555); }
.ecp-cart__meta dl.variation { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 2px; margin: 0; }
.ecp-cart__meta dl.variation dt { font-weight: 400; margin: 0; }
.ecp-cart__meta dl.variation dd { margin: 0; }
.ecp-cart__meta dl.variation dd p { margin: 0; }

.ecp-cart__low { margin: 6px 0 0; font-size: 12.5px; line-height: 16px; color: var(--ecp-terracotta, #b8472a); }
.ecp-cart__low[hidden] { display: none; }

.ecp-cart__qty-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-top: 10px;
}
#ecpCartPanel .ecp-cart__step {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--ecp-navy, #2a3a52);
  border-radius: 2px;
  background: #fff;
  color: var(--ecp-navy, #2a3a52);
  font: 700 18px/1 var(--ecp-font-body, 'Lato', sans-serif);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, color .15s;
}
#ecpCartPanel .ecp-cart__step:disabled { opacity: .35; cursor: not-allowed; }
.ecp-cart__qty {
  min-width: 64px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ecp-cart__row.is-busy .ecp-cart__qty::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ecp-cart-spin .7s linear infinite;
}
@keyframes ecp-cart-spin { to { transform: rotate(360deg); } }
#ecpCartPanel .ecp-cart__remove {
  margin-left: auto;
  padding: 8px 0 8px 8px;
  border: 0;
  background: transparent;
  color: var(--ecp-text-mid, #555);
  font: 700 11px/1 var(--ecp-font-body, 'Lato', sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Theme/Elementor-kit button rules (background, radius, padding, shadow, transform) must not leak in. */
#ecpCartPanel button { box-shadow: none; text-shadow: none; min-height: 0; line-height: 1; }

/* ── Footer (fixed at the bottom of the panel) ── */
.ecp-cart__footer {
  flex: none;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ecp-border, #e8e8e8);
  background: #fff;
}
.ecp-cart__subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 26px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ecp-navy, #2a3a52);
}
.ecp-cart__subtotal { font-variant-numeric: tabular-nums; }
/* Stacked, full width: Continue Shopping, then Checkout. Fixed 48px buttons keep the footer height constant (no CLS). */
.ecp-cart__actions { display: grid; grid-template-columns: 1fr; grid-template-rows: 48px 48px; gap: 10px; margin-top: 12px; }
#ecpCartPanel .ecp-cart__actions .ecp-cart__btn { width: 100%; }
#ecpCartPanel .ecp-cart__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 12px;
  border-radius: 6px;
  box-sizing: border-box;
  font: 700 13px/1 var(--ecp-font-body, 'Lato', sans-serif) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer;
}
#ecpCartPanel .ecp-cart__btn--ghost { border: 2px solid var(--ecp-navy, #2a3a52); background: transparent; color: var(--ecp-navy, #2a3a52) !important; }
#ecpCartPanel .ecp-cart__btn--primary { border: 2px solid var(--ecp-navy, #2a3a52); background: var(--ecp-navy, #2a3a52); color: #fff !important; }
.ecp-cart__note { margin: 10px 0 0; font-size: 12px; line-height: 1.4; text-align: center; color: var(--ecp-text-light, #666); }

/* ── Interaction states ──
   Hover only on devices that truly hover (no sticky hover after a tap); keyboard focus via :focus-visible only;
   pointer :focus/:active never leaves a highlight (also neutralises theme/kit button:focus rules). */
#ecpCartPanel button, #ecpCartPanel a { -webkit-tap-highlight-color: transparent; }
#ecpCartPanel .ecp-cart__step:focus, #ecpCartPanel .ecp-cart__step:active { background: #fff; color: var(--ecp-navy, #2a3a52); outline: none; box-shadow: none; }
#ecpCartPanel .ecp-cart__remove:focus, #ecpCartPanel .ecp-cart__remove:active,
#ecpCartPanel .ecp-cart__close:focus, #ecpCartPanel .ecp-cart__close:active { background: transparent; color: var(--ecp-text-mid, #555); outline: none; box-shadow: none; }
#ecpCartPanel .ecp-cart__close:focus, #ecpCartPanel .ecp-cart__close:active { color: var(--ecp-navy, #2a3a52); }
#ecpCartPanel .ecp-cart__btn--ghost:focus, #ecpCartPanel .ecp-cart__btn--ghost:active { background: transparent; color: var(--ecp-navy, #2a3a52) !important; outline: none; box-shadow: none; }
#ecpCartPanel .ecp-cart__btn--primary:focus, #ecpCartPanel .ecp-cart__btn--primary:active { background: var(--ecp-navy, #2a3a52); color: #fff !important; outline: none; box-shadow: none; }
/* Keyboard focus ring: placed after the :focus resets and at equal-or-higher specificity so it wins. */
#ecpCartPanel .ecp-cart__step:focus-visible, #ecpCartPanel .ecp-cart__remove:focus-visible, #ecpCartPanel .ecp-cart__close:focus-visible,
#ecpCartPanel .ecp-cart__btn:focus-visible, #ecpCartPanel .ecp-cart__name a:focus-visible { outline: 2px solid var(--ecp-navy, #2a3a52); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ecp-cart__name a:hover { text-decoration: underline; }
  #ecpCartPanel .ecp-cart__step:hover:not(:disabled) { background: var(--ecp-navy, #2a3a52); color: #fff; }
  #ecpCartPanel .ecp-cart__remove:hover { color: var(--ecp-navy, #2a3a52); text-decoration: underline; }
  #ecpCartPanel .ecp-cart__close:hover { background: var(--ecp-bg-warm, #f5f3ef); border-radius: 50%; }
  #ecpCartPanel .ecp-cart__btn--ghost:hover { background: var(--ecp-navy, #2a3a52); color: #fff !important; }
  #ecpCartPanel .ecp-cart__btn--primary:hover { background: var(--ecp-navy-hover, #1e2c3d); border-color: var(--ecp-navy-hover, #1e2c3d); }
}

/* ── Empty ── */
.ecp-cart__empty { padding: 32px 20px; text-align: center; }
.ecp-cart__empty-msg { margin: 0 0 18px; font-size: 16px; color: var(--ecp-text, #333); }
.ecp-cart__empty .ecp-cart__btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .ecp-cart, .ecp-cart-overlay, .ecp-cart__row { transition: none !important; }
}