/* ================================================================
   CART & CHECKOUT – herboristerie-ambre
   ================================================================ */

/* ── Shared: steps bar ───────────────────────────────────────── */
.checkout-steps {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  margin-bottom: 36px;
}

.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  transition: var(--transition);
}

.step.active .step-num {
  background: var(--green-primary);
  color: #fff;
}

.step.done .step-num {
  background: var(--green-dark);
  color: #fff;
  font-size: .9rem;
}

.step-label {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.step.active .step-label { color: var(--green-primary); font-weight: 700; }
.step.done   .step-label { color: var(--green-dark); }

.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 16px;
  min-width: 40px;
}
.step-line.done-line { background: var(--green-dark); }

/* ── Shared: summary ─────────────────────────────────────────── */
.summary-title {
  font-size: 1.05rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.edit-cart-link {
  font-size: .75rem;
  color: var(--green-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.summary-lines {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: .88rem;
  color: var(--text-muted);
}

.summary-line.summary-total {
  border-top: 1.5px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
}

.summary-line.summary-discount { color: #e74c3c; }

.free-tag { color: var(--green-primary); font-weight: 600; }

/* ================================================================
   CART PAGE
   ================================================================ */
.cart-page {
  background: var(--beige-light);
  min-height: 80vh;
  padding-bottom: 80px;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}

/* ── Column headers ──────────────────────────────────────────── */
.cart-col-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.cart-title {
  font-size: 1.5rem;
  color: var(--green-dark);
  font-family: 'Playfair Display', serif;
}

.cart-title-count {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  margin-left: 6px;
}

.cart-continue-link {
  font-size: .82rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--transition);
}
.cart-continue-link:hover { color: var(--green-primary); }

/* ── Free shipping bar ───────────────────────────────────────── */
.free-shipping-bar {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.fsb-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  color: var(--text);
  margin-bottom: 10px;
}
.fsb-text svg { color: var(--green-primary); flex-shrink: 0; }
.fsb-text.fsb-success { color: var(--green-primary); font-weight: 600; }

.fsb-track {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.fsb-fill {
  height: 100%;
  background: linear-gradient(to right, var(--green-primary), var(--green-light));
  border-radius: 3px;
  transition: width .6s ease;
}

/* ── Cart items list ─────────────────────────────────────────── */
.cart-items-list {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}

.cart-item {
  display: grid;
  grid-template-columns: 88px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--beige-light); }

.ci-img-wrap {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--beige);
}
.ci-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ci-info { min-width: 0; }
.ci-cat  { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-light); margin-bottom: 4px; }
.ci-name { font-size: .95rem; font-weight: 600; color: var(--green-dark); line-height: 1.3; display: block; }
.ci-name a { color: inherit; transition: var(--transition); }
.ci-name a:hover { color: var(--green-primary); }

/* Qty control */
.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.qty-btn {
  width: 34px;
  height: 36px;
  border: none;
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--green-dark);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { background: var(--beige); }
.qty-input {
  width: 40px;
  height: 36px;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--green-dark);
  background: var(--white);
  outline: none;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.ci-price {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green-dark);
  white-space: nowrap;
  min-width: 72px;
  text-align: right;
}

.ci-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.ci-remove:hover { background: #ffeaea; color: #e74c3c; }

/* ── Cart Summary (right col) ────────────────────────────────── */
.cart-summary {
  position: sticky;
  top: 90px;
}

.cart-summary-inner {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 24px;
}

/* Promo code */
.promo-section { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 16px; }

.promo-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .84rem;
  color: var(--green-primary);
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 0;
  font-weight: 500;
}
.promo-arrow { margin-left: auto; transition: transform .25s ease; }
.promo-toggle.open .promo-arrow { transform: rotate(180deg); }

.promo-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.promo-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: var(--transition);
  background: var(--beige-light);
}
.promo-input:focus { border-color: var(--green-primary); background: var(--white); }
.promo-apply-btn {
  padding: 10px 16px;
  background: var(--green-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.promo-apply-btn:hover { background: var(--green-dark); }

/* WooCommerce coupon form override */
.woocommerce-form-coupon-toggle,
.checkout_coupon { display: none !important; }

/* Checkout CTA */
.btn-checkout-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  margin-top: 20px;
}
.btn-checkout-main:hover {
  background: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(47,62,47,.25);
}

/* Summary trust */
.summary-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.st-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-muted);
}
.st-item svg { color: var(--green-primary); flex-shrink: 0; }

/* Payment icons */
.payment-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pi-badge {
  font-size: .68rem;
  padding: 3px 10px;
  background: var(--beige-light);
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text-muted);
}

/* ── Empty cart ───────────────────────────────────────────────── */
.cart-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-top: 32px;
}
.cart-empty-icon {
  width: 88px;
  height: 88px;
  background: var(--beige-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--text-muted);
}
.cart-empty h2 { font-size: 1.4rem; margin-bottom: 10px; color: var(--green-dark); }
.cart-empty p  { font-size: .9rem; color: var(--text-muted); margin-bottom: 28px; }

/* ================================================================
   CHECKOUT PAGE
   ================================================================ */
.checkout-page {
  background: var(--beige-light);
  min-height: 80vh;
  padding-bottom: 80px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

/* ── Checkout sections ───────────────────────────────────────── */
.checkout-section {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 16px;
  transition: var(--transition);
}
.checkout-section:focus-within {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(74,103,65,.08);
}

.cs-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--beige-light);
}

.cs-num {
  width: 28px;
  height: 28px;
  background: var(--green-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.cs-title {
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--green-dark);
  margin: 0;
}

.cs-body { padding: 22px; }

/* ── Form fields ─────────────────────────────────────────────── */
.form-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field-group {
  margin-bottom: 16px;
}
.field-group:last-child { margin-bottom: 0; }

.field-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.field-optional { font-weight: 400; color: var(--text-muted); font-size: .75rem; }
.req { color: #e74c3c; }

.field-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--beige-light);
  outline: none;
  transition: var(--transition);
}
.field-input:focus {
  border-color: var(--green-primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(74,103,65,.08);
}
.field-input::placeholder { color: #aab5aa; }
.field-input.error { border-color: #e74c3c; }

.field-textarea { resize: vertical; min-height: 80px; }
.field-hint     { font-size: .72rem; color: var(--text-muted); margin-top: 4px; display: block; }

/* WooCommerce field overrides */
.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout .form-row label { font-size: .82rem; font-weight: 600; color: var(--green-dark); margin-bottom: 6px; display: block; }
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select {
  width: 100% !important;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--beige-light);
  outline: none;
  transition: var(--transition);
}
.woocommerce-checkout .form-row .input-text:focus { border-color: var(--green-primary); background: var(--white); }
.woocommerce-checkout .form-row-first { float: none; width: 100%; }
.woocommerce-checkout .form-row-last  { float: none; width: 100%; }
.woocommerce-checkout .form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Payment methods ─────────────────────────────────────────── */
.payment-methods { display: flex; flex-direction: column; gap: 10px; }

.payment-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.payment-option input[type="radio"] { display: none; }
.payment-option.active {
  border-color: var(--green-primary);
  background: rgba(74,103,65,.04);
}

.po-icon { font-size: 1.4rem; flex-shrink: 0; }
.po-content { flex: 1; }
.po-content strong { display: block; font-size: .9rem; color: var(--green-dark); margin-bottom: 2px; }
.po-content span   { font-size: .78rem; color: var(--text-muted); }

.po-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: var(--transition);
}
.payment-option.active .po-check {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
}

/* WooCommerce payment override */
#payment { background: none !important; border-radius: 0 !important; padding: 0 !important; }
#payment .wc_payment_methods { list-style: none; display: flex; flex-direction: column; gap: 10px; }
#payment .wc_payment_method label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
  font-size: .9rem;
  color: var(--green-dark);
  font-weight: 500;
}
#payment .wc_payment_method input:checked + label { border-color: var(--green-primary); background: rgba(74,103,65,.04); }
#payment .payment_box { padding: 12px 16px; background: var(--beige-light); border-radius: 0 0 8px 8px; font-size: .82rem; color: var(--text-muted); }

/* ── Submit ──────────────────────────────────────────────────── */
.checkout-submit { margin-top: 4px; }

.btn-place-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .01em;
}
.btn-place-order:hover {
  background: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(47,62,47,.28);
}
.btn-place-order:active { transform: translateY(0); }

.submit-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 12px;
}
.submit-security svg { flex-shrink: 0; color: var(--green-primary); }

/* ── Checkout summary (right) ────────────────────────────────── */
.checkout-summary {
  position: sticky;
  top: 90px;
}

.checkout-summary-inner {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 24px;
}

.co-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}

.co-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.co-item-img {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--beige);
}
.co-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.co-qty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  background: var(--green-primary);
  color: #fff;
  border-radius: 50%;
  font-size: .62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-item-info { flex: 1; min-width: 0; }
.co-item-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--green-dark);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-item-price {
  font-size: .9rem;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Guarantees */
.co-guarantees {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.co-guar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-muted);
}
.co-guar-item svg { color: var(--green-primary); flex-shrink: 0; }

/* Remove coupon WC button */
.remove-coupon {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  font-size: .9rem;
  padding: 0 2px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cart-layout     { grid-template-columns: 1fr; }
  .cart-summary    { position: static; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary{ position: static; order: -1; }
}

@media (max-width: 600px) {
  .cart-item { grid-template-columns: 68px 1fr auto; grid-template-rows: auto auto; gap: 10px 12px; }
  .ci-img-wrap { width: 68px; height: 68px; }
  .ci-qty  { grid-column: 2; }
  .ci-price{ grid-column: 3; grid-row: 2; text-align: right; }
  .ci-remove { grid-column: 3; grid-row: 1; }
  .form-row-split { grid-template-columns: 1fr; }
  .steps-bar { gap: 0; max-width: 100%; }
  .step-line { min-width: 20px; }
}

/* ================================================================
   THANK YOU / ORDER CONFIRMATION PAGE
   ================================================================ */
.ty-page {
  background: var(--beige-light);
  min-height: 80vh;
  padding-bottom: 80px;
}

/* Confirmation hero */
.ty-hero {
  text-align: center;
  padding: 60px 0 36px;
}
.ty-check {
  width: 72px;
  height: 72px;
  background: var(--green-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: ty-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ty-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ty-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--green-dark);
  margin-bottom: 12px;
}
.ty-subtitle {
  font-size: .95rem;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Steps reuse */
.ty-steps {
  max-width: 480px;
  margin: 0 auto 40px;
}
.step.done .step-num {
  background: var(--green-primary);
  color: #fff;
  border-color: var(--green-primary);
}
.step-line.done-line { background: var(--green-primary); }

/* Two-column layout */
.ty-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

/* Cards */
.ty-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-bottom: 20px;
}
.ty-card:last-child { margin-bottom: 0; }
.ty-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--green-dark);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Order items */
.ty-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.ty-item:last-of-type { border-bottom: none; }
.ty-item-img {
  position: relative;
  width: 72px;
  height: 72px;
}
.ty-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.ty-img-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--beige);
  border: 1px solid var(--border);
}
.ty-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ty-item-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 3px;
}
.ty-item-meta { font-size: .78rem; color: var(--text-muted); }
.ty-item-price { font-weight: 700; font-size: .95rem; color: var(--green-dark); white-space: nowrap; }

/* Totals */
.ty-totals { margin-top: 18px; }
.ty-total-row {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--text-muted);
  padding: 6px 0;
}
.ty-total-main {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 12px;
}

/* Timeline (what's next) */
.ty-timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.tl-item:last-child { border-bottom: none; }
.tl-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.tl-item.active .tl-icon {
  border-color: var(--green-primary);
  background: #f0f5ef;
  color: var(--green-primary);
}
.tl-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 2px;
}
.tl-desc { font-size: .8rem; color: var(--text-muted); }

/* Address */
.ty-address {
  font-style: normal;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.8;
}

/* Trust */
.ty-trust { display: flex; flex-direction: column; gap: 16px; }
.ty-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ty-trust-item svg { flex-shrink: 0; margin-top: 2px; }
.ty-trust-title { font-size: .88rem; font-weight: 600; color: var(--green-dark); margin-bottom: 1px; }
.ty-trust-desc  { font-size: .78rem; color: var(--text-muted); }

/* CTAs */
.ty-cta-wrap { display: flex; flex-direction: column; gap: 12px; }
.ty-continue-btn {
  display: block;
  text-align: center;
  background: var(--green-primary);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .95rem;
  transition: var(--transition);
}
.ty-continue-btn:hover { background: var(--green-dark); }
.ty-account-link {
  text-align: center;
  font-size: .85rem;
  color: var(--green-primary);
  font-weight: 500;
  transition: var(--transition);
}
.ty-account-link:hover { color: var(--green-dark); }

/* Responsive */
@media (max-width: 900px) {
  .ty-layout { grid-template-columns: 1fr; }
  .ty-aside  { order: -1; }
}
@media (max-width: 600px) {
  .ty-hero { padding: 40px 0 28px; }
  .ty-item { grid-template-columns: 60px 1fr; }
  .ty-item-price { grid-column: 2; }
}

/* ================================================================
   PAGE.PHP – Generic page
   ================================================================ */
.pg-page {
  background: var(--beige-light);
  min-height: 60vh;
  padding: 60px 0 80px;
}
.pg-article { max-width: 800px; margin: 0 auto; }
.pg-header  { margin-bottom: 32px; }
.pg-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--green-dark);
  line-height: 1.25;
}
.pg-body {
  font-size: .97rem;
  line-height: 1.8;
  color: var(--text);
}
.pg-body h2, .pg-body h3 {
  font-family: 'Playfair Display', serif;
  color: var(--green-dark);
  margin: 32px 0 12px;
}
.pg-body p   { margin-bottom: 16px; }
.pg-body ul, .pg-body ol { margin: 0 0 16px 24px; }
.pg-body li  { margin-bottom: 6px; }
.pg-body a   { color: var(--green-primary); text-decoration: underline; }

/* ================================================================
   CHECKOUT – CONVERSION IMPROVEMENTS
   ================================================================ */

/* ── WooCommerce notices ─────────────────────────────────────────── */
.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.woocommerce-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.woocommerce-message { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; }
.woocommerce-info    { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; }

/* Inline notices div (JS-populated) */
.co-notices {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  color: #b91c1c;
  font-size: .88rem;
  padding: 12px 16px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.co-notices ul { list-style: none; margin: 0; padding: 0; }
.co-notices li { margin-bottom: 4px; }
.co-notices li:last-child { margin-bottom: 0; }

/* ── WooCommerce field validation states ─────────────────────────── */
.woocommerce-checkout .woocommerce-invalid > label { color: #e74c3c !important; }
.woocommerce-checkout .woocommerce-invalid .input-text,
.woocommerce-checkout .woocommerce-invalid select {
  border-color: #fca5a5 !important;
  background-color: #fef9f9 !important;
}
.woocommerce-checkout .woocommerce-validated .input-text,
.woocommerce-checkout .woocommerce-validated select {
  border-color: #86efac !important;
}
.woocommerce-checkout .woocommerce-invalid-required-field .field-label::after { content: ' — requis'; color: #e74c3c; font-size: .75rem; font-weight: 400; }

/* Field error in demo mode */
.field-input.field-error { border-color: #fca5a5; background: #fef9f9; }
.field-error-msg { font-size: .74rem; color: #e74c3c; margin-top: 4px; display: block; }

/* ── Submit button: loading state ────────────────────────────────── */
.btn-place-order .bpo-spinner { display: none; }

.btn-place-order.loading {
  cursor: wait;
  opacity: .85;
  pointer-events: none;
}
.btn-place-order.loading .bpo-arrow   { display: none; }
.btn-place-order.loading .bpo-spinner {
  display: block;
  animation: bpo-spin .7s linear infinite;
}

@keyframes bpo-spin { to { transform: rotate(360deg); } }

/* ── Trust badge strip ───────────────────────────────────────────── */
.checkout-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 11px 14px;
  background: var(--beige-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.ctb-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  color: var(--text-muted);
  font-weight: 500;
}
.ctb-item svg { color: var(--green-primary); flex-shrink: 0; }
.ctb-sep { color: var(--border); font-size: .8rem; line-height: 1; }

/* ── Summary total – enhanced emphasis ───────────────────────────── */
.summary-line.summary-total {
  background: #f0f5ef;
  border: 1.5px solid #c5d8c1;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 1.1rem;
}

/* ── Order notes field (WC mode) ─────────────────────────────────── */
.co-notes { margin-top: 16px; }
.co-notes .form-row { margin-bottom: 0; }
.co-notes textarea.input-text {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--beige-light);
  resize: vertical;
  outline: none;
  transition: var(--transition);
}
.co-notes textarea.input-text:focus { border-color: var(--green-primary); background: var(--white); }
.co-notes label { display: none; }

/* ================================================================
   SIMPLIFIED CHECKOUT – Morocco COD
   ================================================================ */

/* All WC form-row-wide fields go full width */
.woocommerce-checkout .form-row-wide { width: 100% !important; float: none !important; }
.woocommerce-checkout .form-row { clear: both; }

/* WC payment section – clean COD card */
#payment .wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
#payment .wc_payment_method {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  transition: var(--transition);
}
#payment .wc_payment_method input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
}
#payment .wc_payment_method > label {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: .93rem;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--white);
  margin: 0;
}
#payment .wc_payment_method > label::before {
  content: '📦';
  font-size: 1.3rem;
  flex-shrink: 0;
}
#payment .wc_payment_method input:checked ~ label {
  border-color: var(--green-primary);
  background: rgba(74,103,65,.04);
}
#payment .wc_payment_method.payment_method_cod {
  border-color: var(--green-primary);
  background: rgba(74,103,65,.03);
}
#payment .payment_box {
  padding: 0 18px 14px;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
  background: transparent;
  border: none;
  border-radius: 0;
}
#payment .payment_box p { margin: 0; }

/* COD selected indicator */
#payment .wc_payment_method.payment_method_cod > label::after {
  content: '';
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Place-order button — bigger, bolder */
.btn-place-order {
  font-size: 1.1rem;
  padding: 20px;
  border-radius: 12px;
  letter-spacing: .02em;
  box-shadow: 0 4px 20px rgba(47,62,47,.18);
}
.btn-place-order:hover {
  box-shadow: 0 8px 32px rgba(47,62,47,.28);
}

/* WC terms/privacy text */
#place_order ~ .woocommerce-terms-and-conditions-wrapper {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}

/* Hide WC's default "Place order" button duplicate & shipping calc */
.woocommerce-shipping-calculator,
.woocommerce-checkout #order_review_heading { display: none; }

/* Tighten section spacing — 2 sections instead of 3 */
.checkout-section { margin-bottom: 14px; }

/* Required asterisk on WC labels */
.woocommerce-checkout .form-row .required { color: #e74c3c; }

/* "Email facultatif" helper text */
#billing_email_field label .optional { font-size: .73rem; color: var(--text-muted); font-weight: 400; }

/* Responsive: summary on top for mobile */
@media (max-width: 900px) {
  .checkout-summary { order: -1; }
}

/* ================================================================
   SMART CHECKOUT — prefill card, COD badge, edit toggle
   ================================================================ */

/* ── cs-header: title row with edit button ───────────────────── */
.cs-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-edit-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--green-primary);
  background: none;
  border: 1px solid var(--green-primary);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.cs-edit-btn:hover {
  background: var(--green-primary);
  color: #fff;
}

/* ── Pre-filled card (logged-in users) ───────────────────────── */
.prefilled-card {
  background: #f9faf6;
  border: 1.5px solid #d6e4d3;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prefilled-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  color: var(--text-dark);
}
.prefilled-row svg {
  flex-shrink: 0;
  color: var(--green-primary);
}

/* ── COD delivery badge ──────────────────────────────────────── */
.cod-delivery-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f4f8f3;
  border: 1.5px solid #c8dfc4;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0;
}
.cod-badge-icon {
  width: 44px;
  height: 44px;
  background: var(--green-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.cod-badge-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cod-badge-content strong {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-dark);
}
.cod-badge-content span {
  font-size: .8rem;
  color: var(--text-muted);
}
.cod-badge-check {
  width: 28px;
  height: 28px;
  background: var(--green-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

/* ── Off-screen WC payment section (not display:none — WC JS needs to init radio state) ─ */
.co-payment-hidden {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* Suppress WC-generated #place_order inside the hidden section (theme has its own) */
.co-payment-hidden #place_order,
.co-payment-hidden .place-order {
  display: none !important;
}

/* ── Delivery notes (inline, compact) ───────────────────────── */
.co-notes-inline {
  margin-bottom: 4px;
}
.co-notes-inline textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: .88rem;
  font-family: inherit;
  color: var(--text-dark);
  background: var(--white);
  resize: none;
  min-height: 72px;
  transition: border-color .2s;
}
.co-notes-inline textarea:focus {
  outline: none;
  border-color: var(--green-primary);
}

/* ================================================================
   THANK YOU PAGE — order meta bar
   ================================================================ */
.ty-greeting {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 6px 0 10px;
}
.ty-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin-bottom: 36px;
}
.ty-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}
.ty-meta-icon {
  width: 36px;
  height: 36px;
  background: #f0f5ef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-primary);
  flex-shrink: 0;
}
.ty-meta-label {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 1px;
}
.ty-meta-val {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--green-dark);
}

/* Delivery card */
.ty-delivery-card { padding: 20px 24px !important; }
.ty-delivery-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ty-delivery-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #f0f5ef 0%, #e3ede1 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-primary);
  flex-shrink: 0;
}
.ty-delivery-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green-dark);
  margin-bottom: 2px;
}
.ty-delivery-sub {
  font-size: .82rem;
  color: var(--text-muted);
}

/* Guest prompt */
.ty-guest-prompt {
  background: linear-gradient(135deg, #f4f8f3 0%, #eaf2e7 100%);
  border: 1.5px solid #c8dfc4;
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}
.tgp-icon {
  width: 52px;
  height: 52px;
  background: var(--green-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.tgp-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--green-dark);
  margin: 0 0 8px;
}
.tgp-text {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.tgp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tgp-btn {
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  transition: background .2s, color .2s, box-shadow .2s;
}
.tgp-btn--primary {
  background: var(--green-primary);
  color: #fff;
}
.tgp-btn--primary:hover {
  background: var(--green-dark);
  box-shadow: 0 4px 14px rgba(47,62,47,.2);
  color: #fff;
}
.tgp-btn--secondary {
  background: #fff;
  color: var(--green-primary);
  border: 1.5px solid var(--green-primary);
}
.tgp-btn--secondary:hover {
  background: var(--green-primary);
  color: #fff;
}

/* ================================================================
   CHECKOUT / THANKYOU — Simplified footer
   ================================================================ */
.checkout-footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 24px 0;
  margin-top: 60px;
}
.checkout-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.checkout-footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.checkout-footer-logo-img {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}
.checkout-footer-links {
  display: flex;
  gap: 20px;
}
.checkout-footer-links a {
  font-size: .82rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.checkout-footer-links a:hover { color: var(--green-primary); }
.checkout-footer-copy {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0;
}

/* ================================================================
   THANK YOU PAGE — legacy guest account prompt (unused, kept for safety)
   ================================================================ */
.thankyou-account-prompt {
  background: linear-gradient(135deg, #f9fbf7 0%, #eef4ec 100%);
  border: 1.5px solid #c8dfc4;
  border-radius: 20px;
  padding: 36px 32px;
  text-align: center;
  margin: 40px 0 20px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.tap-icon {
  width: 60px;
  height: 60px;
  background: var(--green-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: #fff;
}
.tap-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 10px;
}
.tap-text {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}
.tap-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.tap-btn-primary {
  background: var(--green-primary);
  color: #fff;
  padding: 12px 26px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
}
.tap-btn-primary:hover {
  background: var(--green-dark);
  box-shadow: 0 4px 16px rgba(47,62,47,.2);
  color: #fff;
}
.tap-btn-secondary {
  background: #fff;
  color: var(--green-primary);
  border: 1.5px solid var(--green-primary);
  padding: 12px 26px;
  border-radius: 50px;
  font-weight: 500;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.tap-btn-secondary:hover {
  background: var(--green-primary);
  color: #fff;
}

@media (max-width: 600px) {
  .thankyou-account-prompt { padding: 24px 18px; }
  .tap-actions { flex-direction: column; align-items: center; }
  .tap-btn-primary, .tap-btn-secondary { width: 100%; text-align: center; }
  .cod-delivery-badge { flex-wrap: wrap; }
  /* Meta bar */
  .ty-meta-bar { gap: 10px; padding: 14px 16px; }
  .ty-meta-item { min-width: calc(50% - 5px); }
  /* Guest prompt */
  .ty-guest-prompt { flex-direction: column; gap: 14px; padding: 20px 18px; }
  .tgp-actions { flex-direction: column; }
  .tgp-btn { text-align: center; }
  /* Checkout footer */
  .checkout-footer-inner { flex-direction: column; text-align: center; gap: 12px; }
  .checkout-footer-links { justify-content: center; }
}

/* ================================================================
   CART PAGE — WooCommerce integration & polish
   ================================================================ */

/* WC price spans inside cart items/totals */
.ci-price .woocommerce-Price-amount { font-weight: 700; }
.ci-price .woocommerce-Price-currencySymbol { font-size: .85em; margin-right: 2px; }
.summary-line .woocommerce-Price-amount { font-weight: 600; }
.summary-line.summary-total .woocommerce-Price-amount { font-size: 1.05rem; font-weight: 700; }

/* WC notices in cart */
.cart-page .woocommerce-notices-wrapper { margin-bottom: 16px; }
.cart-page .woocommerce-error,
.cart-page .woocommerce-message,
.cart-page .woocommerce-info {
  list-style: none;
  margin: 0 0 12px;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: .88rem;
  line-height: 1.5;
}
.cart-page .woocommerce-message { border-color: var(--green-primary); color: var(--green-dark); }
.cart-page .woocommerce-error   { border-color: #e74c3c; color: #c0392b; }
.cart-page .woocommerce-error li,
.cart-page .woocommerce-message li { list-style: none; margin: 0; }

/* WC coupon form — the global rule hides .checkout_coupon for checkout;
   override it on the cart page so the form shows inside #promoInputWrap */
.cart-page .woocommerce-form-coupon-toggle { display: none !important; }
.cart-page #promoInputWrap .checkout_coupon {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
.cart-page #promoInputWrap .checkout_coupon p.form-row { margin: 0; padding: 0; }
.cart-page #promoInputWrap .checkout_coupon .form-row-first { flex: 1; min-width: 0; }
.cart-page #promoInputWrap .checkout_coupon .form-row-last { flex: none; }
.cart-page #promoInputWrap .checkout_coupon #coupon_code {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  background: var(--beige-light);
  transition: var(--transition);
  color: var(--text);
}
.cart-page #promoInputWrap .checkout_coupon #coupon_code:focus {
  border-color: var(--green-primary);
  background: var(--white);
}
.cart-page #promoInputWrap .checkout_coupon [name="apply_coupon"] {
  padding: 10px 16px;
  background: var(--green-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.cart-page #promoInputWrap .checkout_coupon [name="apply_coupon"]:hover {
  background: var(--green-dark);
}

/* Applied coupon remove link */
.summary-discount .woocommerce-remove-coupon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(231,76,60,.1);
  color: #e74c3c;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
  transition: var(--transition);
}
.summary-discount .woocommerce-remove-coupon:hover { background: #e74c3c; color: #fff; }

/* Empty cart CTA button */
.btn-cart-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--green-dark);
  color: #fff;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: var(--transition);
}
.btn-cart-primary:hover {
  background: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(47,62,47,.2);
}

/* ── Cart mobile: stack summary above items ───────────────────── */
@media (max-width: 768px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-summary {
    position: static;
    order: -1;
  }
  .cart-items-col { order: 2; }
}

/* ================================================================
   CART — Full style refresh (v3)
   Replaces the old 5-col grid with a clean flex row.
   All selectors use .cart-items-list prefix for specificity.
   ================================================================ */

/* Two-column page layout */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
  padding-top: 24px;
}

/* ── Item row (flex) ─────────────────────────────────────────── */
.cart-items-list .cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background .18s;
}
.cart-items-list .cart-item:last-child { border-bottom: none; }
.cart-items-list .cart-item:hover { background: #fafaf8; }

/* Thumbnail */
.cart-items-list .ci-img-wrap {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--beige);
}
.cart-items-list .ci-img-wrap a { display: block; width: 100%; height: 100%; }
.cart-items-list .ci-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Info block */
.cart-items-list .ci-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.cart-items-list .ci-cat {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 3px;
}
.cart-items-list .ci-name {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--green-dark);
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .18s;
}
.cart-items-list .ci-name:hover { color: var(--green-primary); }

/* WC variation / attribute data (e.g. "Herbes: Bio Marocaines") */
.cart-items-list .ci-info dl.variation,
.cart-items-list .ci-info .wc-item-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 5px 0 0;
  padding: 3px 8px;
  background: var(--beige-light);
  border-radius: 6px;
  font-size: .72rem;
  line-height: 1.5;
}
.cart-items-list .ci-info dl.variation dt,
.cart-items-list .ci-info .wc-item-meta dt {
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  display: inline;
}
.cart-items-list .ci-info dl.variation dt::after { content: ':'; }
.cart-items-list .ci-info dl.variation dd,
.cart-items-list .ci-info .wc-item-meta dd {
  color: var(--text);
  margin: 0 6px 0 2px;
  display: inline;
}
.cart-items-list .ci-info dl.variation dd p { display: inline; margin: 0; }

/* Right group: qty + price + remove */
.ci-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Qty stepper */
.ci-right .qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.ci-right .qty-btn {
  width: 32px;
  height: 34px;
  border: none;
  background: none;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
  line-height: 1;
}
.ci-right .qty-btn:hover { background: var(--beige); }
.ci-right .qty-input {
  width: 38px;
  height: 34px;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--green-dark);
  background: var(--white);
  outline: none;
  -moz-appearance: textfield;
}
.ci-right .qty-input::-webkit-outer-spin-button,
.ci-right .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Price */
.ci-right .ci-price {
  font-weight: 700;
  font-size: .98rem;
  color: var(--green-dark);
  white-space: nowrap;
  min-width: 64px;
  text-align: right;
  direction: ltr;
}
.ci-right .ci-price .woocommerce-Price-amount { font-weight: 700; }
.ci-right .ci-price bdi { direction: ltr; unicode-bidi: embed; }

/* Remove button */
.ci-right .ci-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #b8c4b8;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.ci-right .ci-remove:hover { background: #ffeaea; color: #e74c3c; }

/* ── Summary box ─────────────────────────────────────────────── */
.cart-summary { position: sticky; top: 90px; }
.cart-summary-inner {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 24px;
}
.summary-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--green-dark);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Totals */
.summary-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 4px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
  color: var(--text);
}
.summary-line > span:first-child { color: var(--text-muted); }
.summary-line.summary-total {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--green-dark);
  padding: 12px 14px;
  background: #f0f5ef;
  border: 1.5px solid #c8d8c4;
  border-radius: 8px;
  margin-top: 8px;
}
.summary-line.summary-total > span:first-child { color: var(--green-dark); }
.summary-line.summary-total .woocommerce-Price-amount { font-weight: 700; }
.summary-line.summary-discount { color: #c0392b; }
.summary-line.summary-discount > span:first-child { color: #c0392b; }

/* Checkout CTA */
.btn-checkout-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: var(--green-dark);
  color: #fff !important;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: background .2s, transform .2s, box-shadow .2s;
  letter-spacing: .01em;
}
.btn-checkout-main:hover {
  background: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(47,62,47,.22);
}
.btn-checkout-main svg { flex-shrink: 0; }

/* Trust strip */
.summary-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.st-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-muted);
}
.st-item svg { color: var(--green-primary); flex-shrink: 0; }

/* Payment badges */
.payment-icons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pi-badge {
  font-size: .67rem;
  padding: 3px 10px;
  background: var(--beige-light);
  border: 1px solid var(--border);
  border-radius: 50px;
  color: var(--text-muted);
}

/* ── Cart responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; order: -1; }
  .cart-items-col { order: 2; }
}
@media (max-width: 640px) {
  .cart-items-list .cart-item { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  .cart-items-list .ci-img-wrap { width: 68px; height: 68px; }
  .cart-items-list .ci-info { flex: 1 0 calc(100% - 84px); }
  .ci-right { width: 100%; justify-content: flex-end; padding-left: 80px; }
}

/* ================================================================
   WC DEFAULT CART — Premium visual redesign
   Targets body.woocommerce-cart + WC classic cart HTML structure:
   form.woocommerce-cart-form → table.shop_table.cart
   div.cart-collaterals → div.cart_totals
   ================================================================ */

/* ── Page chrome ─────────────────────────────────────────────── */

/* Keep the Playfair page title but make it lighter / smaller */
.woocommerce-cart .pg-header { margin-bottom: 28px; }
.woocommerce-cart .pg-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--green-dark);
  font-weight: 600;
}

/* Beige background for entire cart section */
.woocommerce-cart .pg-page { background: var(--beige-light); padding-bottom: 72px; }

/* Two-column layout: cart table left, totals right */
.woocommerce-cart .pg-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0 28px;
  align-items: start;
}
.woocommerce-cart .pg-body .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .pg-body .woocommerce-cart-form      { grid-column: 1; grid-row: 1; }
.woocommerce-cart .pg-body .cart-collaterals {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 90px;
}

/* ── Notices ─────────────────────────────────────────────────── */
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
  list-style: none;
  margin: 0 0 14px;
  padding: 13px 18px 13px 20px;
  border-left: 4px solid var(--green-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--white);
  font-size: .9rem;
  color: var(--green-dark);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: #e74c3c;
  color: #c0392b;
}
.woocommerce-cart .woocommerce-notices-wrapper li { list-style: none; margin: 0; }

/* ── Cart table (card look) ──────────────────────────────────── */
.woocommerce-cart .shop_table.cart {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(47,62,47,.05);
  overflow: hidden;
  margin-bottom: 0;
}

/* Slim label header */
.woocommerce-cart .shop_table.cart thead {
  background: var(--beige-light);
  border-bottom: 1.5px solid var(--border);
}
.woocommerce-cart .shop_table.cart thead th {
  padding: 10px 14px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: none;
}
/* remove + thumbnail header cells are invisible — space reserved by td widths */
.woocommerce-cart .shop_table.cart thead .product-remove,
.woocommerce-cart .shop_table.cart thead .product-thumbnail { visibility: hidden; }

/* ── Item rows ───────────────────────────────────────────────── */
.woocommerce-cart .shop_table.cart tbody tr.cart_item {
  border-bottom: 1px solid var(--border);
  transition: background .18s ease;
}
.woocommerce-cart .shop_table.cart tbody tr.cart_item:last-child { border-bottom: none; }
.woocommerce-cart .shop_table.cart tbody tr.cart_item:hover { background: #fafaf8; }

/* Base td */
.woocommerce-cart .shop_table.cart td {
  padding: 18px 14px;
  vertical-align: middle;
  border: none;
}

/* Remove × button */
.woocommerce-cart .shop_table.cart td.product-remove {
  width: 40px;
  padding-left: 16px;
  padding-right: 4px;
}
.woocommerce-cart .shop_table.cart td.product-remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #c0c8c0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.woocommerce-cart .shop_table.cart td.product-remove a.remove:hover {
  background: #ffeaea;
  color: #e74c3c;
}

/* Product thumbnail */
.woocommerce-cart .shop_table.cart td.product-thumbnail {
  width: 90px;
  padding-right: 8px;
  padding-left: 8px;
}
.woocommerce-cart .shop_table.cart td.product-thumbnail a {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--beige);
}
.woocommerce-cart .shop_table.cart td.product-thumbnail img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  display: block;
}

/* Product name */
.woocommerce-cart .shop_table.cart td.product-name a {
  font-size: .95rem;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  transition: color .18s;
}
.woocommerce-cart .shop_table.cart td.product-name a:hover { color: var(--green-primary); }

/* Variation data — pill badge */
.woocommerce-cart .shop_table.cart td.product-name dl.variation {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 6px 0 0;
  padding: 3px 9px;
  background: var(--beige-light);
  border-radius: 6px;
  font-size: .72rem;
  line-height: 1.6;
}
.woocommerce-cart .shop_table.cart td.product-name dl.variation dt {
  display: inline;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.woocommerce-cart .shop_table.cart td.product-name dl.variation dt::after { content: ': '; }
.woocommerce-cart .shop_table.cart td.product-name dl.variation dd {
  display: inline;
  margin: 0 8px 0 0;
  color: var(--text);
}
.woocommerce-cart .shop_table.cart td.product-name dl.variation dd p { display: inline; margin: 0; }

/* Unit price — subtle, muted */
.woocommerce-cart .shop_table.cart td.product-price {
  white-space: nowrap;
  font-size: .9rem;
}
.woocommerce-cart .shop_table.cart td.product-price .woocommerce-Price-amount { color: var(--text-muted); }

/* Quantity cell */
.woocommerce-cart .shop_table.cart td.product-quantity { width: 120px; }
.woocommerce-cart .shop_table.cart td.product-quantity .quantity {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  width: fit-content;
}
.woocommerce-cart .shop_table.cart td.product-quantity .qty {
  width: 42px;
  height: 36px;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--green-dark);
  background: var(--white);
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.woocommerce-cart .shop_table.cart td.product-quantity .qty::-webkit-inner-spin-button,
.woocommerce-cart .shop_table.cart td.product-quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* +/- buttons (injected by cart-checkout.js) */
.wc-qty-btn {
  width: 32px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
  line-height: 1;
  font-family: 'DM Sans', sans-serif;
}
.wc-qty-btn:hover { background: var(--beige); }

/* Row subtotal */
.woocommerce-cart .shop_table.cart td.product-subtotal {
  text-align: right;
  white-space: nowrap;
}
.woocommerce-cart .shop_table.cart td.product-subtotal .woocommerce-Price-amount {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green-dark);
}

/* ── Coupon + update row ──────────────────────────────────────── */
.woocommerce-cart .shop_table.cart td.actions {
  padding: 18px 20px;
  background: var(--beige-light);
  border-top: 1.5px solid var(--border);
}
/* Coupon inline form */
.woocommerce-cart .coupon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.woocommerce-cart .coupon label { display: none; }
.woocommerce-cart .coupon #coupon_code {
  width: 200px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .88rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border-color .2s;
}
.woocommerce-cart .coupon #coupon_code:focus { border-color: var(--green-primary); }
.woocommerce-cart .coupon #coupon_code::placeholder { color: #a8b5a8; }
.woocommerce-cart .coupon .button {
  padding: 9px 18px;
  background: transparent;
  color: var(--green-primary);
  border: 1.5px solid var(--green-primary);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.woocommerce-cart .coupon .button:hover {
  background: var(--green-primary);
  color: #fff;
}
/* Update cart — ghost button, right-aligned */
.woocommerce-cart button[name="update_cart"] {
  float: right;
  padding: 9px 18px;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.woocommerce-cart button[name="update_cart"]:hover {
  border-color: var(--green-primary);
  color: var(--green-primary);
}
.woocommerce-cart button[name="update_cart"]:disabled { opacity: .4; cursor: default; }

/* ── Cart totals (right sidebar) ─────────────────────────────── */
.woocommerce-cart .cart_totals {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 26px;
  box-shadow: 0 2px 20px rgba(47,62,47,.05);
}
.woocommerce-cart .cart_totals h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--green-dark);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Inner totals table */
.woocommerce-cart .cart_totals .shop_table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}
.woocommerce-cart .cart_totals .shop_table tr { border-bottom: 1px solid var(--border); }
.woocommerce-cart .cart_totals .shop_table tr:last-child { border-bottom: none; }
.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart_totals .shop_table td {
  padding: 12px 4px;
  border: none;
  background: transparent;
  font-size: .9rem;
}
.woocommerce-cart .cart_totals .shop_table th {
  color: var(--text-muted);
  font-weight: 600;
  text-align: left;
  vertical-align: middle;
}
.woocommerce-cart .cart_totals .shop_table td {
  text-align: right;
  color: var(--text);
  font-weight: 500;
  vertical-align: middle;
}

/* Shipping row */
.woocommerce-cart .cart_totals #shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce-cart .cart_totals #shipping_method li { font-size: .88rem; text-align: right; }
.woocommerce-cart .cart_totals .shipping-calculator-button {
  display: block;
  font-size: .76rem;
  color: var(--green-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 6px;
  text-align: right;
}

/* Coupon discount row */
.woocommerce-cart .cart_totals .cart-discount th,
.woocommerce-cart .cart_totals .cart-discount td { color: #27ae60; }
.woocommerce-cart .cart_totals .woocommerce-remove-coupon {
  display: inline-block;
  font-size: .7rem;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: 20px;
  margin-left: 6px;
  transition: border-color .18s, color .18s;
}
.woocommerce-cart .cart_totals .woocommerce-remove-coupon:hover {
  border-color: #e74c3c;
  color: #e74c3c;
}

/* Order total — green-tinted highlight card */
.woocommerce-cart .cart_totals .order-total { border-bottom: none; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  padding: 14px 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  background: #f0f5ef;
}
.woocommerce-cart .cart_totals .order-total th { border-radius: 8px 0 0 8px; }
.woocommerce-cart .cart_totals .order-total td { border-radius: 0 8px 8px 0; }
.woocommerce-cart .cart_totals .order-total strong,
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
  font-size: 1.15rem;
  font-weight: 800;
}

/* ── Checkout CTA ────────────────────────────────────────────── */
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 20px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 24px;
  background: var(--green-dark);
  color: #fff;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  border: none;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
  content: '→';
  font-size: 1.15rem;
  display: inline-block;
  transition: transform .2s;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(47,62,47,.22);
  color: #fff;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::after {
  transform: translateX(4px);
}

/* Micro-trust line — rendered by .cart_totals::after in §9 (v5).
   This older .cart-collaterals::after is suppressed to avoid duplication. */
.woocommerce-cart .cart-collaterals::after {
  content: none;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Stack: totals above items on tablet/mobile */
  .woocommerce-cart .pg-body {
    grid-template-columns: 1fr;
  }
  .woocommerce-cart .pg-body .woocommerce-cart-form { grid-row: 2; }
  .woocommerce-cart .pg-body .cart-collaterals      { grid-column: 1; grid-row: 1; position: static; }
}

@media (max-width: 640px) {
  /* Table rows become flex cards */
  .woocommerce-cart .shop_table.cart thead { display: none; }

  .woocommerce-cart .shop_table.cart,
  .woocommerce-cart .shop_table.cart tbody,
  .woocommerce-cart .shop_table.cart tfoot,
  .woocommerce-cart .shop_table.cart tr { display: block; }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 10px;
  }
  .woocommerce-cart .shop_table.cart tr.cart_item td { padding: 0; border: none; }

  .woocommerce-cart .shop_table.cart td.product-remove    { order: 0; flex-shrink: 0; }
  .woocommerce-cart .shop_table.cart td.product-thumbnail { order: 1; flex-shrink: 0; }
  .woocommerce-cart .shop_table.cart td.product-name      { order: 2; flex: 1; min-width: 0; }
  .woocommerce-cart .shop_table.cart td.product-price     { display: none; }
  .woocommerce-cart .shop_table.cart td.product-quantity  { order: 3; }
  .woocommerce-cart .shop_table.cart td.product-subtotal  {
    order: 4;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .woocommerce-cart .shop_table.cart td.product-subtotal::before {
    content: attr(data-title);
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  /* Actions row */
  .woocommerce-cart .shop_table.cart td.actions { display: block; padding: 14px 16px; }
  .woocommerce-cart .coupon { flex-wrap: wrap; gap: 8px; }
  .woocommerce-cart .coupon #coupon_code { width: 100%; }
  .woocommerce-cart button[name="update_cart"] {
    float: none;
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║   CART — FINAL POLISHED REDESIGN  v5                        ║
   ║   Premium herbal / wellness brand · WooCommerce classic      ║
   ║   All rules scoped to body.woocommerce-cart                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── §0  Design tokens (cart-page scope) ─────────────────────── */
.woocommerce-cart {
  --cg:        #2f3e2f;   /* brand dark green          */
  --cg-mid:    #4a6741;   /* brand mid green            */
  --cg-soft:   #6f8f6b;   /* brand light green          */
  --cg-tint:   #eef4ec;   /* very light green fill      */
  --cg-border: #e2e8df;   /* table/card borders         */
  --cg-muted:  #7a8c7a;   /* secondary text             */
  --cg-bg:     #f5f4f0;   /* page background            */
  --cg-white:  #ffffff;
  --cg-r:      13px;      /* card radius                */
  --cg-r-sm:   8px;       /* inner radius               */
  --cg-r-pill: 50px;      /* pill radius                */
  --cg-ease:   cubic-bezier(.4, 0, .2, 1);
  --cg-shadow: 0 2px 18px rgba(47,62,47,.07);
  --cg-shadow-hover: 0 10px 36px rgba(47,62,47,.20);
}

/* ── §1  Page background & title ─────────────────────────────── */

/* Warm off-white page bg — feels natural, not clinical */
.woocommerce-cart .pg-page {
  background: var(--cg-bg);
  min-height: 82vh;
  padding-bottom: 80px;
}

.woocommerce-cart .pg-header { margin-bottom: 32px; }
.woocommerce-cart .pg-title  {
  font-family: 'Playfair Display', serif;
  font-size: 1.9rem;
  color: var(--cg);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* ── §2  Two-column grid layout ──────────────────────────────── */

/* Cart table left  |  Totals sidebar right (sticky) */
.woocommerce-cart .pg-body {
  display: grid;
  grid-template-columns: 1fr 348px;
  gap: 0 26px;
  align-items: start;
}
.woocommerce-cart .pg-body .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .pg-body .woocommerce-cart-form      { grid-column: 1; grid-row: 1; }
.woocommerce-cart .pg-body .cart-collaterals {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 86px;
}

/* ── §3  WC notices ──────────────────────────────────────────── */
.woocommerce-cart .woocommerce-notices-wrapper { margin-bottom: 18px; }

.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info {
  list-style: none;
  margin: 0 0 10px;
  padding: 12px 18px 12px 20px;
  border-radius: 0 var(--cg-r-sm) var(--cg-r-sm) 0;
  border-left: 4px solid var(--cg-mid);
  border: 1px solid var(--cg-border);
  border-left-width: 4px;
  border-left-color: var(--cg-mid);
  background: var(--cg-white);
  font-size: .9rem;
  color: var(--cg);
  line-height: 1.5;
}
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error {
  border-left-color: #e74c3c;
  color: #c0392b;
}
.woocommerce-cart .woocommerce-notices-wrapper li { list-style: none; margin: 0; }

/* ── §4  Cart table shell ────────────────────────────────────── */

/* White card, rounded, subtle shadow — elevates the table off the bg */
.woocommerce-cart .shop_table.cart {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cg-white);
  border-radius: var(--cg-r);
  border: 1px solid var(--cg-border);
  box-shadow: var(--cg-shadow);
  overflow: hidden;
  margin-bottom: 0;
}

/* Column header strip — ultra-subtle label row */
.woocommerce-cart .shop_table.cart thead {
  background: var(--cg-bg);
  border-bottom: 1px solid var(--cg-border);
}
.woocommerce-cart .shop_table.cart thead th {
  padding: 10px 14px;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--cg-muted);
  border: none;
  white-space: nowrap;
}
/* No visible header for remove + thumbnail columns — widths reserved by td */
.woocommerce-cart .shop_table.cart thead .product-remove,
.woocommerce-cart .shop_table.cart thead .product-thumbnail { visibility: hidden; }

/* ── §5  Product rows ────────────────────────────────────────── */

/* Row: very light hover tint — signals interactivity without noise */
.woocommerce-cart .shop_table.cart tbody tr.cart_item {
  border-bottom: 1px solid var(--cg-border);
  transition: background .22s var(--cg-ease);
}
.woocommerce-cart .shop_table.cart tbody tr.cart_item:last-child { border-bottom: none; }
.woocommerce-cart .shop_table.cart tbody tr.cart_item:hover      { background: #f9fbf8; }

/* td baseline */
.woocommerce-cart .shop_table.cart tbody td {
  padding: 20px 14px;
  vertical-align: middle;
  border: none;
}

/* ── §5a  Remove × ───────────────────────────────────────────── */

/* Rotates 90° on hover — tactile, satisfying */
.woocommerce-cart .shop_table.cart td.product-remove {
  width: 44px;
  padding-left: 18px;
  padding-right: 6px;
}
.woocommerce-cart .shop_table.cart td.product-remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #c8d0c8;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  transition: background .2s var(--cg-ease),
              color     .2s var(--cg-ease),
              transform .2s var(--cg-ease);
}
.woocommerce-cart .shop_table.cart td.product-remove a.remove:hover {
  background: #fde8e8;
  color:      #e74c3c;
  transform:  rotate(90deg);
}

/* ── §5b  Product image ──────────────────────────────────────── */

/* Rounded, soft shadow, subtle scale on hover — feels premium */
.woocommerce-cart .shop_table.cart td.product-thumbnail {
  width: 96px;
  padding: 16px 8px 16px 4px;
}
.woocommerce-cart .shop_table.cart td.product-thumbnail a {
  display:       block;
  width:         80px;
  height:        80px;
  border-radius: 12px;
  overflow:      hidden;
  background:    var(--cg-tint);
  box-shadow:    0 2px 10px rgba(47,62,47,.11);
  transition:    transform .28s var(--cg-ease),
                 box-shadow .28s var(--cg-ease);
}
.woocommerce-cart .shop_table.cart td.product-thumbnail a:hover {
  transform:  scale(1.04);
  box-shadow: 0 5px 18px rgba(47,62,47,.18);
}
.woocommerce-cart .shop_table.cart td.product-thumbnail img {
  width:       80px;
  height:      80px;
  object-fit:  cover;
  display:     block;
}

/* ── §5c  Product name & variations ─────────────────────────── */

/* Bold product title — dominant in the row hierarchy */
.woocommerce-cart .shop_table.cart td.product-name { padding-left: 6px; }
.woocommerce-cart .shop_table.cart td.product-name a {
  font-size:      .97rem;
  font-weight:    700;
  color:          var(--cg);
  text-decoration: none;
  line-height:    1.4;
  letter-spacing: -.008em;
  display:        block;
  transition:     color .2s var(--cg-ease);
}
.woocommerce-cart .shop_table.cart td.product-name a:hover { color: var(--cg-mid); }

/* Variation pill — compact, badge-like */
.woocommerce-cart .shop_table.cart td.product-name dl.variation {
  display:     inline-flex;
  flex-wrap:   wrap;
  gap:         0 3px;
  margin:      7px 0 0;
  padding:     2px 10px 3px;
  background:  var(--cg-tint);
  border-radius: var(--cg-r-pill);
  font-size:   .7rem;
  line-height: 1.7;
}
.woocommerce-cart .shop_table.cart td.product-name dl.variation dt {
  display:     inline;
  font-weight: 600;
  color:       var(--cg-muted);
  margin:      0;
}
.woocommerce-cart .shop_table.cart td.product-name dl.variation dt::after { content: ':'; }
.woocommerce-cart .shop_table.cart td.product-name dl.variation dd {
  display: inline;
  margin:  0 6px 0 3px;
  color:   var(--cg);
}
.woocommerce-cart .shop_table.cart td.product-name dl.variation dd p { display: inline; margin: 0; }

/* ── §5d  Unit price ─────────────────────────────────────────── */

/* Muted — intentionally less prominent than the row subtotal */
.woocommerce-cart .shop_table.cart td.product-price { white-space: nowrap; font-size: .9rem; }
.woocommerce-cart .shop_table.cart td.product-price .woocommerce-Price-amount {
  color:       var(--cg-muted);
  font-weight: 500;
}

/* ── §5e  Quantity selector ──────────────────────────────────── */

/* Pill-shaped stepper — modern, distinct from inputs */
.woocommerce-cart .shop_table.cart td.product-quantity { width: 130px; }

.woocommerce-cart .shop_table.cart td.product-quantity .quantity {
  display:       inline-flex;
  align-items:   center;
  height:        38px;
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-r-pill);
  overflow:      hidden;
  background:    var(--cg-white);
  transition:    border-color .2s var(--cg-ease),
                 box-shadow   .2s var(--cg-ease);
}
.woocommerce-cart .shop_table.cart td.product-quantity .quantity:focus-within {
  border-color: var(--cg-mid);
  box-shadow:   0 0 0 3px rgba(74,103,65,.12);
}

/* Number input — spinners removed, font bold */
.woocommerce-cart .shop_table.cart td.product-quantity .qty {
  width:       42px;
  height:      100%;
  border:      none;
  border-left: 1.5px solid var(--cg-border);
  border-right: 1.5px solid var(--cg-border);
  text-align:  center;
  font-size:   .92rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color:       var(--cg);
  background:  var(--cg-white);
  outline:     none;
  padding:     0;
  -moz-appearance: textfield;
}
.woocommerce-cart .shop_table.cart td.product-quantity .qty::-webkit-inner-spin-button,
.woocommerce-cart .shop_table.cart td.product-quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* +/- buttons (injected by cart-checkout.js) */
.woocommerce-cart .wc-qty-btn {
  flex:         none;
  width:        34px;
  height:       100%;
  background:   none;
  border:       none;
  cursor:       pointer;
  font-size:    1.05rem;
  font-weight:  500;
  color:        var(--cg-mid);
  display:      flex;
  align-items:  center;
  justify-content: center;
  transition:   background .15s var(--cg-ease),
                color      .15s var(--cg-ease),
                transform  .1s;
  line-height:  1;
  font-family:  'DM Sans', sans-serif;
  user-select:  none;
}
.woocommerce-cart .wc-qty-btn:hover  { background: var(--cg-tint); color: var(--cg); }
.woocommerce-cart .wc-qty-btn:active { transform: scale(.85); }

/* ── §5f  Row subtotal ───────────────────────────────────────── */

/* Dominant — largest, boldest number in the row */
.woocommerce-cart .shop_table.cart td.product-subtotal {
  text-align:   right;
  white-space:  nowrap;
  padding-right: 22px;
}
.woocommerce-cart .shop_table.cart td.product-subtotal .woocommerce-Price-amount {
  font-size:      1.05rem;
  font-weight:    800;
  color:          var(--cg);
  letter-spacing: -.012em;
}

/* ── §6  Coupon + actions row ────────────────────────────────── */

/* Separated visually from items — lighter bg strip */
.woocommerce-cart .shop_table.cart td.actions {
  padding:    18px 22px;
  background: var(--cg-bg);
  border-top: 1.5px solid var(--cg-border);
}

/* Coupon group: pill input + outlined button side by side */
.woocommerce-cart .coupon {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
}
.woocommerce-cart .coupon label { display: none; }

.woocommerce-cart .coupon #coupon_code {
  width:       200px;
  height:      40px;
  padding:     0 16px;
  border:      1.5px solid var(--cg-border);
  border-radius: var(--cg-r-pill);
  font-size:   .88rem;
  font-family: 'DM Sans', sans-serif;
  color:       var(--cg);
  background:  var(--cg-white);
  outline:     none;
  transition:  border-color .2s var(--cg-ease),
               box-shadow   .2s var(--cg-ease);
}
.woocommerce-cart .coupon #coupon_code:focus {
  border-color: var(--cg-mid);
  box-shadow:   0 0 0 3px rgba(74,103,65,.12);
}
.woocommerce-cart .coupon #coupon_code::placeholder { color: #a4b4a4; font-size: .85rem; }

.woocommerce-cart .coupon .button {
  height:        40px;
  padding:       0 20px;
  background:    transparent;
  color:         var(--cg-mid);
  border:        1.5px solid var(--cg-mid);
  border-radius: var(--cg-r-pill);
  font-family:   'DM Sans', sans-serif;
  font-size:     .85rem;
  font-weight:   700;
  cursor:        pointer;
  white-space:   nowrap;
  display:       inline-flex;
  align-items:   center;
  text-decoration: none;
  transition:    background .2s var(--cg-ease),
                 color      .2s var(--cg-ease),
                 transform  .15s;
}
.woocommerce-cart .coupon .button:hover  { background: var(--cg-mid); color: #fff; }
.woocommerce-cart .coupon .button:active { transform: scale(.97); }

/* Update cart — ghost, right-floated */
.woocommerce-cart button[name="update_cart"] {
  float:         right;
  height:        40px;
  padding:       0 20px;
  background:    transparent;
  color:         var(--cg-muted);
  border:        1.5px solid var(--cg-border);
  border-radius: var(--cg-r-pill);
  font-family:   'DM Sans', sans-serif;
  font-size:     .82rem;
  font-weight:   600;
  cursor:        pointer;
  display:       inline-flex;
  align-items:   center;
  transition:    border-color .2s var(--cg-ease),
                 color        .2s var(--cg-ease);
}
.woocommerce-cart button[name="update_cart"]:hover    { border-color: var(--cg-mid); color: var(--cg-mid); }
.woocommerce-cart button[name="update_cart"]:disabled { opacity: .35; cursor: default; }

/* ── §7  Cart totals card ────────────────────────────────────── */

/* Premium card: rounded, shadowed, white — sits confidently on bg */
.woocommerce-cart .cart_totals {
  background:    var(--cg-white);
  border-radius: var(--cg-r);
  border:        1px solid var(--cg-border);
  box-shadow:    var(--cg-shadow);
  padding:       28px;
  overflow:      hidden;
}

.woocommerce-cart .cart_totals h2 {
  font-family:    'Playfair Display', serif;
  font-size:      1.1rem;
  color:          var(--cg);
  font-weight:    600;
  margin:         0 0 20px;
  padding-bottom: 16px;
  border-bottom:  1.5px solid var(--cg-border);
  letter-spacing: -.01em;
}

/* Inner totals table — no borders of its own */
.woocommerce-cart .cart_totals .shop_table {
  width:           100%;
  border-collapse: collapse;
  background:      transparent;
  border:          none;
  box-shadow:      none;
  border-radius:   0;
  margin:          0;
}
.woocommerce-cart .cart_totals .shop_table thead { display: none; }
.woocommerce-cart .cart_totals .shop_table tr    { border-bottom: 1px solid var(--cg-border); }
.woocommerce-cart .cart_totals .shop_table tr:last-child { border-bottom: none; }

.woocommerce-cart .cart_totals .shop_table th,
.woocommerce-cart .cart_totals .shop_table td {
  padding:    13px 4px;
  border:     none;
  background: transparent;
  font-size:  .9rem;
}
.woocommerce-cart .cart_totals .shop_table th {
  color:       var(--cg-muted);
  font-weight: 600;
  text-align:  left;
  width:       44%;
}
.woocommerce-cart .cart_totals .shop_table td {
  text-align:  right;
  color:       var(--cg);
  font-weight: 500;
}

/* Shipping */
.woocommerce-cart .cart_totals #shipping_method       { list-style: none; margin: 0; padding: 0; }
.woocommerce-cart .cart_totals #shipping_method li    { font-size: .88rem; text-align: right; }
.woocommerce-cart .cart_totals .shipping-calculator-button {
  display:              block;
  font-size:            .75rem;
  color:                var(--cg-mid);
  text-decoration:      underline;
  text-underline-offset: 2px;
  margin-top:           6px;
  text-align:           right;
}

/* Applied coupon discount row */
.woocommerce-cart .cart_totals .cart-discount th,
.woocommerce-cart .cart_totals .cart-discount td { color: #27ae60; }
.woocommerce-cart .cart_totals .woocommerce-remove-coupon {
  display:       inline-block;
  font-size:     .68rem;
  color:         var(--cg-muted);
  text-decoration: none;
  border:        1px solid var(--cg-border);
  padding:       1px 7px;
  border-radius: var(--cg-r-pill);
  margin-left:   6px;
  transition:    border-color .18s, color .18s;
}
.woocommerce-cart .cart_totals .woocommerce-remove-coupon:hover { border-color: #e74c3c; color: #e74c3c; }

/* Order total — visually dominant, highest weight in the card */
.woocommerce-cart .cart_totals .order-total { border-bottom: none; }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  padding:     16px 14px;
  font-size:   1.05rem;
  font-weight: 700;
  color:       var(--cg);
  background:  var(--cg-tint);
  border-top:  1.5px solid #c6d6c0;
}
.woocommerce-cart .cart_totals .order-total th { border-radius: var(--cg-r-sm) 0 0 var(--cg-r-sm); }
.woocommerce-cart .cart_totals .order-total td { border-radius: 0 var(--cg-r-sm) var(--cg-r-sm) 0; }
.woocommerce-cart .cart_totals .order-total strong,
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
  font-size:   1.28rem;
  font-weight: 800;
  color:       var(--cg);
}

/* ── §8  CTA button ──────────────────────────────────────────── */

/* Gradient, shimmer sweep on hover, lift animation — maximum conversion pull */
.woocommerce-cart .wc-proceed-to-checkout  { margin-top: 20px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  padding:         17px 28px;
  background:      linear-gradient(135deg, #253323 0%, #4a6741 100%);
  color:           #fff;
  border-radius:   var(--cg-r);
  font-size:       1.06rem;
  font-weight:     700;
  font-family:     'DM Sans', sans-serif;
  letter-spacing:  .025em;
  text-decoration: none;
  border:          none;
  position:        relative;
  overflow:        hidden;
  transition:      transform .26s var(--cg-ease),
                   box-shadow .26s var(--cg-ease);
}

/* Shimmer sweep */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -80%;
  width:      55%;
  height:     100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.14),
    transparent);
  transform:  skewX(-18deg);
  transition: left .55s var(--cg-ease);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::before { left: 140%; }

/* Arrow that slides right */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
  content:    '→';
  font-size:  1.2rem;
  display:    inline-block;
  transition: transform .26s var(--cg-ease);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  transform:  translateY(-3px);
  box-shadow: var(--cg-shadow-hover);
  color:      #fff;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::after { transform: translateX(5px); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active { transform: translateY(-1px); }

/* ── §9  Trust elements ──────────────────────────────────────── */

/* Three reassurance signals below the CTA — lightweight but confidence-building */
.woocommerce-cart .cart_totals::after {
  content:    '🔒 Paiement sécurisé  ·  🚚 Livraison 24–48h  ·  🌿 100% naturel';
  display:    block;
  text-align: center;
  font-size:  .71rem;
  color:      var(--cg-muted);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cg-border);
  line-height: 1.9;
  letter-spacing: .008em;
}

/* ── §10  Responsive ─────────────────────────────────────────── */

/* Tablet (≤900px): totals card stacks above items */
@media (max-width: 900px) {
  .woocommerce-cart .pg-body                             { grid-template-columns: 1fr; }
  .woocommerce-cart .pg-body .woocommerce-cart-form      { grid-row: 2; grid-column: 1; }
  .woocommerce-cart .pg-body .cart-collaterals           { grid-row: 1; grid-column: 1; position: static; }
}

/* Mobile (≤640px): table rows collapse to flex cards */
@media (max-width: 640px) {
  .woocommerce-cart .pg-title { font-size: 1.45rem; }

  .woocommerce-cart .shop_table.cart thead { display: none; }
  .woocommerce-cart .shop_table.cart,
  .woocommerce-cart .shop_table.cart tbody,
  .woocommerce-cart .shop_table.cart tfoot,
  .woocommerce-cart .shop_table.cart tr    { display: block; }

  .woocommerce-cart .shop_table.cart tr.cart_item {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    padding:     14px 16px;
    gap:         10px;
    border-bottom: 1px solid var(--cg-border);
  }
  .woocommerce-cart .shop_table.cart tr.cart_item td { padding: 0; border: none; }

  .woocommerce-cart .shop_table.cart td.product-remove    { order: 0; flex-shrink: 0; }
  .woocommerce-cart .shop_table.cart td.product-thumbnail { order: 1; flex-shrink: 0; }
  .woocommerce-cart .shop_table.cart td.product-name      { order: 2; flex: 1; min-width: 0; overflow: hidden; }
  .woocommerce-cart .shop_table.cart td.product-price     { display: none; }
  .woocommerce-cart .shop_table.cart td.product-quantity  { order: 3; }
  .woocommerce-cart .shop_table.cart td.product-subtotal  {
    order:          4;
    width:          100%;
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    padding-top:    10px;
    border-top:     1px dashed var(--cg-border);
  }
  .woocommerce-cart .shop_table.cart td.product-subtotal::before {
    content:     attr(data-title);
    font-size:   .8rem;
    color:       var(--cg-muted);
    font-weight: 500;
  }

  /* WooCommerce default woocommerce.css injects td::before { content: attr(data-title) }
     on mobile for ALL td cells. Suppress it for every cell except product-subtotal
     (which uses its own ::before to label the price row). */
  .woocommerce-cart .shop_table.cart td.product-remove::before,
  .woocommerce-cart .shop_table.cart td.product-thumbnail::before,
  .woocommerce-cart .shop_table.cart td.product-name::before,
  .woocommerce-cart .shop_table.cart td.product-price::before,
  .woocommerce-cart .shop_table.cart td.product-quantity::before {
    content: none !important;
    display: none !important;
  }

  /* Product name link: allow full text to wrap clearly without overflow */
  .woocommerce-cart .shop_table.cart td.product-name a {
    white-space: normal;
    word-break:  break-word;
    display:     block;
    font-size:   .93rem;
    line-height: 1.45;
  }

  .woocommerce-cart .shop_table.cart td.product-thumbnail a  { width: 64px; height: 64px; }
  .woocommerce-cart .shop_table.cart td.product-thumbnail img { width: 64px; height: 64px; }

  /* Actions row stacks vertically */
  .woocommerce-cart .shop_table.cart td.actions {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    stretch;
  }
  .woocommerce-cart .coupon           { flex-wrap: wrap; }
  .woocommerce-cart .coupon #coupon_code { flex: 1; width: auto; min-width: 0; }
  .woocommerce-cart .coupon .button   { justify-content: center; }

  .woocommerce-cart button[name="update_cart"] {
    float:           none;
    width:           100%;
    justify-content: center;
  }

  .woocommerce-cart .cart_totals { padding: 22px 18px; }
  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding: 16px 20px; font-size: 1rem; }
}

/* ================================================================
   CART & CHECKOUT – Responsive Enhancements v2
   Fills remaining gaps for all mobile breakpoints.
   ================================================================ */

/* ── 1. Page bottom padding: reduce on mobile ───────────────── */
@media (max-width: 768px) {
  .cart-page     { padding-bottom: 56px; }
  .checkout-page { padding-bottom: 56px; }
  .ty-page       { padding-bottom: 56px; }
}

/* ── 2. Cart layout: summary on top on tablet/mobile ─────────── */
@media (max-width: 900px) {
  .woocommerce-cart .pg-body {
    grid-template-columns: 1fr;
  }
  .woocommerce-cart .pg-body .cart-collaterals {
    grid-column: 1;
    grid-row: 1;
    position: static;
    order: -1;
  }
  .woocommerce-cart .pg-body .woocommerce-cart-form {
    grid-row: 2;
  }
}

/* ── 3. Cart item: compact on very small phones ─────────────── */
@media (max-width: 400px) {
  .cart-items-list .cart-item  { padding: 12px 14px; gap: 10px; }
  .cart-items-list .ci-img-wrap{ width: 60px; height: 60px; }
  .cart-items-list .ci-name    { font-size: .88rem; }
  .ci-right                    { padding-left: 70px; }
  .ci-right .qty-btn           { width: 28px; height: 32px; font-size: .95rem; }
  .ci-right .qty-input         { width: 32px; height: 32px; }
  .ci-right .ci-price          { min-width: 52px; font-size: .9rem; }
}

/* ── 4. Cart & checkout summary: comfortable inner padding ────── */
@media (max-width: 768px) {
  .cart-summary-inner       { padding: 20px; }
  .checkout-summary-inner   { padding: 20px; }
}

/* ── 5. iOS zoom prevention on all form inputs ───────────────── */
/* 16px prevents Safari auto-zoom on input focus */
.field-input,
.promo-input,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.co-notes-inline textarea,
.cp-input,
.newsletter-form input {
  font-size: 16px;
}
/* Restore smaller size on desktop */
@media (min-width: 769px) {
  .field-input,
  .promo-input,
  .woocommerce-checkout .input-text,
  .woocommerce-checkout select,
  .co-notes-inline textarea { font-size: .9rem; }
  .cp-input                { font-size: .9rem; }
  .newsletter-form input   { font-size: .9rem; }
}

/* ── 6. Checkout sections: tighter padding on small screens ──── */
@media (max-width: 600px) {
  .cs-body   { padding: 18px 16px; }
  .cs-header { padding: 14px 16px; }
  .checkout-steps { padding: 12px 0; margin-bottom: 24px; }
  .step-num  { width: 28px; height: 28px; }
  .step-line { min-width: 16px; }
}

/* ── 7. Place-order button: full-width, large tap target ─────── */
@media (max-width: 768px) {
  .btn-place-order {
    padding: 17px;
    font-size: 1rem;
    min-height: 54px;
  }
  .btn-checkout-main {
    min-height: 52px;
    font-size: .95rem;
  }
}

/* ── 8. Checkout form: full-width rows on mobile ─────────────── */
@media (max-width: 480px) {
  .woocommerce-checkout .form-row-split,
  .form-row-split {
    grid-template-columns: 1fr;
  }
  .checkout-trust-badges { gap: 5px 8px; padding: 10px 12px; }
  .ctb-sep { display: none; }
}

/* ── 9. Thank-you page: compact on mobile ───────────────────── */
@media (max-width: 480px) {
  .ty-card      { padding: 20px 16px; }
  .ty-hero      { padding: 32px 0 24px; }
  .ty-title     { font-size: 1.6rem; }
  .ty-meta-bar  { padding: 14px 16px; gap: 8px; }
  .ty-meta-item { min-width: calc(50% - 4px); }
}

/* ── 10. Page generic (pg-page): reduce padding on mobile ────── */
@media (max-width: 480px) {
  .pg-page { padding: 40px 0 56px; }
}

/* ── 11. Free-shipping bar: compact on tiny screens ─────────── */
@media (max-width: 400px) {
  .free-shipping-bar { padding: 12px 14px; }
  .fsb-text { font-size: .8rem; }
}

/* ================================================================
   CART / CHECKOUT – RTL
   ================================================================ */

html[dir="rtl"] .cart-layout,
html[data-dir="rtl"] .cart-layout,
body.dir-rtl .cart-layout             { direction: rtl; }

html[dir="rtl"] .cart-header,
html[data-dir="rtl"] .cart-header,
body.dir-rtl .cart-header             { direction: rtl; }

html[dir="rtl"] .cart-item,
html[data-dir="rtl"] .cart-item,
body.dir-rtl .cart-item               { direction: rtl; }

html[dir="rtl"] .ci-qty-wrap,
html[data-dir="rtl"] .ci-qty-wrap,
body.dir-rtl .ci-qty-wrap             { flex-direction: row-reverse; }

html[dir="rtl"] .cart-totals,
html[data-dir="rtl"] .cart-totals,
body.dir-rtl .cart-totals             { direction: rtl; }

html[dir="rtl"] .checkout-layout,
html[data-dir="rtl"] .checkout-layout,
body.dir-rtl .checkout-layout         { direction: rtl; }

html[dir="rtl"] .steps-bar,
html[data-dir="rtl"] .steps-bar,
body.dir-rtl .steps-bar               { direction: rtl; }

html[dir="rtl"] .ty-layout,
html[data-dir="rtl"] .ty-layout,
body.dir-rtl .ty-layout               { direction: rtl; }

html[dir="rtl"] .ty-item,
html[data-dir="rtl"] .ty-item,
body.dir-rtl .ty-item                 { direction: rtl; }

html[dir="rtl"] .form-row,
html[data-dir="rtl"] .form-row,
body.dir-rtl .form-row                { text-align: right; }
