/* Selected telephone style: soft capsule, adapted to each store background. */
.store-actions.call-actions {
  --call-fill:#f6f4ee;
  --call-ink:var(--brand-red-ink);
  --call-hover:var(--brand-red-soft);
  --directions-ink:#f6f4ee;
  --directions-line:var(--brand-red-line);
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  font-family:'Manrope',Arial,sans-serif;
}

.contact-stores .call-actions {
  --call-fill:var(--brand-red);
  --call-ink:#fffefb;
  --call-hover:var(--brand-red-hover);
  --directions-ink:#303a2d;
  --directions-line:var(--brand-red-line);
}

.visit-section .call-actions {
  --directions-ink:#fff;
  --directions-line:#ffffff80;
}

.call-actions .phone-call {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  gap:12px;
  min-height:59px;
  padding:11px 20px 11px 12px;
  border-radius:999px;
  background:var(--call-fill);
  color:var(--call-ink);
  transition:background .2s,transform .2s;
}

.call-actions .phone-icon {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:50%;
  background:color-mix(in srgb,currentColor 9%,transparent);
}

.call-actions .phone-icon svg {
  width:18px;
  height:18px;
}

.call-actions .phone-copy {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.call-actions .phone-label {
  font-size:7px;
  font-weight:500;
  letter-spacing:.11em;
  line-height:1.4;
  text-transform:uppercase;
  opacity:.8;
}

.call-actions .phone-number {
  font-size:17px;
  font-weight:600;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  line-height:1.35;
  white-space:nowrap;
}

.call-actions .phone-call:hover {
  background:var(--call-hover);
  transform:translateY(-2px);
}

.call-actions .phone-directions {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:44px;
  padding-block:8px;
  border-bottom:1px solid var(--directions-line);
  color:var(--directions-ink);
  font-size:11px;
  line-height:1.4;
  white-space:nowrap;
}

.call-actions .phone-directions svg {
  width:17px;
  height:17px;
  transition:transform .2s;
}

.call-actions .phone-directions:hover svg {
  transform:translate(2px,-2px);
}

@media(prefers-reduced-motion:reduce) {
  .call-actions .phone-call,
  .call-actions .phone-directions svg {
    transition:none;
    transform:none;
  }
  .call-actions .phone-call:hover,
  .call-actions .phone-directions:hover svg {
    transform:none;
  }
}