/* SaloCart V5.2.16 — Tap-to-open deal cards + responsive cart UX.
   Presentation and interaction affordances only. Cart, price, reserve, and stock rules stay unchanged. */

/* ----- Deal card: open details by tapping the card ----- */
.deal-card--tap {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.deal-card--tap:hover {
  transform: translateY(-3px);
}

.deal-card--tap:active {
  transform: translateY(-1px) scale(.995);
}

.deal-card--tap:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sc-blue, #1765ae) 50%, transparent);
  outline-offset: 3px;
}

.deal-card--tap .deal-card__media,
.deal-card--tap .deal-card__body {
  pointer-events: none;
}

/* Restore direct actions inside the otherwise tappable card. */
.deal-card--tap :is(button, input, a, select, textarea) {
  pointer-events: auto;
}

.deal-card--tap .deal-card__tap-arrow {
  position: absolute;
  z-index: 2;
  right: .72rem;
  bottom: .72rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 50%;
  background: rgba(9, 34, 21, .68);
  box-shadow: 0 5px 14px rgba(0,0,0,.18);
  color: #fff;
  font-size: .95rem;
  opacity: .98;
  transition: transform .18s ease, background .18s ease;
}

.deal-card--tap:hover .deal-card__tap-arrow,
.deal-card--tap:focus-visible .deal-card__tap-arrow {
  transform: translate(2px, -2px);
  background: var(--sc-blue, #1765ae);
}

.deal-card--tap .deal-card__tap-copy {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin-top: .7rem;
  color: var(--sc-blue, #1765ae);
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.25;
}

.deal-card--tap .deal-card__tap-copy i {
  color: var(--sc-orange, #f3a835);
  font-size: .8rem;
}

.deal-card--tap .deal-card__actions {
  grid-template-columns: minmax(0, 1fr);
  margin-top: .48rem;
}

.deal-card--tap .deal-card__actions .btn-sc {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 2.8rem;
}

/* ----- Cart: clearer lines and tap-safe controls ----- */
.cart-sheet--responsive .sheet-body {
  padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
}

.cart-sheet--responsive .cart-intro {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .82rem .9rem;
  border: 1px solid color-mix(in srgb, var(--sc-blue, #1765ae) 16%, var(--sc-line, #dce8df));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc-blue-soft, #e8f2fc) 60%, #fff), color-mix(in srgb, var(--sc-mint, #eaf8f0) 45%, #fff));
  color: var(--sc-ink-soft, #52645a);
  font-size: .77rem;
  font-weight: 720;
  line-height: 1.45;
}

.cart-sheet--responsive .cart-intro i {
  flex: 0 0 auto;
  margin-top: .05rem;
  color: var(--sc-green, #08784d);
  font-size: 1rem;
}

.cart-sheet--responsive .cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: .95rem;
}

.cart-sheet--responsive .cart-lines {
  gap: .8rem;
}

.cart-line--responsive {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: .8rem;
  padding: .78rem;
  border: 1px solid color-mix(in srgb, var(--sc-line, #dce8df) 94%, transparent);
  border-radius: 20px;
  background: var(--sc-surface, #fff);
  box-shadow: 0 7px 18px rgba(14, 47, 30, .045);
}

.cart-line--responsive .cart-line-image {
  display: block;
  width: 88px;
  height: 88px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sc-line, #dce8df) 82%, transparent);
  border-radius: 15px;
  background: var(--sc-surface-alt, #f2f7f3);
  cursor: pointer;
}

.cart-line--responsive .cart-line-image:hover,
.cart-line--responsive .cart-line-image:focus-visible {
  border-color: color-mix(in srgb, var(--sc-blue, #1765ae) 45%, var(--sc-line, #dce8df));
  outline: none;
}

.cart-line--responsive .cart-line-image img,
.cart-line--responsive .cart-line-image .image-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line--responsive .cart-line-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.cart-line--responsive .cart-line-title-row {
  align-items: flex-start;
  gap: .6rem;
}

.cart-line--responsive .cart-line-title-button {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cart-line--responsive .cart-line-title-button:hover h3,
.cart-line--responsive .cart-line-title-button:focus-visible h3 {
  color: var(--sc-blue, #1765ae);
}

.cart-line--responsive .cart-line-title-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sc-blue, #1765ae) 35%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

.cart-line--responsive h3 {
  margin: 0;
  color: var(--sc-ink, #15231c);
  font-size: .93rem;
  font-weight: 900;
  line-height: 1.28;
}

.cart-line--responsive p {
  display: flex;
  gap: .3rem;
  align-items: center;
  min-width: 0;
  margin: .28rem 0 0;
  color: var(--sc-muted, #718277);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-line--responsive p i {
  flex: 0 0 auto;
  color: var(--sc-blue, #1765ae);
}

.cart-line--responsive .cart-remove {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  flex: 0 0 2.25rem;
  border: 1px solid color-mix(in srgb, #c64857 22%, var(--sc-line, #dce8df));
  border-radius: 11px;
  background: color-mix(in srgb, #fff1f3 84%, var(--sc-surface, #fff));
  color: #b54454;
}

.cart-line--responsive .cart-remove:hover,
.cart-line--responsive .cart-remove:focus-visible {
  background: #fee8ec;
  outline: 3px solid rgba(198,72,87,.17);
  outline-offset: 2px;
}

.cart-line--responsive .cart-price-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: end;
  margin-top: .62rem;
  padding: .58rem .66rem;
  border-radius: 13px;
  background: color-mix(in srgb, var(--sc-surface-alt, #f3f7f4) 74%, var(--sc-surface, #fff));
}

.cart-line--responsive .cart-price-copy > div { min-width: 0; }

.cart-line--responsive .cart-price-copy > div:last-child { text-align: right; }

.cart-line--responsive .cart-price-copy small,
.cart-line--responsive .cart-price-copy span {
  display: block;
  overflow: hidden;
  color: var(--sc-muted, #718277);
  font-size: .6rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line--responsive .cart-price-copy span { margin-top: .16rem; color: var(--sc-ink-soft, #52645a); }

.cart-line--responsive .cart-price-copy strong {
  display: block;
  margin-top: .16rem;
  color: var(--sc-green-deep, #074630);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: 1;
}

.cart-line--responsive .cart-line-footer {
  display: flex;
  gap: .65rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .65rem;
}

.cart-line--responsive .cart-quantity {
  display: grid;
  grid-template-columns: 2.35rem minmax(2.5rem, 1fr) 2.35rem;
  height: 2.45rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sc-green, #08784d) 24%, var(--sc-line, #dce8df));
  border-radius: 12px;
  background: var(--sc-surface, #fff);
}

.cart-line--responsive .cart-quantity button {
  display: grid;
  place-items: center;
  width: auto;
  height: 100%;
  min-height: 0;
  border: 0;
  background: color-mix(in srgb, var(--sc-mint, #eaf8f0) 70%, var(--sc-surface, #fff));
  color: var(--sc-green, #08784d);
  font-size: 1.22rem;
  font-weight: 900;
}

.cart-line--responsive .cart-quantity button:active { background: color-mix(in srgb, var(--sc-green, #08784d) 17%, #fff); }

.cart-line--responsive .cart-quantity input {
  width: 100%;
  height: 100%;
  padding: 0 .15rem;
  border: 0;
  border-inline: 1px solid color-mix(in srgb, var(--sc-line, #dce8df) 82%, transparent);
  background: transparent;
  color: var(--sc-ink, #15231c);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  outline: none;
}

.cart-line--responsive .cart-quantity input:focus {
  background: color-mix(in srgb, var(--sc-blue-soft, #e8f2fc) 45%, var(--sc-surface, #fff));
}

.cart-line--responsive .cart-closing-time {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-width: 0;
  color: var(--sc-muted, #718277);
  font-size: .64rem;
  font-weight: 780;
  white-space: nowrap;
}

.cart-line--responsive .cart-closing-time i { color: var(--sc-orange, #f3a835); }

.cart-summary--responsive {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--sc-green, #08784d) 19%, var(--sc-line, #dce8df));
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc-mint, #eaf8f0) 83%, var(--sc-surface, #fff)), color-mix(in srgb, var(--sc-blue-soft, #e8f2fc) 28%, var(--sc-surface, #fff)));
}

.cart-summary--responsive .cart-summary-head {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
}

.cart-summary--responsive .cart-summary-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sc-green, #08784d) 12%, #fff);
  color: var(--sc-green, #08784d);
}

.cart-summary--responsive h3 {
  margin: 0;
  color: var(--sc-ink, #15231c);
  font-size: .94rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.cart-summary--responsive .cart-summary-head p {
  margin: .18rem 0 0;
  color: var(--sc-muted, #718277);
  font-size: .68rem;
  line-height: 1.42;
}

.cart-summary--responsive dl {
  margin: .9rem 0 0;
}

.cart-summary--responsive dl > div {
  padding: .45rem 0;
  border-color: color-mix(in srgb, var(--sc-line, #dce8df) 78%, transparent);
  font-size: .75rem;
}

.cart-summary--responsive .cart-total {
  align-items: end;
  margin-top: .2rem;
  padding-top: .8rem;
  border-color: color-mix(in srgb, var(--sc-green, #08784d) 18%, var(--sc-line, #dce8df));
}

.cart-summary--responsive .cart-total > div { min-width: 0; }
.cart-summary--responsive .cart-total span { display: block; font-size: .78rem; }
.cart-summary--responsive .cart-total small { display: block; margin-top: .12rem; color: var(--sc-muted, #718277); font-size: .61rem; font-weight: 720; }
.cart-summary--responsive .cart-total strong { color: var(--sc-green-deep, #074630); font-size: clamp(1.35rem, 4vw, 1.75rem); }

.cart-sheet--responsive .cart-actions-bottom {
  position: sticky;
  z-index: 4;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  margin: 1rem -1rem -1rem;
  padding: .78rem 1rem max(.78rem, env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--sc-line, #dce8df) 92%, transparent);
  background: color-mix(in srgb, var(--sc-surface, #fff) 94%, transparent);
  backdrop-filter: blur(16px);
}

.cart-sheet--responsive .cart-actions-bottom .btn-sc,
.cart-sheet--responsive .cart-actions-bottom .btn-sc-light {
  min-width: 0;
  min-height: 2.9rem;
  border-radius: 14px;
  font-size: .78rem;
}

.cart-sheet--responsive .cart-actions-bottom .btn-sc-light {
  padding-inline: .82rem;
}

@media (min-width: 768px) {
  .cart-sheet--responsive { width: min(760px, calc(100vw - 2rem)); }

  .cart-sheet--responsive .cart-layout {
    grid-template-columns: minmax(0, 1fr) minmax(245px, .56fr);
    align-items: start;
  }

  .cart-summary--responsive {
    position: sticky;
    top: .25rem;
  }

  .cart-sheet--responsive .cart-actions-bottom {
    margin-inline: -1.1rem;
    padding-inline: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  .deal-card--tap .deal-card__tap-arrow {
    right: .58rem;
    bottom: .58rem;
    width: 1.82rem;
    height: 1.82rem;
    font-size: .84rem;
  }

  .deal-card--tap .deal-card__tap-copy {
    margin-top: .6rem;
    font-size: .61rem;
  }

  .cart-line--responsive {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: .68rem;
    padding: .68rem;
    border-radius: 18px;
  }

  .cart-line--responsive .cart-line-image {
    width: 78px;
    height: 78px;
    border-radius: 13px;
  }

  .cart-line--responsive h3 { font-size: .86rem; }

  .cart-line--responsive .cart-price-copy {
    margin-top: .5rem;
    padding: .48rem .52rem;
  }

  .cart-line--responsive .cart-line-footer {
    align-items: flex-end;
    margin-top: .55rem;
  }

  .cart-line--responsive .cart-quantity {
    height: 2.35rem;
    grid-template-columns: 2.2rem minmax(2.25rem, 1fr) 2.2rem;
  }

  .cart-line--responsive .cart-closing-time {
    max-width: 8.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-sheet--responsive .cart-actions-bottom {
    gap: .5rem;
    margin: .82rem -.95rem -.95rem;
    padding: .68rem .95rem max(.68rem, env(safe-area-inset-bottom));
  }

  .cart-sheet--responsive .cart-actions-bottom .btn-sc,
  .cart-sheet--responsive .cart-actions-bottom .btn-sc-light {
    min-height: 2.75rem;
    font-size: .72rem;
  }
}

@media (max-width: 359.98px) {
  .cart-line--responsive { grid-template-columns: 68px minmax(0, 1fr); gap: .55rem; padding: .58rem; }
  .cart-line--responsive .cart-line-image { width: 68px; height: 68px; }
  .cart-line--responsive h3 { font-size: .8rem; }
  .cart-line--responsive p { font-size: .58rem; }
  .cart-line--responsive .cart-price-copy small,
  .cart-line--responsive .cart-price-copy span { font-size: .53rem; }
  .cart-line--responsive .cart-price-copy strong { font-size: .9rem; }
  .cart-line--responsive .cart-closing-time { max-width: 6.6rem; font-size: .56rem; }
  .cart-sheet--responsive .cart-actions-bottom .btn-sc-light { padding-inline: .58rem; }
}

html[data-theme="dark"] .cart-line--responsive,
html[data-theme="dark"] .cart-summary--responsive,
html[data-theme="dark"] .cart-sheet--responsive .cart-intro {
  border-color: var(--sc-line, #2a4434);
  background: var(--sc-surface, #111d16);
}

html[data-theme="dark"] .cart-line--responsive .cart-price-copy,
html[data-theme="dark"] .cart-line--responsive .cart-quantity,
html[data-theme="dark"] .cart-line--responsive .cart-quantity input {
  background: var(--sc-surface-alt, #16251c);
}

html[data-theme="dark"] .cart-line--responsive .cart-quantity button,
html[data-theme="dark"] .cart-summary--responsive .cart-summary-icon {
  background: color-mix(in srgb, var(--sc-green, #4fd89a) 18%, var(--sc-surface, #111d16));
}

html[data-theme="dark"] .cart-sheet--responsive .cart-actions-bottom {
  border-color: var(--sc-line, #2a4434);
  background: color-mix(in srgb, var(--sc-surface, #111d16) 94%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .deal-card--tap,
  .deal-card--tap .deal-card__tap-arrow { transition: none; }
}