.cart-page {
  min-height: 100vh;
  padding: calc(var(--jaroni-header-height) + 38px) 0 90px;
  color: #17201b;
  background: #f7f9f8;
}

.cart-page__intro { margin-bottom: var(--space-30); }
.cart-page__accent { display: grid; grid-template-columns: 62% 20% 18%; width: 140px; height: 3px; margin-bottom: var(--space-24); overflow: hidden; border-radius: var(--radius-999); }
.cart-page__accent span:nth-child(1) { background: var(--jaroni-green); }
.cart-page__accent span:nth-child(2) { background: var(--jaroni-yellow); }
.cart-page__accent span:nth-child(3) { background: var(--jaroni-red); }
.cart-page__intro > p { margin: 0; color: var(--jaroni-green); font-size: var(--text-68); font-weight: var(--font-weight-850); letter-spacing: .14em; text-transform: uppercase; }
.cart-page__intro h1 { margin: var(--space-6) 0 0; font-size: clamp(1.8rem, 3.5vw, 2.75rem); letter-spacing: -.045em; }

.cart-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 370px); align-items: start; gap: var(--space-24); }
.cart-page__products, .cart-page__summary { background: var(--jaroni-white); border: 1px solid #e2e8e4; border-radius: var(--radius-12); box-shadow: 0 8px 28px rgba(8, 25, 15, .04); }
.cart-page__products { min-width: 0; padding: 25px var(--space-26); }
.cart-page__products-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-20); padding-bottom: var(--space-20); border-bottom: 1px solid #e2e8e4; }
.cart-page__products-header h2 { margin: 0; font-size: 1.2rem; }
.cart-page__products-header p { margin: var(--space-4) 0 0; color: #7b8780; font-size: var(--text-72); }
.cart-page__products-header a { color: var(--jaroni-green); font-size: var(--text-75); font-weight: var(--font-weight-780); text-underline-offset: 3px; }
.cart-page__columns, .cart-page-item { display: grid; grid-template-columns: minmax(250px, 1fr) 100px 132px 110px 42px; gap: var(--space-16); align-items: center; }
.cart-page__columns { padding: var(--space-18) 0 var(--space-12); color: #7c8881; font-size: var(--text-66); font-weight: var(--font-extrabold); letter-spacing: .07em; text-transform: uppercase; }
.cart-page__columns span:not(:first-child) { text-align: center; }
.cart-page__columns[hidden], .cart-page__items[hidden], .cart-page__empty[hidden], .cart-page__summary[hidden] { display: none; }

.cart-page-item { padding: var(--space-18) 0; border-top: 1px solid #edf0ee; }
.cart-page-item:first-child { border-top: 0; }
.cart-page-item__product { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--space-14); min-width: 0; }
.cart-page-item__media { position: relative; display: grid; width: 84px; height: 84px; place-items: center; overflow: hidden; color: #98a29d; text-decoration: none; border: 1px solid #e4e9e6; border-radius: var(--radius-8); }
.cart-page-item__media img { position: relative; z-index: 1; width: 100%; height: 100%; padding: var(--space-5); object-fit: contain; }
.cart-page-item__media img[hidden] { display: none; }
.cart-page-item__media span { position: absolute; font-size: var(--text-xs); font-weight: var(--font-weight-850); }
.cart-page-item__name { display: -webkit-box; overflow: hidden; color: #1c2621; font-size: var(--text-82); font-weight: var(--font-weight-780); line-height: 1.4; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cart-page-item__name:hover { color: var(--jaroni-green); }
.cart-page-item__sku { margin: var(--space-6) 0 0; color: #87928c; font-size: var(--text-66); }
.cart-page-item__price, .cart-page-item__subtotal { margin: 0; font-size: var(--text-8); font-weight: var(--font-weight-750); text-align: center; }
.cart-page-item__subtotal { font-size: var(--text-86); }
.cart-page-item__quantity { display: grid; grid-template-columns: 42px 42px 42px; height: 44px; justify-content: center; overflow: hidden; border: 1px solid var(--color-control-border); border-radius: var(--radius-8); }
.cart-page-item__quantity button { padding: 0; color: #26312b; background: #f7f9f8; border: 0; cursor: pointer; font-size: var(--text-base); }
.cart-page-item__quantity button:hover { color: var(--jaroni-white); background: var(--jaroni-green); }
.cart-page-item__quantity output { display: grid; place-items: center; font-size: var(--text-76); font-weight: var(--font-extrabold); }
.cart-page-item__remove { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; color: #7f8a84; background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.2rem; }
.cart-page-item__remove:hover { color: var(--jaroni-red); background: #fff0f1; }

.cart-page__summary { position: sticky; top: calc(var(--jaroni-header-height) + 20px); padding: 27px; }
.cart-page__summary-eyebrow { margin: 0 0 var(--space-5); color: var(--jaroni-green); font-size: .65rem; font-weight: var(--font-weight-850); letter-spacing: .14em; text-transform: uppercase; }
.cart-page__summary h2 { margin: 0 0 var(--space-26); font-size: 1.35rem; letter-spacing: -.025em; }
.cart-page__summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-20); padding: var(--space-18) 0; border-top: 1px solid #e1e7e3; border-bottom: 1px solid #e1e7e3; }
.cart-page__summary > div span { font-size: var(--text-82); font-weight: var(--font-weight-720); }
.cart-page__summary > div strong { font-size: 1.35rem; }
.cart-page__reference { margin: var(--space-12) 0 var(--space-20); color: #77837c; font-size: var(--text-68); line-height: 1.55; }
.cart-page__whatsapp { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: var(--space-9); padding: var(--space-11) var(--space-14); color: var(--jaroni-white); background: #13aa52; border: 0; border-radius: var(--radius-9); cursor: pointer; font: inherit; font-size: var(--text-76); font-weight: var(--font-weight-820); }
.cart-page__whatsapp:hover:not(:disabled) { background: #0d9145; box-shadow: 0 9px 20px rgba(19, 170, 82, .2); }
.cart-page__whatsapp:disabled { cursor: not-allowed; opacity: .48; }
.cart-page__whatsapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.cart-page__empty { padding: clamp(50px, 8vw, 90px) 20px; text-align: center; }
.cart-page__empty > span { display: grid; width: 76px; height: 76px; margin: 0 auto var(--space-18); place-items: center; color: var(--jaroni-green); background: #eaf8f1; border-radius: 50%; }
.cart-page__empty svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.cart-page__empty h2 { margin: 0; font-size: 1.3rem; }
.cart-page__empty p { margin: var(--space-7) 0 21px; color: #77837c; font-size: var(--text-82); }
.cart-page__empty a { display: inline-flex; min-height: 46px; align-items: center; padding: var(--space-10) 21px; color: #17201b; background: var(--jaroni-yellow); border-radius: var(--radius-8); font-size: var(--text-sm); font-weight: var(--font-weight-820); text-decoration: none; }

@media (max-width: 1100px) {
  .cart-page__layout { grid-template-columns: 1fr; }
  .cart-page__summary { position: static; width: min(100%, 430px); margin-left: auto; }
}

@media (max-width: 760px) {
  .cart-page { padding-top: calc(var(--jaroni-header-height) + 26px); padding-bottom: var(--space-64); }
  .cart-page__products { padding: var(--space-20) var(--space-18); }
  .cart-page__columns { display: none; }
  .cart-page-item { position: relative; grid-template-columns: 1fr auto; gap: var(--space-15); padding: var(--space-20) 0; }
  .cart-page-item__product { grid-column: 1 / -1; padding-right: 38px; }
  .cart-page-item__price { display: none; }
  .cart-page-item__quantity { justify-content: start; }
  .cart-page-item__subtotal { align-self: center; text-align: right; }
  .cart-page-item__remove { position: absolute; top: 14px; right: -5px; }
  .cart-page__summary { width: 100%; padding: 23px var(--space-20); }
}

@media (max-width: 430px) {
  .cart-page__products-header { align-items: start; }
  .cart-page-item__product { grid-template-columns: 76px minmax(0, 1fr); }
  .cart-page-item__media { width: 76px; height: 76px; }
  .cart-page-item__quantity { grid-template-columns: 44px 38px 44px; }
}