/* SaloCart V5.2.4 — Pickup location first catalog experience */
:root {
  --sc-pickup-green: var(--sc-green, #168548);
  --sc-pickup-green-deep: var(--sc-green-deep, #0b6036);
  --sc-pickup-soft: color-mix(in srgb, var(--sc-pickup-green) 9%, var(--sc-surface, #fff));
}

.location-pill {
  appearance: none;
  border: 1px solid var(--sc-line, rgba(11, 96, 54, .16));
  cursor: pointer;
  font: inherit;
}
.location-pill:hover,
.location-pill:focus-visible { border-color: var(--sc-pickup-green); color: var(--sc-pickup-green-deep); }

.pickup-first-page { padding-top: clamp(1.15rem, 3vw, 2.4rem); }
.pickup-first-page--deals { min-height: min(68vh, 700px); }
.pickup-first-section {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(360px, 1.17fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 2.25rem);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--sc-pickup-green) 20%, var(--sc-line, transparent));
  border-radius: 26px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--sc-pickup-green) 14%, transparent), transparent 42%),
    var(--sc-surface, #fff);
  box-shadow: 0 18px 44px color-mix(in srgb, #102218 8%, transparent);
}
.pickup-first-section__intro { padding: clamp(.25rem, 1.4vw, 1rem); }
.pickup-first-section__intro .section-kicker { display: inline-flex; align-items: center; gap: .45rem; }
.pickup-first-section__intro h2 { max-width: 14ch; margin: .62rem 0 .56rem; font-family: var(--font-display, Sora, sans-serif); font-size: clamp(1.45rem, 3vw, 2.25rem); letter-spacing: -.045em; line-height: 1.08; color: var(--sc-ink, #16261d); }
.pickup-first-section__intro p { max-width: 45ch; margin: 0; color: var(--sc-muted, #607166); font-size: .95rem; line-height: 1.65; }
.pickup-first-steps { display: grid; gap: .65rem; margin-top: 1.25rem; color: var(--sc-muted, #607166); font-size: .8rem; font-weight: 750; }
.pickup-first-steps span { display: flex; align-items: center; gap: .55rem; }
.pickup-first-steps b { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; background: var(--sc-pickup-soft); color: var(--sc-pickup-green-deep); font-size: .72rem; }

.pickup-location-list { display: grid; gap: .7rem; max-height: min(56vh, 470px); padding: .12rem; overflow: auto; overscroll-behavior: contain; }
.pickup-location-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  gap: .78rem;
  padding: .82rem;
  border: 1px solid var(--sc-line, rgba(0,0,0,.1));
  border-radius: 17px;
  background: var(--sc-surface, #fff);
  color: var(--sc-ink, #16261d);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pickup-location-option:hover,
.pickup-location-option:focus-visible { border-color: color-mix(in srgb, var(--sc-pickup-green) 56%, var(--sc-line)); background: var(--sc-pickup-soft); box-shadow: 0 9px 20px color-mix(in srgb, #102218 8%, transparent); transform: translateY(-1px); outline: 0; }
.pickup-location-option.is-selected { border-color: var(--sc-pickup-green); background: var(--sc-pickup-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc-pickup-green) 18%, transparent); }
.pickup-location-option__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: color-mix(in srgb, var(--sc-pickup-green) 13%, var(--sc-surface)); color: var(--sc-pickup-green-deep); font-size: 1.08rem; }
.pickup-location-option.is-selected .pickup-location-option__icon { background: var(--sc-pickup-green); color: #fff; }
.pickup-location-option__copy { min-width: 0; display: grid; gap: .16rem; }
.pickup-location-option__copy strong,
.pickup-location-option__copy small,
.pickup-location-option__copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickup-location-option__copy strong { font-family: var(--font-display, Sora, sans-serif); font-size: .88rem; font-weight: 760; }
.pickup-location-option__copy small { color: var(--sc-muted, #607166); font-size: .74rem; }
.pickup-location-option__copy em { color: var(--sc-pickup-green-deep); font-size: .7rem; font-style: normal; font-weight: 700; }
.pickup-location-option__arrow { color: var(--sc-muted, #607166); font-size: .86rem; }
.pickup-location-option.is-selected .pickup-location-option__arrow { color: var(--sc-pickup-green-deep); }
.pickup-location-empty { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px dashed var(--sc-line, rgba(0,0,0,.14)); border-radius: 16px; color: var(--sc-muted, #607166); }
.pickup-location-empty > i { color: var(--sc-pickup-green); font-size: 1.2rem; }
.pickup-location-empty strong { display: block; color: var(--sc-ink, #16261d); font-size: .9rem; }
.pickup-location-empty p { margin: .22rem 0 0; font-size: .8rem; line-height: 1.5; }

.pickup-selected-banner,
.catalog-pickup-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .8rem .9rem;
  border: 1px solid color-mix(in srgb, var(--sc-pickup-green) 19%, var(--sc-line));
  border-radius: 18px;
  background: var(--sc-pickup-soft);
}
.pickup-selected-banner { justify-content: space-between; margin-bottom: 1.2rem; }
.pickup-selected-banner > div,
.catalog-pickup-summary > div { display: grid; min-width: 0; gap: .12rem; }
.pickup-selected-banner span { color: var(--sc-pickup-green-deep); font-size: .7rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.pickup-selected-banner strong,
.catalog-pickup-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display, Sora, sans-serif); font-size: .88rem; }
.pickup-selected-banner small,
.catalog-pickup-summary em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sc-muted, #607166); font-size: .75rem; font-style: normal; }
.pickup-selected-banner .btn-sc-light { flex: 0 0 auto; white-space: nowrap; }
.catalog-pickup-summary { margin-bottom: .75rem; }
.catalog-pickup-summary__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: var(--sc-pickup-green); color: #fff; }
.catalog-pickup-summary > div { flex: 1; }
.catalog-pickup-summary > div small { color: var(--sc-muted, #607166); font-size: .68rem; font-weight: 750; }
.catalog-pickup-summary .btn-sc-light { flex: 0 0 auto; white-space: nowrap; }
.catalog-filter-row--single { grid-template-columns: minmax(0, 230px); }
.pickup-location-sheet { width: min(680px, calc(100vw - 28px)); }
.pickup-location-sheet .sheet-body { padding-top: .85rem; }
.pickup-location-modal .pickup-location-list { max-height: min(58dvh, 480px); }

@media (max-width: 760px) {
  .pickup-first-section { grid-template-columns: 1fr; padding: 1rem; border-radius: 21px; }
  .pickup-first-section__intro { padding: .25rem .25rem 0; }
  .pickup-first-section__intro h2 { max-width: 18ch; font-size: 1.55rem; }
  .pickup-first-steps { grid-template-columns: 1fr 1fr 1fr; gap: .35rem; font-size: .68rem; }
  .pickup-first-steps span { align-items: flex-start; gap: .33rem; }
  .pickup-first-steps b { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 7px; }
  .pickup-location-list { max-height: none; }
  .pickup-location-option { min-height: 76px; }
  .pickup-selected-banner { align-items: flex-start; }
  .pickup-selected-banner .btn-sc-light { min-height: 39px; padding-inline: .7rem; font-size: .74rem; }
  .catalog-pickup-summary { align-items: flex-start; }
  .catalog-pickup-summary .btn-sc-light span { display: none; }
  .catalog-pickup-summary .btn-sc-light { min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
  .catalog-filter-row--single { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .pickup-first-section { padding: .85rem; }
  .pickup-location-option { grid-template-columns: 36px minmax(0, 1fr) 15px; gap: .62rem; padding: .72rem; }
  .pickup-location-option__icon { width: 36px; height: 36px; border-radius: 11px; }
  .pickup-location-option__copy strong { font-size: .8rem; }
  .pickup-location-option__copy small { font-size: .68rem; }
  .pickup-selected-banner { padding: .7rem; gap: .52rem; }
  .pickup-selected-banner strong { max-width: 16ch; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pickup-location-option { transition: none; }
}